## Solution 1

sp-listbox => using cdkListbox in host directives
sp-listbox-option => using cdkOption in host directives

Pros:

- Precise and clean mapping to CDK primitives.
  - sp-listbox-option can easily inject sp-listbox to handle selection state UI.
  - sp-listbox won't even need to have any template beside from <ng-content></ng-content>
- No extra elements, when sp-listbox is used. list box items will be direct children of the sp-listbox.
- Handling sections is easy, since the content reflects the hierarchy.

Cons:

- Usage of listbox in Select and similar components is not straightforward, since cdkOptions should be in the **content** of cdkListbox.
  We will need another sp-option component that just collect option parts (primaryText, etc.), and loop over that to render sp-listbox-option
  inside, sp-listbox that's rendered in a popover in sp-select's template.

  - More complication in such use cases. The looping over sp-options to render sp-listbox-option is unintuitive, error-prone, and demands for
    extra abstractions (such as a directive that would handle the looping).
  - Two different API for when sp-listbox is used directly, and when inside another component:

    ```html
    <sp-listbox>
      <sp-listbox-option></sp-listbox-option>
      <sp-listbox-option></sp-listbox-option>
    </sp-listbox>
    <sp-select>
      <sp-option></sp-option>
      <sp-option></sp-option>
    </sp-select>
    ```

  - Handling sections is in such use cases complicates the looping over sp-options to create sp-listbox-option

- Code duplication in sp-listbox-option and sp-option

## Solution 2

sp-option => collects different parts of option UI (primaryText, etc.).
sp-listbox => renders `ul` (with cdkListbox applied) and `li`s (with cdkOption) applied,
looping over sp-options queried from content or received as input.

Pros:

- Allows for a uniform API for when listbox is used directly, and when used inside things like sp-select:
  ```html
  <sp-listbox>
    <sp-option></sp-option>
    <sp-option></sp-option>
  </sp-listbox>
  <sp-select>
    <sp-option></sp-option>
    <sp-option></sp-option>
  </sp-select>
  ```
- Doesn't have limitations of applying cdk directives in hostDirectives. E.g. passing static value to directive
  inputs is possible.
- Allows for keeping the default viewEncapsulation.
- Allows for accepting objects as options, and a template to render them. Similar to `items` API in react, which
  would allow for performance optimization for long list of options.

cons:

- There will be an extra element, sp-listbox, between the usage and the actual list element.
- Handling sections requires more work, compared to the other solution.
