fix(docs-infra): correct select dropdown scrolling, sizing, and selection

Several issues in the shared docs `Select` component (used by the API
reference package filter):

- The options list never scrolled: its element used a class with no styles,
  so the intended max-height/overflow rule was dead. Point it at the styled
  class so long lists scroll within the popover.
- Selecting an option now closes the popup instead of leaving it open.
- Clip the trigger and popover corners (overflow: hidden) so their rounded
  borders render cleanly, and align the popover width with the trigger.
- Drop the selected-option checkmark. The component is single-select and
  already marks the selection with a highlight, so the tick was misleading.
- Remove the unused `disabled` input.

(cherry picked from commit ffcc8eee98)

adev/shared-docs/components/select/select.component.html

@@ -57,7 +57,7 @@
                   [(value)]="selectedValues"
                   [multi]="false"
                   ngComboboxWidget
-                  class="example-listbox"
+                  class="docs-select-listbox"
                   focusMode="activedescendant"
                   tabindex="-1"
                   selectionMode="explicit"
@@ -74,12 +74,6 @@
                       class="docs-select-option"
                     >
                       <span class="docs-select-option-label">{{ option.label }}</span>
-                      <span
-                        class="material-symbols-outlined docs-select-check-icon"
-                        translate="no"
-                        aria-hidden="true"
-                        >check</span
-                      >
                     </div>
                   }
                 </div>

adev/shared-docs/components/select/select.component.scss

@@ -5,8 +5,12 @@
   width: 100%;
   display: flex;
   flex-direction: column;
+}
+
+.docs-combobox-container {
   border: 1px solid var(--border-color);
   border-radius: 0.25rem;
+  overflow: hidden;
 }
 
 .docs-select-input-container {
@@ -69,6 +73,8 @@
 
 .docs-select-dialog {
   position: absolute;
+  box-sizing: border-box;
+  width: 100%;
   left: auto;
   right: auto;
   top: auto;
@@ -76,6 +82,7 @@
   padding: 0;
   border: 1px solid var(--border-color);
   border-radius: 0.25rem;
+  overflow: hidden;
   background-color: var(--septenary-contrast);
   color: inherit;
 
@@ -178,16 +185,8 @@
     color: var(--vivid-pink);
     background-color: color-mix(in srgb, var(--vivid-pink) 5%, transparent);
   }
-
-  &:not([aria-selected='true']) .docs-select-check-icon {
-    display: none;
-  }
 }
 
 .docs-select-option-label {
   flex: 1;
 }
-
-.docs-select-check-icon {
-  font-size: 0.9rem;
-}

adev/shared-docs/components/select/select.component.ts

@@ -39,7 +39,6 @@ export class Select implements FormValueControl<string | null> {
   readonly id = input.required<string>({alias: 'selectId'});
   readonly name = input.required<string>();
   readonly options = input.required<SelectOption[]>();
-  readonly disabled = input(false);
 
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
@@ -76,7 +75,7 @@ export class Select implements FormValueControl<string | null> {
     const values = this.selectedValues();
     if (values.length) {
       this.value.set(values[0]);
-      //this.popupExpanded.set(false);
+      this.popupExpanded.set(false);
     }
   }