Merge pull request #566 from thejackshelton/popover-improvements

thejackshelton · web-flow · commit e62895b9a777 · 2023-12-15T13:24:49.000-06:00
docs(improves code mdx and combobox examples)
diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx
@@ -146,9 +146,10 @@ export const components: Record<string, any> = {
   >(({ __rawString__, ...props }) => {
     return (
       <div
+        {...props}
         class={[
           twMerge(
-            'code-example relative -mx-6 max-h-[31.25rem] rounded-xl bg-slate-900 lg:-mx-8',
+            'code-example relative -mx-6 mb-6 max-h-[31.25rem] rounded-xl bg-slate-900 lg:-mx-8',
             (props.class as Signal<string>)?.value ?? (props.class as string),
           ),
         ]}
@@ -158,7 +159,6 @@ export const components: Record<string, any> = {
           code={__rawString__}
         />
         <div
-          {...props}
           style={''} // required to override shiki's
           class="tab-size max-h-[31.25rem] max-w-full overflow-auto rounded-xl border bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm"
         >
@@ -171,7 +171,7 @@ export const components: Record<string, any> = {
   }),
   code: component$<QwikIntrinsicElements['code']>(() => {
     return (
-      <code>
+      <code class="whitespace-pre-wrap">
         <Slot />
       </code>
     );
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/custom-filter.tsx b/apps/website/src/routes/docs/headless/combobox/examples/custom-filter.tsx
@@ -42,7 +42,7 @@ export default component$(() => {
     >
       <ComboboxLabel class=" font-semibold">Countries 🚩</ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border">
-        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
           <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
         </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx b/apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx
@@ -53,7 +53,7 @@ export default component$(() => {
       >
         <ComboboxLabel class=" font-semibold">Pokemon 🦏</ComboboxLabel>
         <ComboboxControl class="relative flex items-center rounded-sm border">
-          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
           <ComboboxTrigger class="group absolute right-0 h-6 w-6">
             <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
           </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/default-label.tsx b/apps/website/src/routes/docs/headless/combobox/examples/default-label.tsx
@@ -20,7 +20,7 @@ export default component$(() => {
     <Combobox class="w-fit" defaultLabel={names[2]} options={names}>
       <ComboboxLabel>Default Label</ComboboxLabel>
       <ComboboxControl class="relative rounded-sm border">
-        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
           <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
         </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/disable-blur.tsx b/apps/website/src/routes/docs/headless/combobox/examples/disable-blur.tsx
@@ -39,7 +39,7 @@ export default component$(() => {
         <ComboboxControl class="relative flex items-center rounded-sm border">
           <ComboboxInput
             disableOnBlur={true}
-            class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6"
+            class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6"
           />
           <ComboboxTrigger class="group absolute right-0 h-6 w-6">
             <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/disabled.tsx b/apps/website/src/routes/docs/headless/combobox/examples/disabled.tsx
@@ -35,7 +35,7 @@ export default component$(() => {
     <Combobox class="w-fit" options={disabledExample} optionDisabledKey="myDisabledKey">
       <ComboboxLabel class=" font-semibold">Disabled ⛔</ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border">
-        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
           <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
         </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/hero.tsx b/apps/website/src/routes/docs/headless/combobox/examples/hero.tsx
@@ -46,7 +46,7 @@ export default component$(() => {
       <ComboboxControl class="relative flex items-center rounded-sm border">
         <ComboboxInput
           placeholder="Jim"
-          class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6"
+          class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6"
         />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
           <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/hide.tsx b/apps/website/src/routes/docs/headless/combobox/examples/hide.tsx
@@ -43,7 +43,7 @@ export default component$(() => {
         }
       >
         <ComboboxControl class="relative flex items-center rounded-sm border">
-          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
           <ComboboxTrigger class="group absolute right-0 h-6 w-6">
             <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
           </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/highlighted-index.tsx b/apps/website/src/routes/docs/headless/combobox/examples/highlighted-index.tsx
@@ -31,7 +31,7 @@ export default component$(() => {
         bind:highlightedIndexSig={highlightedIndexSig}
       >
         <ComboboxControl class="relative flex items-center rounded-sm border">
-          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-fit px-2 pr-6" />
+          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-fit rounded-sm px-2 pr-6" />
           <ComboboxTrigger class="group absolute right-0 h-6 w-6">
             <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
           </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/object.tsx b/apps/website/src/routes/docs/headless/combobox/examples/object.tsx
@@ -30,7 +30,7 @@ export default component$(() => {
     <Combobox class="w-fit" options={objectExample}>
       <ComboboxLabel class=" font-semibold">Jedi ⚔️</ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border">
-        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
           <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
         </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/placement.tsx b/apps/website/src/routes/docs/headless/combobox/examples/placement.tsx
@@ -37,7 +37,7 @@ export default component$(() => {
       >
         <ComboboxLabel>Positions</ComboboxLabel>
         <ComboboxControl class="relative mt-2 flex items-center rounded-sm border">
-          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+          <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
           <ComboboxTrigger class="group absolute right-0 h-6 w-6">
             <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
           </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/search-bar.tsx b/apps/website/src/routes/docs/headless/combobox/examples/search-bar.tsx
@@ -49,7 +49,7 @@ export default component$(() => {
       <ComboboxControl class="relative rounded-sm border">
         <ComboboxInput
           onClick$={() => (isListboxOpenSig.value = !isListboxOpenSig.value)}
-          class="px-d2 bg-background placeholder:text-muted-foreground w-44 pl-6 pr-6"
+          class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm pl-6 pr-6"
           onKeyDown$={(e) => {
             if (e.key === 'Enter') {
               const inputElement = e.target as HTMLInputElement;
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/shift.tsx b/apps/website/src/routes/docs/headless/combobox/examples/shift.tsx
@@ -31,7 +31,7 @@ export default component$(() => {
           <ComboboxLabel class=" font-semibold">Fruits 🍓</ComboboxLabel>
           <ComboboxControl class="relative flex items-center rounded-sm border">
             <ComboboxInput
-              class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6"
+              class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6"
               placeholder="Papaya"
             />
             <ComboboxTrigger class="group absolute right-0 h-6 w-6">
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/signal-binds.tsx b/apps/website/src/routes/docs/headless/combobox/examples/signal-binds.tsx
@@ -35,7 +35,7 @@ export default component$(() => {
         >
           <ComboboxControl class="relative flex items-center rounded-sm border">
             <ComboboxInput
-              class="px-d2 placeholder:text-muted-foreground w-fit px-2 pr-6"
+              class="px-d2 placeholder:text-muted-foreground w-fit rounded-sm px-2 pr-6"
               onClick$={() => (isListboxOpenSig.value = !isListboxOpenSig.value)}
             />
             <ComboboxTrigger class="group absolute right-0 h-6 w-6">
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/sort-filter.tsx b/apps/website/src/routes/docs/headless/combobox/examples/sort-filter.tsx
@@ -46,7 +46,7 @@ export default component$(() => {
     >
       <ComboboxLabel class=" font-semibold">Countries 🚩</ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border">
-        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />
+        <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
           <ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
         </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/string.tsx b/apps/website/src/routes/docs/headless/combobox/examples/string.tsx
@@ -44,7 +44,7 @@ export default component$(() => {
       <ComboboxLabel class=" font-semibold">Fruits 🍓</ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border">
         <ComboboxInput
-          class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6"
+          class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6"
           placeholder="Papaya"
         />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
diff --git a/apps/website/src/routes/docs/headless/popover/examples/auto-placement.tsx b/apps/website/src/routes/docs/headless/popover/examples/auto-placement.tsx
@@ -34,7 +34,7 @@ export default component$(() => {
           optionDisabledKey="myDisabledKey"
         >
           <ComboboxControl class="relative mt-2 flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
-            <ComboboxInput class="px-d2 h-[44px] w-44 bg-slate-900 px-4 pr-6 text-white placeholder:text-slate-500" />
+            <ComboboxInput class="px-d2 h-[44px] w-44 rounded-sm bg-slate-900 px-4 pr-6 text-white placeholder:text-slate-500" />
             <ComboboxTrigger class="group absolute right-0 h-6 w-6">
               <ComboboxIcon class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
             </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/popover/examples/flip.tsx b/apps/website/src/routes/docs/headless/popover/examples/flip.tsx
@@ -34,7 +34,7 @@ export default component$(() => {
       <p class="text-center text-white">☝️ Scroll up and down with me open! 👇</p>
       <Combobox class="w-fit" options={flipExample} optionDisabledKey="myDisabledKey">
         <ComboboxControl class="relative mt-2 flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
-          <ComboboxInput class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
+          <ComboboxInput class="px-d2 w-44 rounded-sm bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
           <ComboboxTrigger class="group absolute right-0 h-6 w-6">
             <ComboboxIcon class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
           </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/popover/examples/floating-intro.tsx b/apps/website/src/routes/docs/headless/popover/examples/floating-intro.tsx
@@ -34,7 +34,7 @@ export default component$(() => {
       </ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
         <ComboboxInput
-          class="px-d2 w-fit bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500"
+          class="px-d2 w-fit rounded-sm bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500"
           placeholder="Wallaby Rd."
         />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6 bg-transparent">
diff --git a/apps/website/src/routes/docs/headless/popover/examples/gutter.tsx b/apps/website/src/routes/docs/headless/popover/examples/gutter.tsx
@@ -39,7 +39,7 @@ export default component$(() => {
       </ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
         <ComboboxInput
-          class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500"
+          class="px-d2 w-44 rounded-sm bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500"
           placeholder="Wallaby Rd."
         />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
diff --git a/apps/website/src/routes/docs/headless/popover/examples/listbox-animation.tsx b/apps/website/src/routes/docs/headless/popover/examples/listbox-animation.tsx
@@ -69,8 +69,7 @@ export default component$(() => {
       <ComboboxLabel class=" font-semibold text-white">Streets 🛣️</ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
         <ComboboxInput
-          disableOnBlur={true}
-          class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500"
+          class="px-d2 w-44 rounded-sm bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500"
           placeholder="Wallaby Rd."
         />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">
diff --git a/apps/website/src/routes/docs/headless/popover/examples/placement.tsx b/apps/website/src/routes/docs/headless/popover/examples/placement.tsx
@@ -37,7 +37,7 @@ export default component$(() => {
       >
         <ComboboxLabel class="text-white">Positions</ComboboxLabel>
         <ComboboxControl class="relative mt-2 flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
-          <ComboboxInput class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
+          <ComboboxInput class="px-d2 w-44 rounded-sm bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
           <ComboboxTrigger class="group absolute right-0 h-6 w-6">
             <ComboboxIcon class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
           </ComboboxTrigger>
diff --git a/apps/website/src/routes/docs/headless/popover/index.mdx b/apps/website/src/routes/docs/headless/popover/index.mdx
@@ -494,20 +494,6 @@ A backdrop across all browsers in the popover is possible too, but it requires a
 
 That said, if browser support is not a priority, feel free to use the native `::backdrop`. They are still supported in every major browser.
 
-## Additional Examples
-
-### Auto Placement
-
-Automatically places the listbox based on available space. **You must set flip to false before using it.** This comes in handy when you're unsure about the optimal placement for the floating element, or if you prefer not to set it manually.
-
-<Showcase name="auto-placement" />
-
-<Note status="caution">
-  You cannot use **flip** and **autoPlacement** at the same time. They both manipulate the
-  placement but with different strategies. Using both can result in a continuous reset
-  loop as they try to override each other's work.
-</Note>
-
 ### Popover
 
 <APITable
@@ -639,3 +625,17 @@ Automatically places the listbox based on available space. **You must set flip t
     },
   ]}
 />
+
+## Additional Examples
+
+### Auto Placement
+
+Automatically places the listbox based on available space. **You must set flip to false before using it.** This comes in handy when you're unsure about the optimal placement for the floating element, or if you prefer not to set it manually.
+
+<Showcase name="auto-placement" />
+
+<Note status="caution">
+  You cannot use **flip** and **autoPlacement** at the same time. They both manipulate the
+  placement but with different strategies. Using both can result in a continuous reset
+  loop as they try to override each other's work.
+</Note>
diff --git a/packages/kit-headless/src/components/popover/popover-impl.tsx b/packages/kit-headless/src/components/popover/popover-impl.tsx
@@ -97,8 +97,6 @@ export const PopoverImpl = component$<PopoverImplProps>((props) => {
         $((e: ToggleEvent) => {
           if (!popoverRef.value) return;
 
-          console.log(e.newState);
-
           if (e.newState === 'open' && popoverRef.value) {
             supportShowAnimation(popoverRef.value, isPolyfillSig.value);
           }
diff --git a/packages/kit-headless/src/components/popover/utils.ts b/packages/kit-headless/src/components/popover/utils.ts
@@ -5,20 +5,27 @@ export function supportShowAnimation(popover: HTMLElement, isPolyfill: boolean)
   const { transitionDuration } = getComputedStyle(popover);
 
   if (isPolyfill) {
+    console.log('polyfill run!');
     // polyfill needs a bit of extra time to execute
     if (transitionDuration !== '0s') {
       setTimeout(() => {
         popover.classList.add('popover-showing');
         popover.classList.remove('popover-closing');
       }, 5);
     } else {
-      console.log('running!');
       popover.classList.add('popover-showing');
       popover.classList.remove('popover-closing');
     }
   } else {
-    popover.classList.add('popover-showing');
-    popover.classList.remove('popover-closing');
+    if (transitionDuration !== '0s') {
+      setTimeout(() => {
+        popover.classList.add('popover-showing');
+        popover.classList.remove('popover-closing');
+      }, 5);
+    } else {
+      popover.classList.add('popover-showing');
+      popover.classList.remove('popover-closing');
+    }
   }
 }
 
@@ -44,10 +51,8 @@ export function supportClosingAnimation(popover: HTMLElement) {
   if (animationDuration !== '0s') {
     popover.addEventListener('animationend', runAnimationEnd, { once: true });
   } else if (transitionDuration !== '0s') {
-    console.log('inside transition');
     popover.addEventListener('transitionend', runTransitionEnd, { once: true });
   } else {
-    console.log('I RAN!');
     popover.classList.remove('popover-closing');
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export default component$(() => {`
`42`	`42`	`>`
`43`	`43`	`<ComboboxLabel class=" font-semibold">Countries 🚩</ComboboxLabel>`
`44`	`44`	`<ComboboxControl class="relative flex items-center rounded-sm border">`
`45`		`- <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />`
	`45`	`+ <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />`
`46`	`46`	`<ComboboxTrigger class="group absolute right-0 h-6 w-6">`
`47`	`47`	`<ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />`
`48`	`48`	`</ComboboxTrigger>`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ export default component$(() => {`
`53`	`53`	`>`
`54`	`54`	`<ComboboxLabel class=" font-semibold">Pokemon 🦏</ComboboxLabel>`
`55`	`55`	`<ComboboxControl class="relative flex items-center rounded-sm border">`
`56`		`- <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />`
	`56`	`+ <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />`
`57`	`57`	`<ComboboxTrigger class="group absolute right-0 h-6 w-6">`
`58`	`58`	`<ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />`
`59`	`59`	`</ComboboxTrigger>`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export default component$(() => {`
`43`	`43`	`}`
`44`	`44`	`>`
`45`	`45`	`<ComboboxControl class="relative flex items-center rounded-sm border">`
`46`		`- <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />`
	`46`	`+ <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6" />`
`47`	`47`	`<ComboboxTrigger class="group absolute right-0 h-6 w-6">`
`48`	`48`	`<ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />`
`49`	`49`	`</ComboboxTrigger>`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export default component$(() => {`
`31`	`31`	`bind:highlightedIndexSig={highlightedIndexSig}`
`32`	`32`	`>`
`33`	`33`	`<ComboboxControl class="relative flex items-center rounded-sm border">`
`34`		`- <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-fit px-2 pr-6" />`
	`34`	`+ <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-fit rounded-sm px-2 pr-6" />`
`35`	`35`	`<ComboboxTrigger class="group absolute right-0 h-6 w-6">`
`36`	`36`	`<ComboboxIcon class="stroke-foreground transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />`
`37`	`37`	`</ComboboxTrigger>`