Implemented suggestions

Co-authored-by: nicolechung <[email protected]>

docs/components/combobox/index.md

@@ -3,14 +3,22 @@
 Provides a Toucan-styled combobox with filtering.
 If you are building forms, you may be interested in the ComboboxField component instead.
 
-## Content Class
+## Popover z-index
 
 A CSS class to add to this component's content container. Commonly used to specify a `z-index`.
 
 ```hbs
 <Form::Controls::Combobox @contentClass='z-50' />
 ```
 
+Another option to set the z-index of the popover is to set the `--z-index-popover` CSS variable.
+
+```css
+:root {
+  --z-index-popover: 9999;
+}
+```
+
 ## Options
 
 `@options` forms the content of this component. To support a variety of data shapes, `@options` is typed as `unknown[]` and treated as though it were opaque. `@options` is simply iterated over then passed back to you as a block parameter (`combobox.option`).

packages/ember-toucan-core/src/components/form/controls/combobox.hbs

@@ -70,7 +70,7 @@
 
   {{#if this.isPopoverOpen}}
     <ul
-      class="border-surface-inner bg-surface-2xl max-h-listbox my-0 list-none overflow-y-auto overscroll-contain rounded-sm border py-1 pl-0 shadow-xl
+      class="border-surface-inner bg-surface-2xl max-h-listbox z-popover my-0 list-none overflow-y-auto overscroll-contain rounded-sm border py-1 pl-0 shadow-xl
         {{if @contentClass @contentClass}}"
       id={{this.popoverId}}
       role="listbox"

test-app/tests/integration/components/combobox-field-test.gts

@@ -27,7 +27,7 @@ module('Integration | Component | Fields | Combobox', function (hooks) {
     assert
       .dom('[data-error]')
       .doesNotExist(
-        'Expected hint block not to be displayed as an error was not provided'
+        'Expected hint block not to be displayed as an error or @hint was not provided'
       );
 
     assert.dom('[data-lock-icon]').doesNotExist();