From 50adf4b2b35d57690172678867d83aea6351bb4e Mon Sep 17 00:00:00 2001
From: Shevchik Igor <noreply@anthropic.com>
Date: Sat, 29 Aug 2026 10:54:14 +0000
Subject: [PATCH 1/2] fix(Modal,Slideover): render the actions slot when
 nothing else opens the header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`componentRender` now mounts with `attachTo: document.body` and unmounts as
soon as it has the markup. Both halves were doing work the suite could not see.

Attached, reka-ui can answer the questions it asks the document. Its dialogs
check their own accessibility with `document.getElementById(titleId)` in
`onMounted`, which failed against a detached tree and warned that
`DialogContent` requires a `DialogTitle` with the title sitting in the markup
just produced. With the register in `console-gate.ts` emptied on both sides:
623 console messages from 62 tests before, 366 from 56 after. It also moved 402
snapshot entries across 25 files toward what a browser renders — `Header` and
`Table` gain the `aria-hidden` behind an open dialog, `CheckboxGroup` and
`RadioGroup` the `aria-label` read off the associated `<label>` rather than the
raw value.

Unmounting is the half that found defects, because teardown had never run:

- `Modal` and `Slideover` dropped the `actions` slot whenever nothing else
  asked for a header. `Slideover` hit it on its own defaults — `side: 'bottom'`
  puts the close button outside the header, so `<B24Slideover :actions>`
  rendered nothing at all. `Modal` had the same hole twice over, in the header
  and in `contentWrapper`, reachable with `:close="false"`. `Drawer` had it
  right and is the reference. The `#454` collision guard is what surfaced this:
  `renders with actions slot` was byte-identical to `renders with open`.

- `Countdown` kept its `requestAnimationFrame` handle in a `ref`, which deep-
  wraps an object value in `reactive()`. A browser returns a number there, but
  happy-dom returns the Node `Immediate` it scheduled, so `clearImmediate` was
  handed a Proxy and unlinked a node that was in no queue — four uncaught
  `TypeError: Cannot read properties of undefined (reading '_idleNext')` the
  moment `pause()` first ran. The handle is now a plain `let`, dropped as it is
  spent.

- The `vue` project's router is a module singleton, and vue-router's `install`
  replaces `app.unmount` with one that resets `currentRoute` to
  `START_LOCATION`. Every mount after the first rendered against an
  un-navigated router; `Link to="/"` silently stopped being active. The shim
  awaits `router.isReady()`.

Three tests were asserting nothing and now assert something: `Countdown`'s
`pauses counting` never started the countdown, so it watched
`cancelAnimationFrame` be handed the initial `0`; the two editor specs mocked
`registerPlugin` without `unregisterPlugin`, which only mattered once teardown
reached tiptap's `beforeUnmount`.

Four `#454` baseline groups were held apart by `pointer-events: auto`, which
reka-ui renders from a module-global layer stack — so it recorded how many
earlier cases were still mounted, not anything under test. The baseline is
regenerated and is smaller: 291 groups, 875 entries.

One register entry goes: `nuxt:components/Header.spec.ts`. The rest stay
because the register keys on files and every dialog spec also mounts by hand,
outside `componentRender`. That is 293 call sites across 112 files and wants
its own change.

Refs #87
---
 src/runtime/components/Countdown.vue          |  44 ++-
 src/runtime/components/Modal.vue              |   4 +-
 src/runtime/components/Slideover.vue          |   2 +-
 test/component-render.ts                      |  39 +-
 test/components/Countdown.spec.ts             |   4 +
 test/components/EditorDragHandle.spec.ts      |   6 +-
 test/components/EditorToolbar.spec.ts         |   4 +-
 test/components/Modal.spec.ts                 |   7 +
 .../CheckboxGroup-vue.spec.ts.snap            |  18 +-
 .../__snapshots__/CheckboxGroup.spec.ts.snap  |  18 +-
 .../CommandPalette-vue.spec.ts.snap           | 152 ++++----
 .../DashboardSearch-vue.spec.ts.snap          |   4 +-
 .../__snapshots__/Drawer-vue.spec.ts.snap     |  96 ++---
 .../__snapshots__/Drawer.spec.ts.snap         |  96 ++---
 .../DropdownMenu-vue.spec.ts.snap             |  62 +--
 .../__snapshots__/DropdownMenu.spec.ts.snap   |  62 +--
 .../__snapshots__/Header-vue.spec.ts.snap     |  18 +-
 .../__snapshots__/Header.spec.ts.snap         |  14 +-
 .../__snapshots__/Listbox-vue.spec.ts.snap    | 120 +++---
 .../__snapshots__/Modal-vue.spec.ts.snap      | 103 +++--
 .../__snapshots__/Modal.spec.ts.snap          | 103 +++--
 .../__snapshots__/RadioGroup-vue.spec.ts.snap |  18 +-
 .../__snapshots__/RadioGroup.spec.ts.snap     |  18 +-
 .../__snapshots__/Select-vue.spec.ts.snap     | 138 +++----
 .../__snapshots__/Select.spec.ts.snap         | 138 +++----
 .../__snapshots__/SelectMenu-vue.spec.ts.snap |   4 +-
 .../__snapshots__/Slideover-vue.spec.ts.snap  | 105 ++---
 .../__snapshots__/Slideover.spec.ts.snap      | 105 ++---
 .../__snapshots__/Switch-vue.spec.ts.snap     |  10 +-
 .../__snapshots__/Switch.spec.ts.snap         |  10 +-
 .../__snapshots__/Table-vue.spec.ts.snap      | 366 +++++++++---------
 .../__snapshots__/Table.spec.ts.snap          | 366 +++++++++---------
 .../__snapshots__/ContentSearch.spec.ts.snap  |  58 +--
 .../indistinguishable-snapshots.json          |  33 +-
 test/utils/console-gate.ts                    |  19 +-
 test/utils/mount.ts                           |  10 +
 36 files changed, 1264 insertions(+), 1110 deletions(-)

diff --git a/src/runtime/components/Countdown.vue b/src/runtime/components/Countdown.vue
index 935c334d6..866312a8f 100644
--- a/src/runtime/components/Countdown.vue
+++ b/src/runtime/components/Countdown.vue
@@ -143,9 +143,20 @@ const endTime = ref<number>(0)
  */
 const totalMilliseconds = ref<number>(0)
 /**
- * The request ID of the requestAnimationFrame.
+ * The handle of the pending `requestAnimationFrame`, or `0` when none is
+ * scheduled.
+ *
+ * Deliberately not a `ref`. Nothing renders or watches it, and a `ref` deep-
+ * wraps an object value in `reactive()` — which is exactly what this holds
+ * outside a browser: a DOM spec says `requestAnimationFrame` returns a `long`,
+ * happy-dom returns the Node `Immediate` it scheduled. Stored in a `ref`, the
+ * handle came back out as a Proxy, and `clearImmediate` unlinked a node that
+ * was not identical to anything in Node's queue, leaving `processImmediate` to
+ * read `_idleNext` off `undefined`. Four uncaught `TypeError`s in
+ * `Countdown.spec.ts`, invisible until the harness began unmounting wrappers
+ * and `pause` ran for the first time.
  */
-const requestId = ref<number>(0)
+let requestId: number = 0
 // endregion ////
 
 // region events ////
@@ -323,9 +334,18 @@ function continueProcess(): void {
   // props watcher's `start()` and `onActivated`'s `resumeCounting()` both land
   // here. Measured: one extra uncancellable frame chain, and `progress` firing
   // twice for a single tick. Guarding here rather than at the two call sites
-  // covers any future third caller too. `cancelAnimationFrame` on a stale or
-  // already-fired handle is a no-op, so the recursive call from `step` is safe.
-  cancelAnimationFrame(requestId.value)
+  // covers any future third caller too.
+  //
+  // A spent handle never reaches here: `step` drops it as it fires, and `pause`
+  // drops it as it cancels, so `requestId` holds only a frame that is still
+  // pending. That used to rest on `cancelAnimationFrame` being a no-op for a
+  // handle that already ran, which is true of a browser and not of happy-dom:
+  // its handle is a Node `Immediate`, and `clearImmediate` on one that has
+  // already executed unlinks a node that is no longer in the queue, leaving
+  // Node's `processImmediate` to read `_idleNext` off `undefined`. Four
+  // uncaught `TypeError`s in `Countdown.spec.ts` — invisible until the harness
+  // began unmounting wrappers, because nothing ever called `pause`.
+  cancelAnimationFrame(requestId)
 
   const delay = Math.min(totalMilliseconds.value, props.interval!)
 
@@ -333,6 +353,9 @@ function continueProcess(): void {
     let init: number
     let prev: number
     const step = (now: number) => {
+      // This frame has fired, so its handle is spent — see `pause`.
+      requestId = 0
+
       if (!init) {
         init = now
       }
@@ -350,13 +373,13 @@ function continueProcess(): void {
       ) {
         progress()
       } else {
-        requestId.value = requestAnimationFrame(step)
+        requestId = requestAnimationFrame(step)
       }
 
       prev = now
     }
 
-    requestId.value = requestAnimationFrame(step)
+    requestId = requestAnimationFrame(step)
   } else {
     stop()
   }
@@ -366,7 +389,12 @@ function continueProcess(): void {
  * Pauses the countdown.
  */
 function pause(): void {
-  cancelAnimationFrame(requestId.value)
+  if (!requestId) {
+    return
+  }
+
+  cancelAnimationFrame(requestId)
+  requestId = 0
 }
 
 /**
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index e428e77d3..46de633c5 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -194,11 +194,11 @@ const b24ui = computed(() => tv({ extend: theme, ...(appConfig.b24ui?.modal || {
 
         <slot name="content" :close="close">
           <div
-            v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close) || !!slots.body"
+            v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close) || !!slots.body || !!slots.actions"
             data-slot="contentWrapper"
             :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })"
           >
-            <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+            <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close) || !!slots.actions" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
               <slot name="header" :close="close">
                 <div
                   v-if="props.title || !!slots.title || props.description || !!slots.description"
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index f965447dc..ee2890a68 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -221,7 +221,7 @@ const isBtnCloseExternal = computed(() => (!props.inset && ['left', 'right', 'bo
 
           <slot name="content" :close="close">
             <div
-              v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (!isBtnCloseExternal && (props.close || !!slots.close))"
+              v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (!isBtnCloseExternal && (props.close || !!slots.close)) || !!slots.actions"
               data-slot="header"
               :class="b24ui.header({ class: props.b24ui?.header })"
             >
diff --git a/test/component-render.ts b/test/component-render.ts
index 3b37c2f00..78893b765 100644
--- a/test/component-render.ts
+++ b/test/component-render.ts
@@ -4,6 +4,39 @@ import { it, expect } from 'vitest'
 
 type MountSuspendedOptions<T> = Parameters<typeof mountSuspended<T>>[1]
 
+/**
+ * Mounted into the document, not beside it.
+ *
+ * Vue Test Utils renders into a detached element by default. That is invisible
+ * until something asks the document a question — and reka-ui's dialog family
+ * does: it checks its own accessibility with `document.getElementById(titleId)`
+ * in `onMounted`. A detached tree is not in the document, so the lookup failed
+ * and every dialog spec rendering with `portal: false` warned that
+ * `DialogContent` requires a `DialogTitle`, with the title sitting in the
+ * markup it had just produced. The case named `renders with title correctly`
+ * warned too.
+ *
+ * Measured on `Modal`, one mount each: 2 warnings detached, 0 attached, 0 with
+ * the portal left on. Across the suite, with `console-gate.ts`'s register
+ * emptied on both sides: 623 messages from 62 tests before, 366 from 56 after.
+ * Only one register entry could be removed, because the register keys on files
+ * and the dialog specs also mount by hand — see the note on that list.
+ *
+ * Attaching also lets reka-ui reach the rest of the document, which is why this
+ * moved 402 snapshot entries across 25 files: `Header` and `Table` gain the
+ * `aria-hidden` a browser puts on everything behind an open dialog, and
+ * `CheckboxGroup` and `RadioGroup` gain the `aria-label` reka-ui reads off the
+ * associated `<label>` rather than the raw value. The snapshots are closer to a
+ * browser than they were.
+ *
+ * The wrapper is unmounted as soon as its markup is taken, so nothing
+ * accumulates in `document.body` between cases — and teardown now runs, which
+ * is a second source of truth in its own right. Without it reka-ui's
+ * module-global layer stack kept every layer any case had ever mounted, so
+ * `DismissableLayer` rendered `pointer-events: auto` according to how many
+ * earlier cases were still on the stack rather than to anything under test.
+ * Four `#454` baseline groups were held apart by exactly that byte.
+ */
 async function componentRender<T>(nameOrHtml: string, options: MountSuspendedOptions<T>, component: T) {
   let html: string
   const name = component && typeof component === 'object' && '__file' in component && typeof component.__file === 'string'
@@ -14,11 +47,13 @@ async function componentRender<T>(nameOrHtml: string, options: MountSuspendedOpt
       template: nameOrHtml,
       components: { [`B24${name}`]: component }
     }
-    const result = await mountSuspended(app)
+    const result = await mountSuspended(app, { attachTo: document.body })
     html = result.html()
+    result.unmount()
   } else {
-    const cResult = await mountSuspended<T>(component, options)
+    const cResult = await mountSuspended<T>(component, { ...options, attachTo: document.body })
     html = cResult.html()
+    cResult.unmount()
   }
   return html
 }
diff --git a/test/components/Countdown.spec.ts b/test/components/Countdown.spec.ts
index 038709032..6ee5ac89a 100644
--- a/test/components/Countdown.spec.ts
+++ b/test/components/Countdown.spec.ts
@@ -101,6 +101,10 @@ describe('Countdown', () => {
         props: { seconds: 10, needStartImmediately: false }
       })
       const vm = wrapper.vm as any
+      // `start()` first, because there is nothing to cancel otherwise. This
+      // used to pass without it: `pause` cancelled unconditionally, so the spy
+      // recorded a call that handed `cancelAnimationFrame` the initial `0`.
+      vm.start()
       vm.pause()
       expect(cancelAnimationFrameSpy).toHaveBeenCalled()
     })
