From 759a6b26f9836e28d801ff0d270637e9b2875b3d Mon Sep 17 00:00:00 2001
From: itsprade <its.prade@gmail.com>
Date: Tue, 29 Sep 2026 17:37:53 +0530
Subject: [PATCH] fix(select): add inner padding to the dropdown

The Select popup had no inner padding, so a highlighted option touched
its edges. It now has the same 4px inset as Menu, Combobox and
Autocomplete.

Refs tailor-inc/platform-planning#1750

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
(cherry picked from commit e7b094fd8e8a067e89c20ea17a872ee481a832ab)
---
 .changeset/snug-lists-breathe.md                            | 5 +++++
 .../src__components__select__select.test.tsx.snap           | 6 +++---
 packages/core/src/components/select/select.tsx              | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/snug-lists-breathe.md

diff --git a/.changeset/snug-lists-breathe.md b/.changeset/snug-lists-breathe.md
new file mode 100644
index 000000000..3334ec3ad
--- /dev/null
+++ b/.changeset/snug-lists-breathe.md
@@ -0,0 +1,5 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+`Select`'s dropdown now has a 4px inner gap, like `Menu`, `Combobox` and `Autocomplete`, so the highlighted option no longer touches the dropdown's edges.
diff --git a/packages/core/__snapshots__/src__components__select__select.test.tsx.snap b/packages/core/__snapshots__/src__components__select__select.test.tsx.snap
index 2e3872057..5d98e1442 100644
--- a/packages/core/__snapshots__/src__components__select__select.test.tsx.snap
+++ b/packages/core/__snapshots__/src__components__select__select.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`Select > snapshots > closed select with placeholder 1`] = `"<button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_0_" role="combobox" aria-expanded="false" aria-haspopup="listbox" data-slot="select-trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span data-placeholder="" data-slot="select-value">Pick one</span><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_0_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="">"`;
 
-exports[`Select > snapshots > disabled item 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_g_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_g_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_j_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_g_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_j_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; inset: 0; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_g_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div data-disabled="" role="option" aria-disabled="true" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
+exports[`Select > snapshots > disabled item 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_g_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_g_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_j_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_g_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_j_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; inset: 0; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_g_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div data-disabled="" role="option" aria-disabled="true" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
 
 exports[`Select > snapshots > disabled select 1`] = `"<button type="button" data-disabled="" data-placeholder="" tabindex="-1" disabled="" id="base-ui-_r_d_" role="combobox" aria-expanded="false" aria-haspopup="listbox" data-slot="select-trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span data-placeholder="" data-slot="select-value">Disabled</span><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_d_-hidden-input" disabled="" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="">"`;
 
-exports[`Select > snapshots > open select 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_3_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_3_-list"><span data-placeholder="" data-slot="select-value">Pick one</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_6_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_3_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_6_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; inset: 0; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_3_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
+exports[`Select > snapshots > open select 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_3_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_3_-list"><span data-placeholder="" data-slot="select-value">Pick one</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_6_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_3_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_6_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; inset: 0; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_3_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
 
-exports[`Select > snapshots > with groups and separator 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_7_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_7_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_a_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_7_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_a_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; inset: 0; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_7_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md" data-slot="select-content"><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_b_"><div id="base-ui-_r_b_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Fruits</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div></div><div data-slot="select-separator" class="astw:bg-muted astw:-mx-1 astw:my-1 astw:h-px"></div><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_c_"><div id="base-ui-_r_c_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Vegetables</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Carrot</div></div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
+exports[`Select > snapshots > with groups and separator 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_7_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_7_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_a_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_7_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_a_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; inset: 0; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_7_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md" data-slot="select-content"><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_b_"><div id="base-ui-_r_b_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Fruits</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div></div><div data-slot="select-separator" class="astw:bg-muted astw:-mx-1 astw:my-1 astw:h-px"></div><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_c_"><div id="base-ui-_r_c_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Vegetables</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Carrot</div></div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 8d2780c9a..be830a07a 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -100,7 +100,7 @@ function SelectContent({
         <BaseSelect.Popup
           data-slot="select-content"
           className={cn(
-            "astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
+            "astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md",
             className,
           )}
           {...props}