diff --git a/test/components/EditorDragHandle.spec.ts b/test/components/EditorDragHandle.spec.ts
index 89f6e4c1e..20697e497 100644
--- a/test/components/EditorDragHandle.spec.ts
+++ b/test/components/EditorDragHandle.spec.ts
@@ -6,7 +6,11 @@ import { renderEach } from '../component-render'
 import EditorDragHandle from '../../src/runtime/components/EditorDragHandle.vue'
 
 describe('EditorDragHandle', () => {
-  const props = { editor: { registerPlugin: vi.fn() } as unknown as Editor }
+  // `unregisterPlugin` is the teardown half. It was missing for as long as
+  // nothing unmounted the wrapper — `componentRender` now does, so tiptap's
+  // `DragHandleVue` reaches its `beforeUnmount` and calls it. A mock that
+  // implements only the setup half is a fixture that never sees teardown.
+  const props = { editor: { registerPlugin: vi.fn(), unregisterPlugin: vi.fn() } as unknown as Editor }
 
   renderEach(EditorDragHandle, [
     // Props
diff --git a/test/components/EditorToolbar.spec.ts b/test/components/EditorToolbar.spec.ts
index df3c5f8b0..2a2140547 100644
--- a/test/components/EditorToolbar.spec.ts
+++ b/test/components/EditorToolbar.spec.ts
@@ -61,7 +61,9 @@ describe('EditorToolbar', () => {
     'icon': EncloseTextInCodeTagIcon,
     'aria-label': 'Code'
   }]]
-  const props = { editor: { registerPlugin: vi.fn() } as unknown as Editor, items }
+  // `unregisterPlugin` for the same reason as in EditorDragHandle: the wrapper
+  // is unmounted now, so tiptap's BubbleMenu reaches its teardown.
+  const props = { editor: { registerPlugin: vi.fn(), unregisterPlugin: vi.fn() } as unknown as Editor, items }
 
   renderEach(EditorToolbar, [
     // Props
diff --git a/test/components/Modal.spec.ts b/test/components/Modal.spec.ts
index d54fca1a5..841e92bd6 100644
--- a/test/components/Modal.spec.ts
+++ b/test/components/Modal.spec.ts
@@ -32,6 +32,13 @@ describe('Modal', () => {
     ['with title slot', { props, slots: { title: () => 'Title slot' } }],
     ['with description slot', { props, slots: { description: () => 'Description slot' } }],
     ['with actions slot', { props, slots: { actions: () => 'Actions slot' } }],
+    // The header is what holds the `actions` slot, and every other reason to
+    // render it is off here. It used to be missing from that `v-if`, so an
+    // `actions` slot on its own rendered nothing — the case above did not show
+    // it, because `close` defaults to `true` and kept the header alive.
+    // `Slideover` had the same hole and was reached by its default fixture:
+    // with `side: 'bottom'` its close button is external, so no header.
+    ['with actions slot and without close', { props: { ...props, close: false }, slots: { actions: () => 'Actions slot' } }],
     ['with close slot', { props, slots: { close: () => 'Close slot' } }],
     ['with body slot', { props, slots: { body: () => 'Body slot' } }],
     ['with footer slot', { props, slots: { footer: () => 'Footer slot' } }]
diff --git a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
index 8f7fa9632..78034b07e 100644
--- a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
@@ -42,7 +42,7 @@ exports[`CheckboxGroup > renders with air-primary-success variant list correctly
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="root" class="relative flex items-start flex-row style-filled-success">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 1"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-lg) leading-4">
@@ -51,7 +51,7 @@ exports[`CheckboxGroup > renders with air-primary-success variant list correctly
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled-success">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -62,7 +62,7 @@ exports[`CheckboxGroup > renders with air-primary-success variant list correctly
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled-success">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -612,7 +612,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-row gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" aria-label="Option 1"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-lg) leading-4">
@@ -621,7 +621,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -632,7 +632,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -1287,7 +1287,7 @@ exports[`CheckboxGroup > renders with variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 1"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-lg) leading-4">
@@ -1296,7 +1296,7 @@ exports[`CheckboxGroup > renders with variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -1307,7 +1307,7 @@ exports[`CheckboxGroup > renders with variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
diff --git a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
index e1034cd2c..794d2f533 100644
--- a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
@@ -42,7 +42,7 @@ exports[`CheckboxGroup > renders with air-primary-success variant list correctly
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="root" class="relative flex items-start flex-row style-filled-success">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 1"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-lg) leading-4">
@@ -51,7 +51,7 @@ exports[`CheckboxGroup > renders with air-primary-success variant list correctly
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled-success">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -62,7 +62,7 @@ exports[`CheckboxGroup > renders with air-primary-success variant list correctly
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled-success">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -612,7 +612,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-row gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" aria-label="Option 1"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-lg) leading-4">
@@ -621,7 +621,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -632,7 +632,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -1287,7 +1287,7 @@ exports[`CheckboxGroup > renders with variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 1"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-full"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-lg) leading-4">
@@ -1296,7 +1296,7 @@ exports[`CheckboxGroup > renders with variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -1307,7 +1307,7 @@ exports[`CheckboxGroup > renders with variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="root" class="relative flex items-start flex-row style-filled">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
index ee7496793..2cfe9143f 100644
--- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
@@ -3,13 +3,13 @@
 exports[`CommandPalette > renders with as correctly 1`] = `
 "<section dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -68,13 +68,13 @@ exports[`CommandPalette > renders with as correctly 1`] = `
 exports[`CommandPalette > renders with b24ui correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px] [&amp;>input]:h-10">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -133,13 +133,13 @@ exports[`CommandPalette > renders with b24ui correctly 1`] = `
 exports[`CommandPalette > renders with by correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-[20px]">
@@ -199,13 +199,13 @@ exports[`CommandPalette > renders with by correctly 1`] = `
 exports[`CommandPalette > renders with childrenIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -264,13 +264,13 @@ exports[`CommandPalette > renders with childrenIcon correctly 1`] = `
 exports[`CommandPalette > renders with class correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-accent-main-success)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -329,12 +329,12 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 exports[`CommandPalette > renders with close correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)"><!--v-if--><div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)"><path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path></svg><!--v-if--><!--v-if--></div></button></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)"><!--v-if--><div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)"><path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path></svg><!--v-if--><!--v-if--></div></button></span>
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -393,12 +393,12 @@ exports[`CommandPalette > renders with close correctly 1`] = `
 exports[`CommandPalette > renders with close slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2">Close slot</span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2">Close slot</span>
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -457,12 +457,12 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)"><!--v-if--><div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg><!--v-if--><!--v-if--></div></button></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)"><!--v-if--><div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg><!--v-if--><!--v-if--></div></button></span>
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -521,13 +521,13 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 exports[`CommandPalette > renders with custom slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -581,7 +581,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
 exports[`CommandPalette > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-10"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
@@ -631,7 +631,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Users</div><a href="https://github.com/bitrix24" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" alt="Some User" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">bitrix24</span>
+        <div id="reka-listbox-group-v-9" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Users</div><a href="https://github.com/bitrix24" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors" data-highlighted=""><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" alt="Some User" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">bitrix24</span>
           <!--v-if--></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-[20px]"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span>
         </a>
@@ -646,13 +646,13 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
 exports[`CommandPalette > renders with descriptionKey correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create Project</span>
           <!--v-if--></span><span data-slot="itemDescription" class="truncate -mt-[6px] text-description text-(length:--ui-font-size-sm) [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create Project</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -769,13 +769,13 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
 exports[`CommandPalette > renders with footer slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -834,13 +834,13 @@ exports[`CommandPalette > renders with footer slot correctly 1`] = `
 exports[`CommandPalette > renders with group-label slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Group label slot</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <div id="reka-listbox-group-v-0" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Group label slot</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -899,13 +899,13 @@ exports[`CommandPalette > renders with group-label slot correctly 1`] = `
 exports[`CommandPalette > renders with groups correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -964,13 +964,13 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
 exports[`CommandPalette > renders with groups with description correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create Project</span>
           <!--v-if--></span><span data-slot="itemDescription" class="truncate -mt-[6px] text-description text-(length:--ui-font-size-sm) [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Start a new project from scratch</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1008,13 +1008,13 @@ exports[`CommandPalette > renders with groups with description correctly 1`] = `
 exports[`CommandPalette > renders with icon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1073,13 +1073,13 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
 exports[`CommandPalette > renders with item slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors">Item slot</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted="">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors">Item slot</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
             <path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add label</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add a label to the current item.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">L</kbd></span>
@@ -1102,13 +1102,13 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
 exports[`CommandPalette > renders with item-description slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend group-data-highlighted:not-group-data-disabled:text-legend transition-colors">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create Project</span>
           <!--v-if--></span><span data-slot="itemDescription" class="truncate -mt-[6px] text-description text-(length:--ui-font-size-sm) [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1146,13 +1146,13 @@ exports[`CommandPalette > renders with item-description slot correctly 1`] = `
 exports[`CommandPalette > renders with item-label slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label">Item label slot</span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1207,13 +1207,13 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
 exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
           <!--v-if--></span>
         </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new folder</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new folder in the current directory or workspace.</span></span>
@@ -1257,13 +1257,13 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
 exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]">Item trailing slot<!--v-if--></span>
@@ -1319,13 +1319,13 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
 exports[`CommandPalette > renders with labelKey correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock("svg", {
@@ -1440,13 +1440,13 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
 exports[`CommandPalette > renders with loading correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg ps-[34px] md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[21px]"><style> @keyframes waitLoader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}} </style><g style="transform-origin: center 12.71px; animation: waitLoader 1s infinite steps(12);"><path fill="currentColor" d="M4.512 13.555a.845.845 0 0 1 0-1.691H7.18a.845.845 0 0 1 0 1.69z" opacity=".083"></path><path fill="currentColor" d="M5.093 9.697a.845.845 0 0 1 .845-1.464l2.31 1.334a.845.845 0 0 1-.845 1.464z" opacity=".166"></path><path fill="currentColor" d="M7.524 6.647a.845.845 0 1 1 1.464-.845l1.334 2.31a.845.845 0 1 1-1.464.845z" opacity=".249"></path><path fill="currentColor" d="M11.155 5.221a.845.845 0 0 1 1.69 0V7.89a.845.845 0 0 1-1.69 0z" opacity=".332"></path><path fill="currentColor" d="M15.012 5.802a.845.845 0 1 1 1.464.846l-1.334 2.31a.845.845 0 0 1-1.464-.845z" opacity=".415"></path><path fill="currentColor" d="M18.062 8.233a.845.845 0 1 1 .845 1.464l-2.31 1.334a.845.845 0 0 1-.846-1.464z" opacity=".498"></path><path fill="currentColor" d="M16.82 13.555a.845.845 0 0 1 0-1.691h2.668a.845.845 0 0 1 0 1.69z" opacity=".581"></path><path fill="currentColor" d="M15.752 15.851a.845.845 0 0 1 .845-1.464l2.31 1.334a.845.845 0 0 1-.845 1.464z" opacity=".664"></path><path fill="currentColor" d="M13.678 17.306a.845.845 0 1 1 1.464-.845l1.334 2.31a.845.845 0 1 1-1.464.846z" opacity=".747"></path><path fill="currentColor" d="M11.155 17.529a.845.845 0 0 1 1.69 0v2.668a.845.845 0 0 1-1.69 0z" opacity=".83"></path><path fill="currentColor" d="M8.858 16.46a.845.845 0 0 1 1.464.846l-1.334 2.31a.845.845 0 0 1-1.464-.845z" opacity=".913"></path><path fill="currentColor" d="M7.403 14.387a.845.845 0 1 1 .845 1.464l-2.31 1.334a.845.845 0 1 1-.845-1.465z"></path></g></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg ps-[34px] md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[21px]"><style> @keyframes waitLoader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}} </style><g style="transform-origin: center 12.71px; animation: waitLoader 1s infinite steps(12);"><path fill="currentColor" d="M4.512 13.555a.845.845 0 0 1 0-1.691H7.18a.845.845 0 0 1 0 1.69z" opacity=".083"></path><path fill="currentColor" d="M5.093 9.697a.845.845 0 0 1 .845-1.464l2.31 1.334a.845.845 0 0 1-.845 1.464z" opacity=".166"></path><path fill="currentColor" d="M7.524 6.647a.845.845 0 1 1 1.464-.845l1.334 2.31a.845.845 0 1 1-1.464.845z" opacity=".249"></path><path fill="currentColor" d="M11.155 5.221a.845.845 0 0 1 1.69 0V7.89a.845.845 0 0 1-1.69 0z" opacity=".332"></path><path fill="currentColor" d="M15.012 5.802a.845.845 0 1 1 1.464.846l-1.334 2.31a.845.845 0 0 1-1.464-.845z" opacity=".415"></path><path fill="currentColor" d="M18.062 8.233a.845.845 0 1 1 .845 1.464l-2.31 1.334a.845.845 0 0 1-.846-1.464z" opacity=".498"></path><path fill="currentColor" d="M16.82 13.555a.845.845 0 0 1 0-1.691h2.668a.845.845 0 0 1 0 1.69z" opacity=".581"></path><path fill="currentColor" d="M15.752 15.851a.845.845 0 0 1 .845-1.464l2.31 1.334a.845.845 0 0 1-.845 1.464z" opacity=".664"></path><path fill="currentColor" d="M13.678 17.306a.845.845 0 1 1 1.464-.845l1.334 2.31a.845.845 0 1 1-1.464.846z" opacity=".747"></path><path fill="currentColor" d="M11.155 17.529a.845.845 0 0 1 1.69 0v2.668a.845.845 0 0 1-1.69 0z" opacity=".83"></path><path fill="currentColor" d="M8.858 16.46a.845.845 0 0 1 1.464.846l-1.334 2.31a.845.845 0 0 1-1.464-.845z" opacity=".913"></path><path fill="currentColor" d="M7.403 14.387a.845.845 0 1 1 .845 1.464l-2.31 1.334a.845.845 0 1 1-.845-1.465z"></path></g></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1505,7 +1505,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
 exports[`CommandPalette > renders with modelValue correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-10"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
@@ -1555,7 +1555,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Users</div><a href="https://github.com/bitrix24" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" alt="Some User" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">bitrix24</span>
+        <div id="reka-listbox-group-v-9" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Users</div><a href="https://github.com/bitrix24" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors" data-highlighted=""><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" alt="Some User" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">bitrix24</span>
           <!--v-if--></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-[20px]"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span>
         </a>
@@ -1570,13 +1570,13 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
 exports[`CommandPalette > renders with placeholder correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Search..." data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Search..." data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1635,13 +1635,13 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
 exports[`CommandPalette > renders with searchTerm and preserveGroupOrder correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="f"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="f" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1672,13 +1672,13 @@ exports[`CommandPalette > renders with searchTerm and preserveGroupOrder correct
 exports[`CommandPalette > renders with searchTerm correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="f"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="f" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors">
+        <div id="reka-listbox-group-v-0" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors" data-highlighted="">
           <div data-slot="root" class="relative isolate inline-flex items-center justify-center shrink-0 size-[20px]"><span data-slot="base" class="ui-counter__scope --air font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-medium) select-none relative min-w-(--ui-counter-size) h-(--ui-counter-size) py-0 px-(--ui-counter-inline-space) inline-flex items-center justify-center bg-(--b24ui-background) rounded-(--ui-counter-current-size) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-center align-middle text-(length:--ui-counter-font-size) text-(--b24ui-color) leading-(--ui-counter-current-size) overflow-hidden z-1 text-nowrap style-filled-success ui-counter-md top-0 right-0"><span></span>
             <!----></span>
           </div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">feature</span>
@@ -1709,7 +1709,7 @@ exports[`CommandPalette > renders with searchTerm correctly 1`] = `
 exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-10"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
@@ -1759,7 +1759,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Users</div><a href="https://github.com/bitrix24" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" alt="Some User" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">bitrix24</span>
+        <div id="reka-listbox-group-v-9" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Users</div><a href="https://github.com/bitrix24" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors" data-highlighted=""><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" alt="Some User" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">bitrix24</span>
           <!--v-if--></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-[20px]"><path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path></svg></span>
         </a>
@@ -1774,13 +1774,13 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
 exports[`CommandPalette > renders with size lg correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-2 text-(length:--ui-font-size-lg) gap-2 text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-5 text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-2 text-(length:--ui-font-size-lg) gap-2 text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-5 text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-2"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1839,13 +1839,13 @@ exports[`CommandPalette > renders with size lg correctly 1`] = `
 exports[`CommandPalette > renders with size md correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1904,13 +1904,13 @@ exports[`CommandPalette > renders with size md correctly 1`] = `
 exports[`CommandPalette > renders with size sm correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[28px] pe-[28px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-sm)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-1.5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[16px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-sm)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-1.5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[16px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-1.5 text-(length:--ui-font-size-sm) gap-1.5 text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-4 text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-1.5 text-(length:--ui-font-size-sm) gap-1.5 text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-4 text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-1.5"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -1969,13 +1969,13 @@ exports[`CommandPalette > renders with size sm correctly 1`] = `
 exports[`CommandPalette > renders with size xl correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-2 text-(length:--ui-font-size-2xl) gap-2 text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-6 text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-2 text-(length:--ui-font-size-2xl) gap-2 text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-6 text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-2"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[28px] min-w-[28px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[28px] min-w-[28px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -2034,13 +2034,13 @@ exports[`CommandPalette > renders with size xl correctly 1`] = `
 exports[`CommandPalette > renders with size xs correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[22px] pe-[22px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-xs)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[14px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-xs)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[14px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-1 text-(length:--ui-font-size-xs) gap-1 text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-4 text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-1 text-(length:--ui-font-size-xs) gap-1 text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-4 text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-1"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -2099,13 +2099,13 @@ exports[`CommandPalette > renders with size xs correctly 1`] = `
 exports[`CommandPalette > renders with size xss correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[20px] pe-[20px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-4xs)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[12px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-4xs)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[12px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-1 text-(length:--ui-font-size-4xs) gap-1 text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-4 text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-1 text-(length:--ui-font-size-4xs) gap-1 text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-4 text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-1"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -2164,12 +2164,12 @@ exports[`CommandPalette > renders with size xss correctly 1`] = `
 exports[`CommandPalette > renders with trailingIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg></span>
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -2228,13 +2228,13 @@ exports[`CommandPalette > renders with trailingIcon correctly 1`] = `
 exports[`CommandPalette > renders with users-group-label slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
@@ -2293,13 +2293,13 @@ exports[`CommandPalette > renders with users-group-label slot correctly 1`] = `
 exports[`CommandPalette > renders with valueKey correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
+    <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-[20px]">
@@ -2389,10 +2389,10 @@ exports[`CommandPalette > renders without groups correctly 1`] = `
 exports[`CommandPalette > renders without input correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-[20px] text-legend">
             <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
           </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Add new file</span><span data-slot="itemLabelSuffix" class="truncate text-description [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Ctrl</kbd><kbd data-slot="base" class="inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background) style-outline h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">N</kbd></span>
diff --git a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
index f4dbc3e19..8ba5e7624 100644
--- a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
@@ -160,12 +160,12 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
       <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
-        <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)"><!--v-if--><div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)"><path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path></svg><!--v-if--><!--v-if--></div></button></span>
+        <!--v-if--><input type="text" placeholder="Enter command or search…" data-slot="input" class="w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) px-0 ring-0 focus-visible:ring-0 style-transparent-bg" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-3"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)"><!--v-if--><div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)"><path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path></svg><!--v-if--><!--v-if--></div></button></span>
       </div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-legend data-highlighted:not-data-disabled:text-legend data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="text-label p-[6px] text-(length:--ui-font-size-xs) gap-[6px]">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30 p-[6px] text-(length:--ui-font-size-md) gap-[6px] text-label before:bg-(--ui-color-base-8)" data-highlighted="">
               <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0 overflow-hidden"><span data-slot="itemLabel" class="truncate space-x-1 text-label"><!--v-if--><span data-slot="itemLabelBase" class="text-label [&amp;>mark]:text-(--ui-color-black-base) [&amp;>mark]:bg-(--ui-color-collab-accent-less-1)">Home</span>
               <!--v-if--></span>
               <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex items-center gap-[6px]"><!--v-if--><!--v-if--></span>
diff --git a/test/components/__snapshots__/Drawer-vue.spec.ts.snap b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
index 1ac07f536..3398d4704 100644
--- a/test/components/__snapshots__/Drawer-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`Drawer > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -35,8 +35,8 @@ exports[`Drawer > renders with b24ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -56,8 +56,8 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -77,8 +77,8 @@ exports[`Drawer > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -98,8 +98,8 @@ exports[`Drawer > renders with close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -133,8 +133,8 @@ exports[`Drawer > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -160,8 +160,8 @@ exports[`Drawer > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -195,8 +195,8 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>Content slot
 </div>
 
@@ -211,8 +211,8 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1"></h2><p id="reka-dialog-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -232,8 +232,8 @@ exports[`Drawer > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -260,8 +260,8 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><!--v-if--></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -287,8 +287,8 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -315,8 +315,8 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -343,8 +343,8 @@ exports[`Drawer > renders with direction left correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -371,8 +371,8 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -399,8 +399,8 @@ exports[`Drawer > renders with direction right correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -427,8 +427,8 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -455,8 +455,8 @@ exports[`Drawer > renders with direction top correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -483,8 +483,8 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -511,8 +511,8 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -532,8 +532,8 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">Header slot</div>
@@ -553,7 +553,7 @@ exports[`Drawer > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -580,8 +580,8 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -607,8 +607,8 @@ exports[`Drawer > renders without handle correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -636,7 +636,7 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
diff --git a/test/components/__snapshots__/Drawer.spec.ts.snap b/test/components/__snapshots__/Drawer.spec.ts.snap
index 0541beb68..17453247a 100644
--- a/test/components/__snapshots__/Drawer.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`Drawer > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -35,8 +35,8 @@ exports[`Drawer > renders with b24ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -56,8 +56,8 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -77,8 +77,8 @@ exports[`Drawer > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -98,8 +98,8 @@ exports[`Drawer > renders with close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -133,8 +133,8 @@ exports[`Drawer > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -160,8 +160,8 @@ exports[`Drawer > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -195,8 +195,8 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>Content slot
 </div>
 
@@ -211,8 +211,8 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1"></h2><p id="reka-dialog-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -232,8 +232,8 @@ exports[`Drawer > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -260,8 +260,8 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><!--v-if--></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -287,8 +287,8 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -315,8 +315,8 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -343,8 +343,8 @@ exports[`Drawer > renders with direction left correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -371,8 +371,8 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row-reverse rtl:flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -399,8 +399,8 @@ exports[`Drawer > renders with direction right correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -427,8 +427,8 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) flex-row rtl:flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -455,8 +455,8 @@ exports[`Drawer > renders with direction top correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -483,8 +483,8 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -511,8 +511,8 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -532,8 +532,8 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">Header slot</div>
@@ -553,7 +553,7 @@ exports[`Drawer > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -580,8 +580,8 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
@@ -607,8 +607,8 @@ exports[`Drawer > renders without handle correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
@@ -636,7 +636,7 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
diff --git a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
index 7b6d9908b..143af57a8 100644
--- a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" arrow="true" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" arrow="true" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -79,7 +79,7 @@ exports[`DropdownMenu > renders with b24ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -150,7 +150,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto min-w-96" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto min-w-96" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -221,7 +221,7 @@ exports[`DropdownMenu > renders with color ai correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -292,7 +292,7 @@ exports[`DropdownMenu > renders with color air-primary correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -363,7 +363,7 @@ exports[`DropdownMenu > renders with color air-primary-alert correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -434,7 +434,7 @@ exports[`DropdownMenu > renders with color air-primary-copilot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -505,7 +505,7 @@ exports[`DropdownMenu > renders with color air-primary-success correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -576,7 +576,7 @@ exports[`DropdownMenu > renders with color air-primary-warning correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -647,7 +647,7 @@ exports[`DropdownMenu > renders with color collab correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -718,7 +718,7 @@ exports[`DropdownMenu > renders with color danger correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -789,7 +789,7 @@ exports[`DropdownMenu > renders with color default correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -860,7 +860,7 @@ exports[`DropdownMenu > renders with color primary correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -931,7 +931,7 @@ exports[`DropdownMenu > renders with color secondary correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1002,7 +1002,7 @@ exports[`DropdownMenu > renders with color success correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1073,7 +1073,7 @@ exports[`DropdownMenu > renders with color warning correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1144,7 +1144,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1212,7 +1212,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-1" aria-labelledby="reka-dropdown-menu-trigger-v-0" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-1" aria-labelledby="reka-dropdown-menu-trigger-v-0" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-2" data-slot="group" class="grid">
@@ -1283,7 +1283,7 @@ exports[`DropdownMenu > renders with descriptionKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1313,7 +1313,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1384,7 +1384,7 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1455,7 +1455,7 @@ exports[`DropdownMenu > renders with filter and searchTerm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <div data-slot="root" class="isolate relative inline-flex items-center border-b border-default w-full">
       <!--v-if--><input type="text" placeholder="Search…" data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" role="searchbox" variant="none" value="No match value">
       <!--v-if-->
@@ -1480,7 +1480,7 @@ exports[`DropdownMenu > renders with filter correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <div data-slot="root" class="isolate relative inline-flex items-center border-b border-default w-full">
       <!--v-if--><input type="text" placeholder="Search…" data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" role="searchbox" variant="none" value="">
       <!--v-if-->
@@ -1555,7 +1555,7 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1594,7 +1594,7 @@ exports[`DropdownMenu > renders with item-description slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1624,7 +1624,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1695,7 +1695,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1756,7 +1756,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1898,7 +1898,7 @@ exports[`DropdownMenu > renders with items with description correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -1928,7 +1928,7 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
@@ -2159,7 +2159,7 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-1" data-slot="group" class="grid">
diff --git a/test/components/__snapshots__/DropdownMenu.spec.ts.snap b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
index b16241099..78b86eeab 100644
--- a/test/components/__snapshots__/DropdownMenu.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" arrow="true" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" arrow="true" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -79,7 +79,7 @@ exports[`DropdownMenu > renders with b24ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -150,7 +150,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto min-w-96" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto min-w-96" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -221,7 +221,7 @@ exports[`DropdownMenu > renders with color ai correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -292,7 +292,7 @@ exports[`DropdownMenu > renders with color air-primary correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -363,7 +363,7 @@ exports[`DropdownMenu > renders with color air-primary-alert correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -434,7 +434,7 @@ exports[`DropdownMenu > renders with color air-primary-copilot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -505,7 +505,7 @@ exports[`DropdownMenu > renders with color air-primary-success correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -576,7 +576,7 @@ exports[`DropdownMenu > renders with color air-primary-warning correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -647,7 +647,7 @@ exports[`DropdownMenu > renders with color collab correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -718,7 +718,7 @@ exports[`DropdownMenu > renders with color danger correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -789,7 +789,7 @@ exports[`DropdownMenu > renders with color default correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -860,7 +860,7 @@ exports[`DropdownMenu > renders with color primary correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -931,7 +931,7 @@ exports[`DropdownMenu > renders with color secondary correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1002,7 +1002,7 @@ exports[`DropdownMenu > renders with color success correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1073,7 +1073,7 @@ exports[`DropdownMenu > renders with color warning correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1144,7 +1144,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1212,7 +1212,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-1" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-0" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-1" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-0" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-2" data-slot="group" class="grid">
@@ -1283,7 +1283,7 @@ exports[`DropdownMenu > renders with descriptionKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1313,7 +1313,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1384,7 +1384,7 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1455,7 +1455,7 @@ exports[`DropdownMenu > renders with filter and searchTerm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <div data-slot="root" class="isolate relative inline-flex items-center border-b border-default w-full">
       <!--v-if--><input type="text" placeholder="Search…" data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" role="searchbox" variant="none" value="No match value">
       <!--v-if-->
@@ -1480,7 +1480,7 @@ exports[`DropdownMenu > renders with filter correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <div data-slot="root" class="isolate relative inline-flex items-center border-b border-default w-full">
       <!--v-if--><input type="text" placeholder="Search…" data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" role="searchbox" variant="none" value="">
       <!--v-if-->
@@ -1555,7 +1555,7 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1594,7 +1594,7 @@ exports[`DropdownMenu > renders with item-description slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1624,7 +1624,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1695,7 +1695,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1756,7 +1756,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1898,7 +1898,7 @@ exports[`DropdownMenu > renders with items with description correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -1928,7 +1928,7 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
@@ -2159,7 +2159,7 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center" dir="ltr">
     <!--v-if-->
     <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
       <div role="group" aria-labelledby="reka-menu-group-v-0-0-1" data-slot="group" class="grid">
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index ababebf98..8f911a81a 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -185,7 +185,7 @@ exports[`Header > renders with left slot correctly 1`] = `
 `;
 
 exports[`Header > renders with mode drawer correctly 1`] = `
-"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50" data-aria-hidden="true" aria-hidden="true">
   <div class="w-full max-w-(--b24ui-container-width) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
         <!--v-if-->
@@ -207,8 +207,8 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20 lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20 lg:hidden" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
   <!--v-if-->
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -220,7 +220,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 `;
 
 exports[`Header > renders with mode modal correctly 1`] = `
-"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50" data-aria-hidden="true" aria-hidden="true">
   <div class="w-full max-w-(--b24ui-container-width) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
         <!--v-if-->
@@ -243,7 +243,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20 lg:hidden"></div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20 lg:hidden" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none inset-0 fixed max-h-[calc(100dvh)] lg:hidden p-0 pt-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
   <div data-slot="header" class="px-4 sm:px-6 h-(--b24ui-header-height) shrink-0 flex items-center justify-between gap-3">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
@@ -269,7 +269,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 `;
 
 exports[`Header > renders with mode slideover correctly 1`] = `
-"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50" data-aria-hidden="true" aria-hidden="true">
   <div class="w-full max-w-(--b24ui-container-width) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
         <!--v-if-->
@@ -291,8 +291,8 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] lg:hidden" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
   <!--v-if-->
   <div data-slot="header" class="px-4 sm:px-6 h-(--b24ui-header-height) shrink-0 flex items-center justify-between gap-3">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
@@ -350,7 +350,7 @@ exports[`Header > renders with title correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
         </div>
-      </button><a href="/" aria-label="Documentation" data-slot="title" class="cursor-pointer focus-visible:outline-(--ui-color-design-outline-focused-stroke) focus-visible:outline-1 focus-visible:rounded-[4px] text-start underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline shrink-0 font-bold text-xl text-label flex items-end gap-1.5">Documentation</a></div>
+      </button><a href="/" aria-label="Documentation" data-slot="title" class="cursor-pointer focus-visible:outline-(--ui-color-design-outline-focused-stroke) focus-visible:outline-1 focus-visible:rounded-[4px] text-start outline-(--ui-color-accent-main-primary) hover:not-disabled:not-aria-disabled:underline underline-offset-2 shrink-0 font-bold text-xl text-label flex items-end gap-1.5">Documentation</a></div>
     <div data-slot="center" class="hidden lg:flex"></div>
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
       <!--v-if-->
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index d44df65c3..4aca11f30 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -185,7 +185,7 @@ exports[`Header > renders with left slot correctly 1`] = `
 `;
 
 exports[`Header > renders with mode drawer correctly 1`] = `
-"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50" data-aria-hidden="true" aria-hidden="true">
   <div class="w-full max-w-(--b24ui-container-width) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
         <!--v-if-->
@@ -207,7 +207,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20 lg:hidden"></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-[2px] bg-[#003366]/20 lg:hidden" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed base-mode bg-(--ui-color-bg-content-primary) flex focus:outline-none ring ring-(--ui-color-divider-default) mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-(--ui-color-divider-default) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
   <!--v-if-->
@@ -220,7 +220,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 `;
 
 exports[`Header > renders with mode modal correctly 1`] = `
-"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50" data-aria-hidden="true" aria-hidden="true">
   <div class="w-full max-w-(--b24ui-container-width) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
         <!--v-if-->
@@ -243,7 +243,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20 lg:hidden"></div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20 lg:hidden" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none inset-0 fixed max-h-[calc(100dvh)] lg:hidden p-0 pt-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
   <div data-slot="header" class="px-4 sm:px-6 h-(--b24ui-header-height) shrink-0 flex items-center justify-between gap-3">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
@@ -269,7 +269,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 `;
 
 exports[`Header > renders with mode slideover correctly 1`] = `
-"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50" data-aria-hidden="true" aria-hidden="true">
   <div class="w-full max-w-(--b24ui-container-width) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
         <!--v-if-->
@@ -291,8 +291,8 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] lg:hidden" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
   <!--v-if-->
   <div data-slot="header" class="px-4 sm:px-6 h-(--b24ui-header-height) shrink-0 flex items-center justify-between gap-3">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) lg:hidden -ms-1.5">
diff --git a/test/components/__snapshots__/Listbox-vue.spec.ts.snap b/test/components/__snapshots__/Listbox-vue.spec.ts.snap
index 0b04113e3..3c45270f7 100644
--- a/test/components/__snapshots__/Listbox-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Listbox-vue.spec.ts.snap
@@ -3,9 +3,9 @@
 exports[`Listbox > renders with b24ui correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default) p-2" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default) p-2" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -34,9 +34,9 @@ exports[`Listbox > renders with b24ui correctly 1`] = `
 exports[`Listbox > renders with by correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-6"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span>
@@ -65,9 +65,9 @@ exports[`Listbox > renders with by correctly 1`] = `
 exports[`Listbox > renders with class correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled max-h-64">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -96,9 +96,9 @@ exports[`Listbox > renders with class correctly 1`] = `
 exports[`Listbox > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-6"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span>
@@ -127,9 +127,9 @@ exports[`Listbox > renders with defaultValue correctly 1`] = `
 exports[`Listbox > renders with descriptionKey correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span><span data-slot="itemDescription" class="truncate -mt-[6px] text-description text-(length:--ui-font-size-sm)">France</span></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
@@ -181,13 +181,13 @@ exports[`Listbox > renders with disabled correctly 1`] = `
 exports[`Listbox > renders with filter and placeholder correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <div data-slot="root" class="isolate relative inline-flex items-center border-b border-(--ui-color-design-outline-stroke) has-focus-visible:border-(--b24ui-border-color)">
-    <!--v-if--><input type="text" placeholder="Filter..." data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" variant="none" value="">
+    <!--v-if--><input type="text" placeholder="Filter..." data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" variant="none" value="" aria-activedescendant="reka-listbox-item-v-1">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -216,13 +216,13 @@ exports[`Listbox > renders with filter and placeholder correctly 1`] = `
 exports[`Listbox > renders with filter correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <div data-slot="root" class="isolate relative inline-flex items-center border-b border-(--ui-color-design-outline-stroke) has-focus-visible:border-(--b24ui-border-color)">
-    <!--v-if--><input type="text" placeholder="Search…" data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" variant="none" value="">
+    <!--v-if--><input type="text" placeholder="Search…" data-slot="input" class="px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring-0 focus-visible:ring-0 style-transparent-bg md:text-(length:--ui-font-size-lg)/[normal]" autocomplete="off" aria-disabled="false" variant="none" value="" aria-activedescendant="reka-listbox-item-v-1">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -251,9 +251,9 @@ exports[`Listbox > renders with filter correctly 1`] = `
 exports[`Listbox > renders with highlight correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -282,9 +282,9 @@ exports[`Listbox > renders with highlight correctly 1`] = `
 exports[`Listbox > renders with id correctly 1`] = `
 "<div dir="ltr" id="id" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -313,9 +313,9 @@ exports[`Listbox > renders with id correctly 1`] = `
 exports[`Listbox > renders with item slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
@@ -328,9 +328,9 @@ exports[`Listbox > renders with item slot correctly 1`] = `
 exports[`Listbox > renders with item-description slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span><span data-slot="itemDescription" class="truncate -mt-[6px] text-description text-(length:--ui-font-size-sm)">Item description slot</span></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
@@ -351,9 +351,9 @@ exports[`Listbox > renders with item-description slot correctly 1`] = `
 exports[`Listbox > renders with item-label slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -382,9 +382,9 @@ exports[`Listbox > renders with item-label slot correctly 1`] = `
 exports[`Listbox > renders with item-leading slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
       </div>
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
@@ -405,9 +405,9 @@ exports[`Listbox > renders with item-leading slot correctly 1`] = `
 exports[`Listbox > renders with item-trailing slot correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
@@ -436,9 +436,9 @@ exports[`Listbox > renders with item-trailing slot correctly 1`] = `
 exports[`Listbox > renders with items correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -467,9 +467,9 @@ exports[`Listbox > renders with items correctly 1`] = `
 exports[`Listbox > renders with items with description correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span><span data-slot="itemDescription" class="truncate -mt-[6px] text-description text-(length:--ui-font-size-sm)">Description</span></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
       <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
@@ -490,9 +490,9 @@ exports[`Listbox > renders with items with description correctly 1`] = `
 exports[`Listbox > renders with labelKey correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">FR</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -569,9 +569,9 @@ exports[`Listbox > renders with loadingIcon correctly 1`] = `
 exports[`Listbox > renders with modelValue correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-6"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span>
@@ -600,9 +600,9 @@ exports[`Listbox > renders with modelValue correctly 1`] = `
 exports[`Listbox > renders with multiple and modelValue correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-6"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span>
@@ -631,9 +631,9 @@ exports[`Listbox > renders with multiple and modelValue correctly 1`] = `
 exports[`Listbox > renders with multiple correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -662,9 +662,9 @@ exports[`Listbox > renders with multiple correctly 1`] = `
 exports[`Listbox > renders with name correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -693,9 +693,9 @@ exports[`Listbox > renders with name correctly 1`] = `
 exports[`Listbox > renders with required correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -724,9 +724,9 @@ exports[`Listbox > renders with required correctly 1`] = `
 exports[`Listbox > renders with selectedIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -755,9 +755,9 @@ exports[`Listbox > renders with selectedIcon correctly 1`] = `
 exports[`Listbox > renders with size lg correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-2 text-4 gap-2" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-7">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-2 text-4 gap-2" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-7">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -786,9 +786,9 @@ exports[`Listbox > renders with size lg correctly 1`] = `
 exports[`Listbox > renders with size md correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -817,9 +817,9 @@ exports[`Listbox > renders with size md correctly 1`] = `
 exports[`Listbox > renders with size sm correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-1.5 text-[14px] gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-5">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-1.5 text-[14px] gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-5">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -848,9 +848,9 @@ exports[`Listbox > renders with size sm correctly 1`] = `
 exports[`Listbox > renders with size xl correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-2 text-6 gap-2" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-7">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-2 text-6 gap-2" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-7">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -879,9 +879,9 @@ exports[`Listbox > renders with size xl correctly 1`] = `
 exports[`Listbox > renders with size xs correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-1 text-[12px] gap-1" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-4 mt-0.5">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-1 text-[12px] gap-1" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-4 mt-0.5">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -910,9 +910,9 @@ exports[`Listbox > renders with size xs correctly 1`] = `
 exports[`Listbox > renders with size xss correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-1 text-[10px] gap-1" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-3 mt-0.5">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors p-1 text-[10px] gap-1" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-3 mt-0.5">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
@@ -941,9 +941,9 @@ exports[`Listbox > renders with size xss correctly 1`] = `
 exports[`Listbox > renders with valueKey correctly 1`] = `
 "<div dir="ltr" data-slot="root" dd-gg="1" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-(--ui-color-design-outline-stroke) rounded-lg overflow-hidden outline-(--b24ui-border-color) has-focus-visible:outline-3 has-focus-visible:ring-(--b24ui-border-color) style-filled">
   <!--v-if-->
-  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-(--ui-color-divider-default)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="isolate">
-      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-0 data-disabled:cursor-not-allowed data-disabled:opacity-75 data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-data-disabled:before:bg-(--ui-color-base-black-fixed) transition-colors before:transition-colors px-4.5 py-1.5 text-4 gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-base-5) size-6">
           <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
         </svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
         <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--ui-color-accent-main-primary) size-6"><path fill="currentColor" fill-rule="evenodd" d="M20.196 6.432a.7.7 0 0 1-.002.99L9.878 17.695a.7.7 0 0 1-.988 0L4.206 13.03a.7.7 0 0 1 .988-.992l4.19 4.172 9.822-9.781a.7.7 0 0 1 .99.002" clip-rule="evenodd"></path></svg></span>
diff --git a/test/components/__snapshots__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index 1b17a4c2c..daf36c8ed 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -1,5 +1,30 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Modal > renders with actions slot and without close correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+  <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
+    <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
+      <!--v-if-->Actions slot
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+
+
+
+
+<!--teleport end-->"
+`;
+
 exports[`Modal > renders with actions slot correctly 1`] = `
 "<!--v-if-->
 <!--teleport start-->
@@ -7,8 +32,8 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if-->Actions slot<button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -39,8 +64,8 @@ exports[`Modal > renders with b24ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px] end-2">
@@ -71,8 +96,8 @@ exports[`Modal > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -103,8 +128,8 @@ exports[`Modal > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] bg-base-100" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] bg-base-100" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -135,8 +160,8 @@ exports[`Modal > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if-->Close slot
@@ -159,8 +184,8 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -191,8 +216,8 @@ exports[`Modal > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>Content slot</div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>Content slot</div>
 
 
 
@@ -207,8 +232,8 @@ exports[`Modal > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1"></h2><p id="reka-dialog-description-v-2"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1"></h2><p id="reka-dialog-description-v-2"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -239,8 +264,8 @@ exports[`Modal > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -275,8 +300,8 @@ exports[`Modal > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><!--v-if--></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><!--v-if--></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <div data-slot="wrapper" class="min-h-full flex-1 flex flex-col items-start justify-center gap-0">
@@ -310,8 +335,8 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -342,8 +367,8 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 fixed max-h-[calc(100dvh)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 fixed max-h-[calc(100dvh)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -378,8 +403,8 @@ exports[`Modal > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">Header slot</div>
     <!--v-if-->
@@ -400,7 +425,7 @@ exports[`Modal > renders with open correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -432,7 +457,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20 overflow-y-auto">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
     <!--v-if-->
     <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0">
       <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -467,7 +492,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
     <!--v-if-->
     <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0">
       <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -502,7 +527,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20 overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
     <!--v-if-->
     <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0">
       <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -537,8 +562,8 @@ exports[`Modal > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <div data-slot="wrapper" class="min-h-full flex-1 flex flex-col items-start justify-center gap-0">
@@ -572,8 +597,8 @@ exports[`Modal > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <div data-slot="wrapper" class="min-h-full flex-1 flex flex-col items-start justify-center gap-0">
@@ -607,8 +632,8 @@ exports[`Modal > renders without close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -637,7 +662,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -672,8 +697,8 @@ exports[`Modal > renders without transition correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index 294d773a4..559d678a7 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -1,5 +1,30 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Modal > renders with actions slot and without close correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+  <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
+    <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
+      <!--v-if-->Actions slot
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+
+
+
+
+<!--teleport end-->"
+`;
+
 exports[`Modal > renders with actions slot correctly 1`] = `
 "<!--v-if-->
 <!--teleport start-->
@@ -7,8 +32,8 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if-->Actions slot<button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -39,8 +64,8 @@ exports[`Modal > renders with b24ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px] end-2">
@@ -71,8 +96,8 @@ exports[`Modal > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -103,8 +128,8 @@ exports[`Modal > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] bg-base-100" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] bg-base-100" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -135,8 +160,8 @@ exports[`Modal > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if-->Close slot
@@ -159,8 +184,8 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -191,8 +216,8 @@ exports[`Modal > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>Content slot</div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>Content slot</div>
 
 
 
@@ -207,8 +232,8 @@ exports[`Modal > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1"></h2><p id="reka-dialog-description-v-0-0-2"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1"></h2><p id="reka-dialog-description-v-0-0-2"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -239,8 +264,8 @@ exports[`Modal > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -275,8 +300,8 @@ exports[`Modal > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><!--v-if--></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><!--v-if--></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <div data-slot="wrapper" class="min-h-full flex-1 flex flex-col items-start justify-center gap-0">
@@ -310,8 +335,8 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-plain-no-accent ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) [--ui-btn-height:24px]">
@@ -342,8 +367,8 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 fixed max-h-[calc(100dvh)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 fixed max-h-[calc(100dvh)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -378,8 +403,8 @@ exports[`Modal > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">Header slot</div>
     <!--v-if-->
@@ -400,7 +425,7 @@ exports[`Modal > renders with open correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -432,7 +457,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20 overflow-y-auto">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
     <!--v-if-->
     <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0">
       <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -467,7 +492,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
     <!--v-if-->
     <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0">
       <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -502,7 +527,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20 overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
     <!--v-if-->
     <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0">
       <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -537,8 +562,8 @@ exports[`Modal > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <div data-slot="wrapper" class="min-h-full flex-1 flex flex-col items-start justify-center gap-0">
@@ -572,8 +597,8 @@ exports[`Modal > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
       <div data-slot="wrapper" class="min-h-full flex-1 flex flex-col items-start justify-center gap-0">
@@ -607,8 +632,8 @@ exports[`Modal > renders without close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -637,7 +662,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
@@ -672,8 +697,8 @@ exports[`Modal > renders without transition correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div data-slot="contentWrapper" class="flex-1 flex flex-col gap-0 overflow-hidden">
     <div data-slot="header" class="px-4 py-4 sm:px-6 flex items-stretch justify-between gap-1.5 min-h-(--b24ui-header-height)">
diff --git a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
index cd4bf196d..f1501269b 100644
--- a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
@@ -42,7 +42,7 @@ exports[`RadioGroup > renders with air-primary-primary variant list correctly 1`
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full">
@@ -51,7 +51,7 @@ exports[`RadioGroup > renders with air-primary-primary variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -62,7 +62,7 @@ exports[`RadioGroup > renders with air-primary-primary variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -156,7 +156,7 @@ exports[`RadioGroup > renders with air-primary-success variant list correctly 1`
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full">
@@ -165,7 +165,7 @@ exports[`RadioGroup > renders with air-primary-success variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -176,7 +176,7 @@ exports[`RadioGroup > renders with air-primary-success variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -693,7 +693,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-row gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full">
@@ -702,7 +702,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -713,7 +713,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index c5142a484..c5161001f 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -42,7 +42,7 @@ exports[`RadioGroup > renders with air-primary-primary variant list correctly 1`
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full">
@@ -51,7 +51,7 @@ exports[`RadioGroup > renders with air-primary-primary variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -62,7 +62,7 @@ exports[`RadioGroup > renders with air-primary-primary variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -156,7 +156,7 @@ exports[`RadioGroup > renders with air-primary-success variant list correctly 1`
   <fieldset data-slot="fieldset" class="flex flex-col gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full">
@@ -165,7 +165,7 @@ exports[`RadioGroup > renders with air-primary-success variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -176,7 +176,7 @@ exports[`RadioGroup > renders with air-primary-success variant list correctly 1`
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
@@ -693,7 +693,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-row gap-x-[16px] gap-y-2">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background) after:size-[6px]"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full">
@@ -702,7 +702,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
@@ -713,7 +713,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-(length:--ui-font-size-lg)">
-      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-[16px]"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background) me-2 size-[16px]" value="3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
diff --git a/test/components/__snapshots__/Select-vue.spec.ts.snap b/test/components/__snapshots__/Select-vue.spec.ts.snap
index dd693973a..35052970e 100644
--- a/test/components/__snapshots__/Select-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Select-vue.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Select > renders with ariaLabel correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -41,13 +41,13 @@ exports[`Select > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Select > renders with arrow correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -125,13 +125,13 @@ exports[`Select > renders with avatar correctly 1`] = `
 `;
 
 exports[`Select > renders with b24ui correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid p-2">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -165,13 +165,13 @@ exports[`Select > renders with b24ui correctly 1`] = `
 `;
 
 exports[`Select > renders with class correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal] rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal] rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -205,13 +205,13 @@ exports[`Select > renders with class correctly 1`] = `
 `;
 
 exports[`Select > renders with defaultValue correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="true" data-state="checked" tabindex="-1">
@@ -245,13 +245,13 @@ exports[`Select > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Select > renders with descriptionKey correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -280,13 +280,13 @@ exports[`Select > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`Select > renders with disabled correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -320,13 +320,13 @@ exports[`Select > renders with disabled correctly 1`] = `
 `;
 
 exports[`Select > renders with highlight air-primary-success correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled-success rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled-success rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -360,13 +360,13 @@ exports[`Select > renders with highlight air-primary-success correctly 1`] = `
 `;
 
 exports[`Select > renders with highlight correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -410,13 +410,13 @@ exports[`Select > renders with icon correctly 1`] = `
 `;
 
 exports[`Select > renders with id correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button id="id" data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button id="id" data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -450,13 +450,13 @@ exports[`Select > renders with id correctly 1`] = `
 `;
 
 exports[`Select > renders with item slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
@@ -475,13 +475,13 @@ exports[`Select > renders with item slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-description slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -510,13 +510,13 @@ exports[`Select > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-label slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -550,13 +550,13 @@ exports[`Select > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-leading slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
@@ -585,13 +585,13 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-trailing slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -625,7 +625,7 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`Select > renders with items correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
@@ -665,13 +665,13 @@ exports[`Select > renders with items correctly 1`] = `
 `;
 
 exports[`Select > renders with items with description correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -700,13 +700,13 @@ exports[`Select > renders with items with description correctly 1`] = `
 `;
 
 exports[`Select > renders with labelKey correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -750,12 +750,12 @@ exports[`Select > renders with leading and icon correctly 1`] = `
 `;
 
 exports[`Select > renders with leading slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) ps-[32px] pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) ps-[32px] pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if--><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2">Leading slot</span><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -860,13 +860,13 @@ exports[`Select > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with modelValue correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="true" data-state="checked" tabindex="-1">
@@ -900,13 +900,13 @@ exports[`Select > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple and modelValue correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="value" class="truncate pointer-events-none">Backlog, Todo</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -940,13 +940,13 @@ exports[`Select > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -980,13 +980,13 @@ exports[`Select > renders with multiple correctly 1`] = `
 `;
 
 exports[`Select > renders with name correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1020,13 +1020,13 @@ exports[`Select > renders with name correctly 1`] = `
 `;
 
 exports[`Select > renders with placeholder correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">Search...</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1060,13 +1060,13 @@ exports[`Select > renders with placeholder correctly 1`] = `
 `;
 
 exports[`Select > renders with required correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1100,13 +1100,13 @@ exports[`Select > renders with required correctly 1`] = `
 `;
 
 exports[`Select > renders with selectedIcon correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1140,13 +1140,13 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with size lg correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1180,13 +1180,13 @@ exports[`Select > renders with size lg correctly 1`] = `
 `;
 
 exports[`Select > renders with size md correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1220,13 +1220,13 @@ exports[`Select > renders with size md correctly 1`] = `
 `;
 
 exports[`Select > renders with size sm correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[28px] md:text-(length:--ui-font-size-sm)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[28px] md:text-(length:--ui-font-size-sm)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-1.5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[16px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1260,13 +1260,13 @@ exports[`Select > renders with size sm correctly 1`] = `
 `;
 
 exports[`Select > renders with size xl correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1300,13 +1300,13 @@ exports[`Select > renders with size xl correctly 1`] = `
 `;
 
 exports[`Select > renders with size xs correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[22px] md:text-(length:--ui-font-size-xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[22px] md:text-(length:--ui-font-size-xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[14px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1340,13 +1340,13 @@ exports[`Select > renders with size xs correctly 1`] = `
 `;
 
 exports[`Select > renders with size xss correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[20px] md:text-(length:--ui-font-size-4xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[20px] md:text-(length:--ui-font-size-4xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[12px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1380,13 +1380,13 @@ exports[`Select > renders with size xss correctly 1`] = `
 `;
 
 exports[`Select > renders with trailing slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2">Trailing slot</span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1431,13 +1431,13 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with trailingIcon correctly 2`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M10.084 3.22a.384.384 0 0 0-.723 0L7.737 7.764a.38.38 0 0 1-.233.232l-4.547 1.62a.384.384 0 0 0 0 .722l4.545 1.624a.38.38 0 0 1 .232.233l1.62 4.547c.12.34.6.34.722 0l1.624-4.545a.38.38 0 0 1 .233-.232l4.547-1.62a.384.384 0 0 0 0-.722L11.936 8a.38.38 0 0 1-.232-.233zm7.966 10.224a.222.222 0 0 0-.419 0l-.94 2.63a.22.22 0 0 1-.134.134l-2.631.937a.222.222 0 0 0 0 .418l2.63.94a.22.22 0 0 1 .134.135l.937 2.631c.07.197.348.197.418 0l.94-2.63a.22.22 0 0 1 .135-.134l2.631-.937a.222.222 0 0 0 0-.418l-2.63-.94a.22.22 0 0 1-.134-.135z" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1471,13 +1471,13 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`Select > renders with valueKey correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="true" data-state="checked" tabindex="-1">
diff --git a/test/components/__snapshots__/Select.spec.ts.snap b/test/components/__snapshots__/Select.spec.ts.snap
index 34972e3ec..f35db5af7 100644
--- a/test/components/__snapshots__/Select.spec.ts.snap
+++ b/test/components/__snapshots__/Select.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Select > renders with ariaLabel correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -41,13 +41,13 @@ exports[`Select > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Select > renders with arrow correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -125,13 +125,13 @@ exports[`Select > renders with avatar correctly 1`] = `
 `;
 
 exports[`Select > renders with b24ui correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid p-2">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -165,13 +165,13 @@ exports[`Select > renders with b24ui correctly 1`] = `
 `;
 
 exports[`Select > renders with class correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal] rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal] rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -205,13 +205,13 @@ exports[`Select > renders with class correctly 1`] = `
 `;
 
 exports[`Select > renders with defaultValue correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="true" data-state="checked" tabindex="-1">
@@ -245,13 +245,13 @@ exports[`Select > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Select > renders with descriptionKey correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -280,13 +280,13 @@ exports[`Select > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`Select > renders with disabled correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -320,13 +320,13 @@ exports[`Select > renders with disabled correctly 1`] = `
 `;
 
 exports[`Select > renders with highlight air-primary-success correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled-success rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled-success rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -360,13 +360,13 @@ exports[`Select > renders with highlight air-primary-success correctly 1`] = `
 `;
 
 exports[`Select > renders with highlight correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -410,13 +410,13 @@ exports[`Select > renders with icon correctly 1`] = `
 `;
 
 exports[`Select > renders with id correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button id="id" data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button id="id" data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -450,13 +450,13 @@ exports[`Select > renders with id correctly 1`] = `
 `;
 
 exports[`Select > renders with item slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
@@ -475,13 +475,13 @@ exports[`Select > renders with item slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-description slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -510,13 +510,13 @@ exports[`Select > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-label slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -550,13 +550,13 @@ exports[`Select > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-leading slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
@@ -585,13 +585,13 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-trailing slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -625,7 +625,7 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`Select > renders with items correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
@@ -665,13 +665,13 @@ exports[`Select > renders with items correctly 1`] = `
 `;
 
 exports[`Select > renders with items with description correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -700,13 +700,13 @@ exports[`Select > renders with items with description correctly 1`] = `
 `;
 
 exports[`Select > renders with labelKey correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -750,12 +750,12 @@ exports[`Select > renders with leading and icon correctly 1`] = `
 `;
 
 exports[`Select > renders with leading slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) ps-[32px] pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) ps-[32px] pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if--><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center px-2">Leading slot</span><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -860,13 +860,13 @@ exports[`Select > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with modelValue correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="true" data-state="checked" tabindex="-1">
@@ -900,13 +900,13 @@ exports[`Select > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple and modelValue correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="value" class="truncate pointer-events-none">Backlog, Todo</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -940,13 +940,13 @@ exports[`Select > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -980,13 +980,13 @@ exports[`Select > renders with multiple correctly 1`] = `
 `;
 
 exports[`Select > renders with name correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1020,13 +1020,13 @@ exports[`Select > renders with name correctly 1`] = `
 `;
 
 exports[`Select > renders with placeholder correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">Search...</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1060,13 +1060,13 @@ exports[`Select > renders with placeholder correctly 1`] = `
 `;
 
 exports[`Select > renders with required correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1100,13 +1100,13 @@ exports[`Select > renders with required correctly 1`] = `
 `;
 
 exports[`Select > renders with selectedIcon correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1140,13 +1140,13 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with size lg correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1180,13 +1180,13 @@ exports[`Select > renders with size lg correctly 1`] = `
 `;
 
 exports[`Select > renders with size md correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1220,13 +1220,13 @@ exports[`Select > renders with size md correctly 1`] = `
 `;
 
 exports[`Select > renders with size sm correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[28px] md:text-(length:--ui-font-size-sm)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[28px] md:text-(length:--ui-font-size-sm)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-1.5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[16px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1260,13 +1260,13 @@ exports[`Select > renders with size sm correctly 1`] = `
 `;
 
 exports[`Select > renders with size xl correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[38px]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[22px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1300,13 +1300,13 @@ exports[`Select > renders with size xl correctly 1`] = `
 `;
 
 exports[`Select > renders with size xs correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[22px] md:text-(length:--ui-font-size-xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[22px] md:text-(length:--ui-font-size-xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[14px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1340,13 +1340,13 @@ exports[`Select > renders with size xs correctly 1`] = `
 `;
 
 exports[`Select > renders with size xss correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[20px] md:text-(length:--ui-font-size-4xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[20px] md:text-(length:--ui-font-size-4xs)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-[12px]"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1380,13 +1380,13 @@ exports[`Select > renders with size xss correctly 1`] = `
 `;
 
 exports[`Select > renders with trailing slot correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2">Trailing slot</span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1431,13 +1431,13 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with trailingIcon correctly 2`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-placeholder="" data-slot="placeholder" class="truncate text-(--ui-color-design-plain-na-content-secondary)">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M10.084 3.22a.384.384 0 0 0-.723 0L7.737 7.764a.38.38 0 0 1-.233.232l-4.547 1.62a.384.384 0 0 0 0 .722l4.545 1.624a.38.38 0 0 1 .232.233l1.62 4.547c.12.34.6.34.722 0l1.624-4.545a.38.38 0 0 1 .233-.232l4.547-1.62a.384.384 0 0 0 0-.722L11.936 8a.38.38 0 0 1-.232-.233zm7.966 10.224a.222.222 0 0 0-.419 0l-.94 2.63a.22.22 0 0 1-.134.134l-2.631.937a.222.222 0 0 0 0 .418l2.63.94a.22.22 0 0 1 .134.135l.937 2.631c.07.197.348.197.418 0l.94-2.63a.22.22 0 0 1 .135-.134l2.631-.937a.222.222 0 0 0 0-.418l-2.63-.94a.22.22 0 0 1-.134-.135z" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">
@@ -1471,13 +1471,13 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`Select > renders with valueKey correctly 1`] = `
-"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+"<div data-slot="root" class="isolate relative inline-flex items-center"><button data-slot="base" class="relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] style-filled rounded-(--ui-border-radius-sm) ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color) pe-[34px] md:text-(length:--ui-font-size-lg)/[normal]" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-aria-hidden="true" aria-hidden="true">
     <!--v-if-->
     <!--v-if--><span style="pointer-events: none;" data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center px-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 text-(--b24ui-icon-color) size-4.5"><path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path></svg></span>
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
+    <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] origin-(--reka-select-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" position="popper" bodylock="true" disableoutsidepointerevents="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" data-side="bottom" data-align="start" dir="ltr">
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
         <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="grid">
           <div data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="true" data-state="checked" tabindex="-1">
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index ac6532bf9..2e5b698ac 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -2225,14 +2225,14 @@ exports[`SelectMenu > renders without searchInput correctly 1`] = `
   </button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="0" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-combobox-content-available-height,100vh))] origin-(--reka-combobox-content-transform-origin) motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto flex flex-col max-h-[min(var(--max-height-popup-list),var(--reka-combobox-content-available-height,100vh))] origin-(--reka-combobox-content-transform-origin) motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0 flex-1">
         <!--v-if-->
         <!--v-if-->
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 w-60 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
           <!--v-if-->
           <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="grid">
-            <div id="reka-combobox-item-v-3" data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">
+            <div id="reka-combobox-item-v-3" data-slot="item" class="group w-full min-w-[195px] h-[36px] px-4.5 mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--ui-font-size-md) hover:text-label data-highlighted:not-data-disabled:text-label data-[state=checked]:text-label hover:bg-(--ui-color-base-black-fixed)/3 dark:hover:bg-(--ui-color-base-black-fixed) active:bg-(--ui-color-base-black-fixed)/6 dark:active:bg-(--ui-color-base-black-fixed) data-highlighted:not-active:bg-(--ui-color-base-black-fixed)/3 dark:data-highlighted:not-active:bg-(--ui-color-base-black-fixed) data-[state=open]:bg-(--ui-color-base-black-fixed)/6 dark:data-[state=open]:bg-(--ui-color-base-black-fixed) transition-colors style-filled-copilot text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)" data-reka-collection-item="" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted="">
               <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
               <!--v-if--></span><span data-slot="itemTrailing" class="ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="size-[25px] shrink-0 text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>
             </div>
diff --git a/test/components/__snapshots__/Slideover-vue.spec.ts.snap b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
index ca87dfa9d..ac7a015a7 100644
--- a/test/components/__snapshots__/Slideover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -16,7 +16,10 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
       <!--v-if-->
     </div>
   </button>
-  <!--v-if-->
+  <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
+    <!--v-if-->Actions slot
+    <!--v-if-->
+  </div>
   <!--v-if-->
   <!--v-if-->
 </div>
@@ -32,8 +35,8 @@ exports[`Slideover > renders with b24ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full end-2">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full end-2">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -58,8 +61,8 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -84,8 +87,8 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -117,8 +120,8 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] end-4 bottom-4 motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] end-4 bottom-4 motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -150,8 +153,8 @@ exports[`Slideover > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)] bg-red-500" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)] bg-red-500" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -176,8 +179,8 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>Close slot
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>Close slot
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -194,8 +197,8 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -220,8 +223,8 @@ exports[`Slideover > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -242,8 +245,8 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1"></h2><p id="reka-dialog-description-v-2"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1"></h2><p id="reka-dialog-description-v-2"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -268,8 +271,8 @@ exports[`Slideover > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -301,8 +304,8 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><!--v-if--></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><!--v-if--></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -333,8 +336,8 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -359,8 +362,8 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -385,8 +388,8 @@ exports[`Slideover > renders with left side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pr-1.5 pl-[4px] top-[17px] translate-x-full right-0 rounded-r-full [&amp;>div]:flex-row-reverse">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -418,8 +421,8 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 left-4 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 left-4 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="px-5 flex items-center gap-x-3 gap-y-1.5 py-1 min-h-(--b24ui-header-height)">
@@ -451,7 +454,7 @@ exports[`Slideover > renders with open correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -477,8 +480,8 @@ exports[`Slideover > renders with right side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 right-0 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 right-0 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -510,8 +513,8 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 right-4 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 right-4 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="px-5 flex items-center gap-x-3 gap-y-1.5 py-1 min-h-(--b24ui-header-height)">
@@ -543,8 +546,8 @@ exports[`Slideover > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -575,8 +578,8 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -607,8 +610,8 @@ exports[`Slideover > renders with top side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full inset-x-0 top-0 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full inset-x-0 top-0 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -640,8 +643,8 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] inset-x-4 top-4 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] inset-x-4 top-4 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -673,8 +676,8 @@ exports[`Slideover > renders without close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -700,7 +703,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -732,8 +735,8 @@ exports[`Slideover > renders without transition correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
diff --git a/test/components/__snapshots__/Slideover.spec.ts.snap b/test/components/__snapshots__/Slideover.spec.ts.snap
index 01b8aaed4..7b7f49df7 100644
--- a/test/components/__snapshots__/Slideover.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -16,7 +16,10 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
       <!--v-if-->
     </div>
   </button>
-  <!--v-if-->
+  <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
+    <!--v-if-->Actions slot
+    <!--v-if-->
+  </div>
   <!--v-if-->
   <!--v-if-->
 </div>
@@ -32,8 +35,8 @@ exports[`Slideover > renders with b24ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full end-2">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full end-2">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -58,8 +61,8 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -84,8 +87,8 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -117,8 +120,8 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] end-4 bottom-4 motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] end-4 bottom-4 motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -150,8 +153,8 @@ exports[`Slideover > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)] bg-red-500" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)] bg-red-500" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -176,8 +179,8 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>Close slot
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>Close slot
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -194,8 +197,8 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -220,8 +223,8 @@ exports[`Slideover > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -242,8 +245,8 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1"></h2><p id="reka-dialog-description-v-0-0-2"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1"></h2><p id="reka-dialog-description-v-0-0-2"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -268,8 +271,8 @@ exports[`Slideover > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -301,8 +304,8 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><!--v-if--></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><!--v-if--></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -333,8 +336,8 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -359,8 +362,8 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -385,8 +388,8 @@ exports[`Slideover > renders with left side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 left-0 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pr-1.5 pl-[4px] top-[17px] translate-x-full right-0 rounded-r-full [&amp;>div]:flex-row-reverse">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -418,8 +421,8 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 left-4 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="left" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 left-4 motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="px-5 flex items-center gap-x-3 gap-y-1.5 py-1 min-h-(--b24ui-header-height)">
@@ -451,7 +454,7 @@ exports[`Slideover > renders with open correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -477,8 +480,8 @@ exports[`Slideover > renders with right side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 right-0 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full w-[calc(100%-60px)] sm:w-[calc(100%-150px)] inset-y-0 right-0 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -510,8 +513,8 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 right-4 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 right-4 motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="px-5 flex items-center gap-x-3 gap-y-1.5 py-1 min-h-(--b24ui-header-height)">
@@ -543,8 +546,8 @@ exports[`Slideover > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -575,8 +578,8 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
         <path fill="currentColor" d="M8.46 7.54a.65.65 0 0 0-.92.92L11.08 12l-3.54 3.54a.65.65 0 1 0 .92.92L12 12.918l3.54 3.54a.65.65 0 1 0 .919-.92L12.919 12l3.54-3.54a.65.65 0 0 0-.92-.919L12 11.08z"></path>
@@ -607,8 +610,8 @@ exports[`Slideover > renders with top side correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full inset-x-0 top-0 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full inset-x-0 top-0 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -640,8 +643,8 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] inset-x-4 top-4 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="top" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full rounded-[18px] max-h-[calc(100%-2rem)] inset-x-4 top-4 motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -673,8 +676,8 @@ exports[`Slideover > renders without close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e] motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="header" class="py-5 px-5 flex items-center gap-x-3 gap-y-1.5">
@@ -700,7 +703,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px] motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
@@ -732,8 +735,8 @@ exports[`Slideover > renders without transition correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e]" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="bottom" data-slot="content" class="base-mode fixed bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed) sm:shadow-lg flex flex-col focus:outline-none h-full max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-4.5 bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:rounded-t-[18px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled ui-btn-lg rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height) group absolute pl-1.5 pr-[4px] top-[17px] -translate-x-full left-0 rounded-l-full">
     <!--v-if-->
     <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-1 pe-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
diff --git a/test/components/__snapshots__/Switch-vue.spec.ts.snap b/test/components/__snapshots__/Switch-vue.spec.ts.snap
index 9b2c10e6e..a787a92b1 100644
--- a/test/components/__snapshots__/Switch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Switch-vue.spec.ts.snap
@@ -65,7 +65,7 @@ exports[`Switch > renders with defaultValue correctly 1`] = `
 
 exports[`Switch > renders with description correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Label</label>
@@ -76,7 +76,7 @@ exports[`Switch > renders with description correctly 1`] = `
 
 exports[`Switch > renders with description slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Description slot"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Description slot</label>
@@ -123,7 +123,7 @@ exports[`Switch > renders with id correctly 1`] = `
 
 exports[`Switch > renders with label correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Label</label>
@@ -134,7 +134,7 @@ exports[`Switch > renders with label correctly 1`] = `
 
 exports[`Switch > renders with label slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label slot"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Label slot</label>
@@ -181,7 +181,7 @@ exports[`Switch > renders with name correctly 1`] = `
 
 exports[`Switch > renders with required correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0" data-slot="label" class="cursor-pointer block text-label leading-[20px] after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)">Label</label>
diff --git a/test/components/__snapshots__/Switch.spec.ts.snap b/test/components/__snapshots__/Switch.spec.ts.snap
index 57cd8047f..cd4d96954 100644
--- a/test/components/__snapshots__/Switch.spec.ts.snap
+++ b/test/components/__snapshots__/Switch.spec.ts.snap
@@ -65,7 +65,7 @@ exports[`Switch > renders with defaultValue correctly 1`] = `
 
 exports[`Switch > renders with description correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Label</label>
@@ -76,7 +76,7 @@ exports[`Switch > renders with description correctly 1`] = `
 
 exports[`Switch > renders with description slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Description slot"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Description slot</label>
@@ -123,7 +123,7 @@ exports[`Switch > renders with id correctly 1`] = `
 
 exports[`Switch > renders with label correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Label</label>
@@ -134,7 +134,7 @@ exports[`Switch > renders with label correctly 1`] = `
 
 exports[`Switch > renders with label slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label slot"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0-0" data-slot="label" class="cursor-pointer block text-label leading-[20px]">Label slot</label>
@@ -181,7 +181,7 @@ exports[`Switch > renders with name correctly 1`] = `
 
 exports[`Switch > renders with required correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
+  <div data-slot="container" class="flex items-center h-[20px]"><button id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" data-slot="base" class="cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color) style-filled w-[36px]" value="on" aria-label="Label"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
     <!--v-if-->
   </div>
   <div data-slot="wrapper" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2 text-(length:--ui-font-size-md)"><label for="v-0-0" data-slot="label" class="cursor-pointer block text-label leading-[20px] after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)">Label</label>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index 931014a9d..85638737f 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -491,7 +491,7 @@ exports[`Table > renders with columns correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -525,8 +525,8 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -536,14 +536,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -585,8 +585,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -596,14 +596,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -645,8 +645,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -656,14 +656,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -705,8 +705,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -716,14 +716,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -765,8 +765,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -776,14 +776,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -826,7 +826,7 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
@@ -1872,7 +1872,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-heading-class" style="background-color: black;">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -1906,8 +1906,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -1917,14 +1917,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -1936,7 +1936,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-11" aria-labelledby="reka-dropdown-menu-trigger-v-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-11" aria-labelledby="reka-dropdown-menu-trigger-v-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-12" data-slot="group" class="grid">
@@ -1966,8 +1966,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -1977,14 +1977,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -1996,7 +1996,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-13" aria-labelledby="reka-dropdown-menu-trigger-v-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-13" aria-labelledby="reka-dropdown-menu-trigger-v-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-14" data-slot="group" class="grid">
@@ -2026,8 +2026,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2037,14 +2037,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2056,7 +2056,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-15" aria-labelledby="reka-dropdown-menu-trigger-v-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-15" aria-labelledby="reka-dropdown-menu-trigger-v-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-16" data-slot="group" class="grid">
@@ -2086,8 +2086,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2097,14 +2097,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2116,7 +2116,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-17" aria-labelledby="reka-dropdown-menu-trigger-v-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-17" aria-labelledby="reka-dropdown-menu-trigger-v-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-18" data-slot="group" class="grid">
@@ -2146,8 +2146,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2157,14 +2157,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2176,7 +2176,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-19" aria-labelledby="reka-dropdown-menu-trigger-v-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-19" aria-labelledby="reka-dropdown-menu-trigger-v-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-20" data-slot="group" class="grid">
@@ -2207,7 +2207,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-heading-class" style="background-color: black;">
@@ -2361,7 +2361,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -2395,8 +2395,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2406,14 +2406,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2425,7 +2425,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-11" aria-labelledby="reka-dropdown-menu-trigger-v-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-11" aria-labelledby="reka-dropdown-menu-trigger-v-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-12" data-slot="group" class="grid">
@@ -2455,8 +2455,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2466,14 +2466,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2485,7 +2485,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-13" aria-labelledby="reka-dropdown-menu-trigger-v-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-13" aria-labelledby="reka-dropdown-menu-trigger-v-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-14" data-slot="group" class="grid">
@@ -2515,8 +2515,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2526,14 +2526,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2545,7 +2545,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-15" aria-labelledby="reka-dropdown-menu-trigger-v-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-15" aria-labelledby="reka-dropdown-menu-trigger-v-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-16" data-slot="group" class="grid">
@@ -2575,8 +2575,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2586,14 +2586,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2605,7 +2605,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-17" aria-labelledby="reka-dropdown-menu-trigger-v-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-17" aria-labelledby="reka-dropdown-menu-trigger-v-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-18" data-slot="group" class="grid">
@@ -2635,8 +2635,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2646,14 +2646,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2665,7 +2665,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-19" aria-labelledby="reka-dropdown-menu-trigger-v-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-19" aria-labelledby="reka-dropdown-menu-trigger-v-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-20" data-slot="group" class="grid">
@@ -2696,7 +2696,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
@@ -2728,7 +2728,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -2762,8 +2762,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2773,14 +2773,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2792,7 +2792,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-11" aria-labelledby="reka-dropdown-menu-trigger-v-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-11" aria-labelledby="reka-dropdown-menu-trigger-v-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-12" data-slot="group" class="grid">
@@ -2822,8 +2822,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2833,14 +2833,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2852,7 +2852,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-13" aria-labelledby="reka-dropdown-menu-trigger-v-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-13" aria-labelledby="reka-dropdown-menu-trigger-v-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-14" data-slot="group" class="grid">
@@ -2882,8 +2882,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2893,14 +2893,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2912,7 +2912,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-15" aria-labelledby="reka-dropdown-menu-trigger-v-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-15" aria-labelledby="reka-dropdown-menu-trigger-v-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-16" data-slot="group" class="grid">
@@ -2942,8 +2942,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2953,14 +2953,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2972,7 +2972,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-17" aria-labelledby="reka-dropdown-menu-trigger-v-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-17" aria-labelledby="reka-dropdown-menu-trigger-v-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-18" data-slot="group" class="grid">
@@ -3002,8 +3002,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -3013,14 +3013,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -3032,7 +3032,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-19" aria-labelledby="reka-dropdown-menu-trigger-v-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-19" aria-labelledby="reka-dropdown-menu-trigger-v-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-20" data-slot="group" class="grid">
@@ -3063,7 +3063,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index e952dfe14..1290bdff8 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -491,7 +491,7 @@ exports[`Table > renders with columns correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -525,8 +525,8 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -536,14 +536,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -585,8 +585,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -596,14 +596,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -645,8 +645,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -656,14 +656,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -705,8 +705,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -716,14 +716,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -765,8 +765,8 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -776,14 +776,14 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -826,7 +826,7 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
@@ -1872,7 +1872,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-heading-class" style="background-color: black;">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -1906,8 +1906,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -1917,14 +1917,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -1936,7 +1936,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-11" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-11" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-12" data-slot="group" class="grid">
@@ -1966,8 +1966,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -1977,14 +1977,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -1996,7 +1996,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-13" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-13" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-14" data-slot="group" class="grid">
@@ -2026,8 +2026,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2037,14 +2037,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2056,7 +2056,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-15" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-15" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-16" data-slot="group" class="grid">
@@ -2086,8 +2086,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2097,14 +2097,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2116,7 +2116,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-17" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-17" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-18" data-slot="group" class="grid">
@@ -2146,8 +2146,8 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2157,14 +2157,14 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2176,7 +2176,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-19" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-19" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-20" data-slot="group" class="grid">
@@ -2207,7 +2207,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) custom-heading-class" style="background-color: black;">
@@ -2361,7 +2361,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -2395,8 +2395,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2406,14 +2406,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2425,7 +2425,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-11" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-11" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-12" data-slot="group" class="grid">
@@ -2455,8 +2455,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2466,14 +2466,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2485,7 +2485,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-13" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-13" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-14" data-slot="group" class="grid">
@@ -2515,8 +2515,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2526,14 +2526,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2545,7 +2545,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-15" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-15" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-16" data-slot="group" class="grid">
@@ -2575,8 +2575,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2586,14 +2586,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2605,7 +2605,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-17" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-17" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-18" data-slot="group" class="grid">
@@ -2635,8 +2635,8 @@ exports[`Table > renders with sorting asc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2646,14 +2646,14 @@ exports[`Table > renders with sorting asc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2665,7 +2665,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-19" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-19" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-20" data-slot="group" class="grid">
@@ -2696,7 +2696,7 @@ exports[`Table > renders with sorting asc correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
@@ -2728,7 +2728,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px]" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
@@ -2762,8 +2762,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
     </thead>
     <tbody data-slot="tbody" class="isolate [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&amp;>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&amp;>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke) [&amp;>tr]:last:[&amp;>td]:border-b-0 divide-y divide-(--ui-color-divider-default)">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2773,14 +2773,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#m5gr84i9</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 15:30</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 15:30</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">ken99@yahoo.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€316.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">ken99@yahoo.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€316.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2792,7 +2792,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-11" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-11" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-2" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-12" data-slot="group" class="grid">
@@ -2822,8 +2822,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2833,14 +2833,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#bhqecj4p</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 15:55</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 15:55</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">carmella@hotmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€721.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">carmella@hotmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€721.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2852,7 +2852,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-13" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-13" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-4" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-14" data-slot="group" class="grid">
@@ -2882,8 +2882,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2893,14 +2893,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#5kma53ae</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 10, 19:45</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 10, 19:45</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-success ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->paid</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Silas22@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€874.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Silas22@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€874.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2912,7 +2912,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-15" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-15" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-6" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-16" data-slot="group" class="grid">
@@ -2942,8 +2942,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -2953,14 +2953,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#derv1ws0</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 08:50</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 08:50</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->refunded</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Monserrat44@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€837.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Monserrat44@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€837.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -2972,7 +2972,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: none; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-17" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-17" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-8" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-18" data-slot="group" class="grid">
@@ -3002,8 +3002,8 @@ exports[`Table > renders with sorting desc correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]" data-aria-hidden="true" aria-hidden="true">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
             <div data-slot="container" class="flex items-center h-4"><button aria-label="Select row" data-slot="base" class="cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
@@ -3013,14 +3013,14 @@ exports[`Table > renders with sorting desc correctly 1`] = `
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">#3u1reuv4</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Mar 11, 10:10</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true">Mar 11, 10:10</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)" data-aria-hidden="true" aria-hidden="true"><span data-slot="base" class="ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30 style-filled-alert ui-label-md gap-1 rounded-[calc(var(--ui-label-height)_/_2)] capitalize"><span data-slot="wrapper" class="h-(--ui-label-height) inline-flex items-center gap-1"><!--v-if-->failed</span>
           <!--v-if--></span>
         </td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase">Abe45@gmail.com</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium">€242.00</td>
-        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)">
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) lowercase" data-aria-hidden="true" aria-hidden="true">Abe45@gmail.com</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right font-medium" data-aria-hidden="true" aria-hidden="true">€242.00</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default) text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="true" aria-controls="" data-state="open" aria-label="Actions" data-slot="base" class="ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight) --style-filled-copilot ui-btn-md rounded-(--ui-btn-radius) normal-case --air w-(--ui-btn-height)" data-aria-hidden="true" aria-hidden="true">
             <!--v-if-->
             <div data-slot="baseLine" class="w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) h-(--ui-btn-height) ps-[4px] pe-[4px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)">
                 <path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path>
@@ -3032,7 +3032,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
           <!---->
           <!--teleport start-->
           <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-            <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-19" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
+            <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-19" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-10" data-slot="content" class="base-mode flex flex-col max-h-[min(var(--max-height-popup-menu),var(--reka-dropdown-menu-content-available-height,var(--max-height-popup-menu)))] bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) bitrix-mobile:py-0! pointer-events-auto" data-orientation="vertical" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="end" dir="ltr">
               <!--v-if-->
               <div role="presentation" data-slot="viewport" class="relative w-full min-w-48 flex-1 overflow-x-hidden overflow-y-auto scrollbar-thin">
                 <div role="group" aria-labelledby="reka-menu-group-v-0-0-20" data-slot="group" class="grid">
@@ -3063,7 +3063,7 @@ exports[`Table > renders with sorting desc correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="relative">
+    <tfoot data-slot="tfoot" class="relative" data-aria-hidden="true" aria-hidden="true">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-start font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
diff --git a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
index 510697f4a..e32fd66f5 100644
--- a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
@@ -7,8 +7,8 @@ exports[`ContentSearch > renders with b24ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px] [&amp;>input]:text-lg">
@@ -66,8 +66,8 @@ exports[`ContentSearch > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] h-full sm:h-[436px] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] h-full sm:h-[436px] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -125,8 +125,8 @@ exports[`ContentSearch > renders with fullscreen correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 fixed max-h-[calc(100dvh)] p-0 pt-0 pb-[10px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] inset-0 fixed max-h-[calc(100dvh)] p-0 pt-0 pb-[10px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -184,8 +184,8 @@ exports[`ContentSearch > renders with icon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -243,7 +243,7 @@ exports[`ContentSearch > renders with links correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
 <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
@@ -302,8 +302,8 @@ exports[`ContentSearch > renders with loading correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -361,8 +361,8 @@ exports[`ContentSearch > renders with placeholder correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -420,8 +420,8 @@ exports[`ContentSearch > renders with search function correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -472,8 +472,8 @@ exports[`ContentSearch > renders with size lg correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -531,8 +531,8 @@ exports[`ContentSearch > renders with size md correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -590,8 +590,8 @@ exports[`ContentSearch > renders with size sm correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[28px] pe-[28px]">
@@ -649,8 +649,8 @@ exports[`ContentSearch > renders with size xl correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
@@ -708,8 +708,8 @@ exports[`ContentSearch > renders with size xs correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[22px] pe-[22px]">
@@ -767,8 +767,8 @@ exports[`ContentSearch > renders with size xss correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[20px] pe-[20px]">
@@ -826,8 +826,8 @@ exports[`ContentSearch > renders without colorMode correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 motion-safe:backdrop-blur-0.5 motion-safe:data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)] bg-[#003366]/20" data-aria-hidden="true" aria-hidden="true"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="base-mode bg-(--ui-color-bg-content-primary) flex flex-col gap-0 focus:outline-none motion-safe:data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)] w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--ui-border-radius-2xl)+2px)] shadow-lg fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] p-0 pt-0 pb-[10px] sm:max-w-[768px] h-full sm:h-[436px]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-divider-default)">
     <div data-slot="root" class="isolate relative inline-flex items-center ps-[40px] pe-[44px]">
diff --git a/test/utils/__fixtures__/indistinguishable-snapshots.json b/test/utils/__fixtures__/indistinguishable-snapshots.json
index 88fe34f3e..538ddee7e 100644
--- a/test/utils/__fixtures__/indistinguishable-snapshots.json
+++ b/test/utils/__fixtures__/indistinguishable-snapshots.json
@@ -824,7 +824,8 @@
       "DropdownMenu > renders with color secondary correctly 1",
       "DropdownMenu > renders with color success correctly 1",
       "DropdownMenu > renders with color warning correctly 1",
-      "DropdownMenu > renders with disabled correctly 1"
+      "DropdownMenu > renders with disabled correctly 1",
+      "DropdownMenu > renders with items correctly 1"
     ]
   },
   {
@@ -843,7 +844,8 @@
       "DropdownMenu > renders with color secondary correctly 1",
       "DropdownMenu > renders with color success correctly 1",
       "DropdownMenu > renders with color warning correctly 1",
-      "DropdownMenu > renders with disabled correctly 1"
+      "DropdownMenu > renders with disabled correctly 1",
+      "DropdownMenu > renders with items correctly 1"
     ]
   },
   {
@@ -1803,17 +1805,18 @@
   {
     "file": "components/__snapshots__/Select-vue.spec.ts.snap",
     "names": [
-      "Select > renders with loading and avatar correctly 1",
-      "Select > renders with loading correctly 1"
+      "Select > renders with items correctly 1",
+      "Select > renders with multiple correctly 1",
+      "Select > renders with name correctly 1",
+      "Select > renders with selectedIcon correctly 1",
+      "Select > renders with size md correctly 1"
     ]
   },
   {
     "file": "components/__snapshots__/Select-vue.spec.ts.snap",
     "names": [
-      "Select > renders with multiple correctly 1",
-      "Select > renders with name correctly 1",
-      "Select > renders with selectedIcon correctly 1",
-      "Select > renders with size md correctly 1"
+      "Select > renders with loading and avatar correctly 1",
+      "Select > renders with loading correctly 1"
     ]
   },
   {
@@ -1827,17 +1830,18 @@
   {
     "file": "components/__snapshots__/Select.spec.ts.snap",
     "names": [
-      "Select > renders with loading and avatar correctly 1",
-      "Select > renders with loading correctly 1"
+      "Select > renders with items correctly 1",
+      "Select > renders with multiple correctly 1",
+      "Select > renders with name correctly 1",
+      "Select > renders with selectedIcon correctly 1",
+      "Select > renders with size md correctly 1"
     ]
   },
   {
     "file": "components/__snapshots__/Select.spec.ts.snap",
     "names": [
-      "Select > renders with multiple correctly 1",
-      "Select > renders with name correctly 1",
-      "Select > renders with selectedIcon correctly 1",
-      "Select > renders with size md correctly 1"
+      "Select > renders with loading and avatar correctly 1",
+      "Select > renders with loading correctly 1"
     ]
   },
   {
@@ -2313,6 +2317,7 @@
   {
     "file": "components/content/__snapshots__/ContentSearch.spec.ts.snap",
     "names": [
+      "ContentSearch > renders with links correctly 1",
       "ContentSearch > renders with size md correctly 1",
       "ContentSearch > renders without colorMode correctly 1"
     ]
diff --git a/test/utils/console-gate.ts b/test/utils/console-gate.ts
index 822fb4ffe..108e987e2 100644
--- a/test/utils/console-gate.ts
+++ b/test/utils/console-gate.ts
@@ -56,7 +56,7 @@ const CHANNELS = ['warn', 'error'] as const
  * if the warning it emits is one somebody has looked at and chosen to leave.
  */
 export const KNOWN_NOISY_SPECS = new Set([
-  // ── The dialog family, and this one is the test harness ──────────────────
+  // ── The dialog family ────────────────────────────────────────────────────
   // `DialogContent requires a DialogTitle`, `Missing Description or
   // aria-describedby`, `console.error: aria-hidden`.
   //
@@ -67,20 +67,23 @@ export const KNOWN_NOISY_SPECS = new Set([
   // specs render with `portal: false`, which keeps the content inside that
   // detached wrapper instead of teleporting it to `document.body`.
   //
-  // Measured on `Modal`, one mount each: 2 warnings detached, 0 with
-  // `attachTo: document.body`, 0 with the portal left on.
+  // `componentRender` now mounts with `attachTo: document.body`, which fixes
+  // this for every case built by `renderEach` — the whole snapshot corpus.
+  // Measured with this register emptied, before and after: 623 messages across
+  // 62 tests, then 366 across 56. `nuxt:components/Header.spec.ts` is the one
+  // file that went quiet outright and is gone from the list below.
   //
-  // Attaching in `componentRender` fixes all of them and is not a small
-  // change: reka-ui's focus scoping then really runs, so overlays gain the
-  // `aria-hidden` a browser gives them, and 344 snapshots across 26 files
-  // move. Worth doing, and worth doing on its own.
+  // The rest stay because the register keys on files, and every file here also
+  // holds tests that call `mountSuspended` by hand — accessibility checks, SSR
+  // checks, focus-return checks — which do not go through `componentRender`
+  // and are still detached. Attaching those is 293 call sites across 112
+  // files; it wants its own change, not a rider on this one.
   'nuxt:components/Modal.spec.ts',
   'vue:components/Modal.spec.ts',
   'nuxt:components/Drawer.spec.ts',
   'vue:components/Drawer.spec.ts',
   'nuxt:components/Slideover.spec.ts',
   'vue:components/Slideover.spec.ts',
-  'nuxt:components/Header.spec.ts',
   'vue:components/Header.spec.ts',
   'nuxt:components/DashboardSearch.spec.ts',
   'vue:components/DashboardSearch.spec.ts',
diff --git a/test/utils/mount.ts b/test/utils/mount.ts
index 8d714c8d7..bf9a0a884 100644
--- a/test/utils/mount.ts
+++ b/test/utils/mount.ts
@@ -29,6 +29,16 @@ export async function mountSuspended(...args: Parameters<typeof mount>) {
     }
   }))
 
+  /**
+   * The router is a module singleton, and vue-router's `install` replaces
+   * `app.unmount` with one that resets `currentRoute` to `START_LOCATION` and
+   * clears `started`/`ready` once the last app goes. `componentRender` unmounts
+   * every wrapper, so without this the next mount renders against an
+   * un-navigated router: `RouterLink` reports `isActive: false` for `to="/"`
+   * and `Link` loses its active styling. The initial navigation `install`
+   * kicks off is a promise, and one `$nextTick` does not outlast it.
+   */
+  await router.isReady()
   await wrapper.vm.$nextTick()
 
   // @ts-expect-error - setupState does not exist in type

From bd2ff87dc671ac5c3731bfac1bf185e790084d28 Mon Sep 17 00:00:00 2001
From: Shevchik Igor <noreply@anthropic.com>
Date: Sat, 29 Aug 2026 11:18:59 +0000
Subject: [PATCH 2/2] test(harness): move the attach/unmount detail into
 testing.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review found one real defect and one rule violation.

`continueProcess` cancelled `requestId` without dropping it, so the
`delay <= 0` branch carried an already-cancelled handle into `stop()` and
`pause()` cancelled it a second time — the same double-clear the comment two
lines above blames for four uncaught TypeErrors. Harmless in a browser, and it
contradicted the invariant that comment states.

The JSDoc on `componentRender` had grown to 33 lines, over this repo's own
twenty-line ceiling for a hover hint. The measurements, the reason mocks now
need their teardown half, and the note about the 293 hand-written mounts move
to `.github/contributing/testing.md`; the JSDoc keeps twelve lines and a
pointer. The same material is no longer duplicated in `console-gate.ts`.

Not changed: the three cases review flagged as newly vacuous. `with items` is
the reference render of its group, not a member that lost its distinction —
29 KB with eleven real menu items. It was held apart from `with color primary`
by one leaked `pointer-events: auto` byte, which recorded how many earlier
cases were still mounted rather than anything a colour does. `dropdown-menu`'s
theme puts colour on the trigger, which these fixtures do not render, so this
is the guard's own example of a genuine collision — a colour that only tints.
The siblings were already in the baseline for that reason.

Refs #87
---
 .github/contributing/testing.md      | 38 ++++++++++++++++++++++++++++
 src/runtime/components/Countdown.vue |  1 +
 test/component-render.ts             | 37 ++++++---------------------
 test/utils/console-gate.ts           | 16 ++++--------
 4 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/.github/contributing/testing.md b/.github/contributing/testing.md
index dbf503031..cc2236674 100644
--- a/.github/contributing/testing.md
+++ b/.github/contributing/testing.md
@@ -312,6 +312,44 @@ often a different vitest project — from the one being re-rendered.
 A full `pnpm run test:update` fixes it in one pass. `test:update` exists so
 that the safe command is the short one, and it takes no path on purpose.
 
+## Every case is mounted into the document, and unmounted after
+
+`componentRender` mounts with `attachTo: document.body` and calls `unmount()`
+as soon as it has the markup. Both halves matter, and neither is the default.
+
+Vue Test Utils renders into a detached element. That is invisible until
+something asks the document a question, and reka-ui's dialog family does: it
+checks its own accessibility with `document.getElementById(titleId)` in
+`onMounted`. Against a detached tree the lookup fails, so every dialog spec
+rendering with `portal: false` warned that `DialogContent` requires a
+`DialogTitle` — with the title sitting in the markup it had just produced.
+Measured across the suite, with the register in `test/utils/console-gate.ts`
+emptied on both sides: 623 console messages from 62 tests detached, 366 from 56
+attached.
+
+Attached, the snapshots also record what a browser would: `Header` and `Table`
+gain the `aria-hidden` reka-ui puts on everything behind an open dialog, and
+`CheckboxGroup`/`RadioGroup` gain the `aria-label` it reads off the associated
+`<label>` rather than the raw value.
+
+Unmounting is the half that keeps cases independent, and it had never run
+before. Without it reka-ui's **module-global** layer stack kept every layer any
+case had ever mounted, so `DismissableLayer` rendered `pointer-events: auto`
+according to how many earlier cases were still on the stack — not according to
+anything under test. Four `#454` baseline groups were held apart by exactly
+that byte.
+
+Teardown running for the first time is also why a mock that implements only the
+setup half now fails: `EditorDragHandle` and `EditorToolbar` mocked tiptap's
+`registerPlugin` without `unregisterPlugin`, which nothing reached until
+`beforeUnmount` did. If a component you are testing acquires something on
+mount, the mock owes you the release too.
+
+Tests that call `mountSuspended` by hand do not go through `componentRender`
+and are still detached — 293 call sites across 112 files. That is why the
+dialog specs stay in the register below even though their snapshot matrices
+went quiet.
+
 ## Console warnings fail the test
 
 A component that renders while logging a warning is a defect the suite already
diff --git a/src/runtime/components/Countdown.vue b/src/runtime/components/Countdown.vue
index 866312a8f..2a6ce8267 100644
--- a/src/runtime/components/Countdown.vue
+++ b/src/runtime/components/Countdown.vue
@@ -346,6 +346,7 @@ function continueProcess(): void {
   // uncaught `TypeError`s in `Countdown.spec.ts` — invisible until the harness
   // began unmounting wrappers, because nothing ever called `pause`.
   cancelAnimationFrame(requestId)
+  requestId = 0
 
   const delay = Math.min(totalMilliseconds.value, props.interval!)
 
diff --git a/test/component-render.ts b/test/component-render.ts
index 78893b765..69d8aaecf 100644
--- a/test/component-render.ts
+++ b/test/component-render.ts
@@ -5,37 +5,16 @@ import { it, expect } from 'vitest'
 type MountSuspendedOptions<T> = Parameters<typeof mountSuspended<T>>[1]
 
 /**
- * Mounted into the document, not beside it.
+ * Mounted into the document, and unmounted once the markup is taken.
  *
- * Vue Test Utils renders into a detached element by default. That is invisible
- * until something asks the document a question — and reka-ui's dialog family
- * does: it checks its own accessibility with `document.getElementById(titleId)`
- * in `onMounted`. A detached tree is not in the document, so the lookup failed
- * and every dialog spec rendering with `portal: false` warned that
- * `DialogContent` requires a `DialogTitle`, with the title sitting in the
- * markup it had just produced. The case named `renders with title correctly`
- * warned too.
+ * Vue Test Utils renders into a detached element, which is invisible to
+ * anything that asks the document a question — and reka-ui's dialogs do. Not
+ * unmounting left reka-ui's module-global layer stack holding every case ever
+ * mounted, so cases were not independent.
  *
- * Measured on `Modal`, one mount each: 2 warnings detached, 0 attached, 0 with
- * the portal left on. Across the suite, with `console-gate.ts`'s register
- * emptied on both sides: 623 messages from 62 tests before, 366 from 56 after.
- * Only one register entry could be removed, because the register keys on files
- * and the dialog specs also mount by hand — see the note on that list.
- *
- * Attaching also lets reka-ui reach the rest of the document, which is why this
- * moved 402 snapshot entries across 25 files: `Header` and `Table` gain the
- * `aria-hidden` a browser puts on everything behind an open dialog, and
- * `CheckboxGroup` and `RadioGroup` gain the `aria-label` reka-ui reads off the
- * associated `<label>` rather than the raw value. The snapshots are closer to a
- * browser than they were.
- *
- * The wrapper is unmounted as soon as its markup is taken, so nothing
- * accumulates in `document.body` between cases — and teardown now runs, which
- * is a second source of truth in its own right. Without it reka-ui's
- * module-global layer stack kept every layer any case had ever mounted, so
- * `DismissableLayer` rendered `pointer-events: auto` according to how many
- * earlier cases were still on the stack rather than to anything under test.
- * Four `#454` baseline groups were held apart by exactly that byte.
+ * Both halves changed what the corpus records, and unmounting surfaced three
+ * defects. `.github/contributing/testing.md` has the measurements and the
+ * consequences for writing mocks.
  */
 async function componentRender<T>(nameOrHtml: string, options: MountSuspendedOptions<T>, component: T) {
   let html: string
diff --git a/test/utils/console-gate.ts b/test/utils/console-gate.ts
index 108e987e2..9ac0e0a86 100644
--- a/test/utils/console-gate.ts
+++ b/test/utils/console-gate.ts
@@ -67,17 +67,11 @@ export const KNOWN_NOISY_SPECS = new Set([
   // specs render with `portal: false`, which keeps the content inside that
   // detached wrapper instead of teleporting it to `document.body`.
   //
-  // `componentRender` now mounts with `attachTo: document.body`, which fixes
-  // this for every case built by `renderEach` — the whole snapshot corpus.
-  // Measured with this register emptied, before and after: 623 messages across
-  // 62 tests, then 366 across 56. `nuxt:components/Header.spec.ts` is the one
-  // file that went quiet outright and is gone from the list below.
-  //
-  // The rest stay because the register keys on files, and every file here also
-  // holds tests that call `mountSuspended` by hand — accessibility checks, SSR
-  // checks, focus-return checks — which do not go through `componentRender`
-  // and are still detached. Attaching those is 293 call sites across 112
-  // files; it wants its own change, not a rider on this one.
+  // `componentRender` now attaches to the document, which fixes this for every
+  // case `renderEach` builds. The files stay listed anyway: the register keys
+  // on files, and each of these also holds tests that call `mountSuspended` by
+  // hand — accessibility, SSR, focus-return — which are still detached.
+  // `.github/contributing/testing.md` has the measurements.
   'nuxt:components/Modal.spec.ts',
   'vue:components/Modal.spec.ts',
   'nuxt:components/Drawer.spec.ts',