@synergy-design-system/mcp 2.15.0 → 3.0.0

package/metadata/static/components/syn-combobox/docs.md

@@ -1,2633 +0,0 @@
-## Default
-
-The combobox suggests items based on the user input.
-
-```html
-<syn-combobox max-options-visible="3" size="medium" placement="bottom" form="">
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-0"
-    >Option 1</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-1"
-    >Option 2</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-2"
-    >Option 3</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Labels
-
-Use the label attribute to give the combobox an accessible label. For labels that contain HTML, use the label slot instead.
-
-```html
-<syn-combobox label="State" size="medium" placement="bottom" form="">
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-0"
-    >Option 1</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-1"
-    >Option 2</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-2"
-    >Option 3</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Help Text
-
-Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.The help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.
-
-```html
-<syn-combobox
-  label="State"
-  help-text="Select a State"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-0"
-    >Option 1</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-1"
-    >Option 2</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-2"
-    >Option 3</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Placeholder
-
-Use the placeholder attribute to add a placeholder.
-
-```html
-<syn-combobox
-  label="State"
-  help-text="Select a State"
-  placeholder="Select a State"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-0"
-    >Option 1</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-1"
-    >Option 2</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-2"
-    >Option 3</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Focus
-
-The focus attribute provides feedback to the users, informing them that the combobox component is ready for use.
-
-```html
-<div style="padding: 5px">
-  <syn-combobox size="medium" placement="bottom" form="">
-    <syn-option
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      value=""
-      id="syn-combobox-option-0"
-      >Option 1</syn-option
-    >
-    <syn-option
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      value=""
-      id="syn-combobox-option-1"
-      >Option 2</syn-option
-    >
-    <syn-option
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      value=""
-      id="syn-combobox-option-2"
-      >Option 3</syn-option
-    >
-  </syn-combobox>
-</div>
-```
-
----
-
-## Clearable
-
-Add the clearable attribute to add a clear button when the combobox has content.
-
-```html
-<syn-combobox
-  value="Green"
-  clearable=""
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    hidden=""
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    hidden=""
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    hidden=""
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    hidden=""
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    hidden=""
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    hidden=""
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    hidden=""
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    hidden=""
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    hidden=""
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    hidden=""
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    hidden=""
-    >Yellow</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Disabled
-
-Use the disabled attribute to disable a combobox.
-
-```html
-<syn-combobox
-  disabled=""
-  placeholder="Disabled"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Readonly
-
-Add the readonly attribute to draw a read-only combobox.
-
-```html
-<div
-  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
->
-  <syn-combobox
-    placeholder="Readonly"
-    value="option-1"
-    readonly=""
-    size="medium"
-    placement="bottom"
-    form=""
-  >
-    <syn-icon
-      name="wallpaper"
-      slot="prefix"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <syn-option
-      value="option-1"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-0"
-      >Option 1</syn-option
-    >
-    <syn-option
-      value="option-2"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-1"
-      hidden=""
-      >Option 2</syn-option
-    >
-    <syn-option
-      value="option-3"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-2"
-      hidden=""
-      >Option 3</syn-option
-    >
-  </syn-combobox>
-  <syn-combobox
-    max-options-visible="2"
-    multiple=""
-    placeholder="Readonly"
-    value="option-1 option-2 option-3"
-    readonly=""
-    size="medium"
-    placement="bottom"
-    form=""
-  >
-    <syn-option
-      value="option-1"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-0"
-      hidden=""
-      >Option 1</syn-option
-    >
-    <syn-option
-      value="option-2"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-1"
-      hidden=""
-      >Option 2</syn-option
-    >
-    <syn-option
-      value="option-3"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-2"
-      hidden=""
-      >Option 3</syn-option
-    >
-  </syn-combobox>
-</div>
-```
-
----
-
-## Multiple
-
-To allow multiple options to be selected, use the multiple attribute. It’s a good practice to use clearable when this option is enabled. To set multiple values at once, set value to a space-delimited list of values. Use the max-options-visible attribute to define the maximum number of selected options that will be visible. After the maximum, "+n" will be shown to indicate the number of additional items that are selected.
-
-```html
-<syn-combobox
-  value="option-1 option-2 option-3"
-  multiple=""
-  clearable=""
-  max-options-visible="2"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="option-1"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Option 1</syn-option
-  >
-  <syn-option
-    value="option-2"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Option 2</syn-option
-  >
-  <syn-option
-    value="option-3"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Option 3</syn-option
-  >
-  <syn-option
-    value="option-4"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Option 4</syn-option
-  >
-  <syn-option
-    value="option-5"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Option 5</syn-option
-  >
-  <syn-option
-    value="option-6"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Option 6</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Setting Initial Value
-
-Use the value attribute to set the initial selection.When using multiple, the value attribute uses space-delimited values to select more than one option. Because of this, <syn-option> values cannot contain spaces. If you’re accessing the value property through Javascript, it will be an array.
-
-```html
-<syn-combobox
-  value="option-1 option-2 option-3"
-  multiple=""
-  clearable=""
-  max-options-visible="2"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="option-1"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Option 1</syn-option
-  >
-  <syn-option
-    value="option-2"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Option 2</syn-option
-  >
-  <syn-option
-    value="option-3"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Option 3</syn-option
-  >
-  <syn-option
-    value="option-4"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Option 4</syn-option
-  >
-  <syn-option
-    value="option-5"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Option 5</syn-option
-  >
-  <syn-option
-    value="option-6"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Option 6</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Restricted
-
-This restricts the combobox to only allow selections from the available options. Users cannot enter custom values that are not in the list.
-
-```html
-<syn-combobox
-  value="Option 1"
-  restricted=""
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="option-1"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Option 1</syn-option
-  >
-  <syn-option
-    value="option-2"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    hidden=""
-    >Option 2</syn-option
-  >
-  <syn-option
-    value="option-3"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    hidden=""
-    >Option 3</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## No Results Found
-
-A “No results found” message is displayed, when the search term doesn’t match the options.
-
-```html
-<syn-combobox
-  id="no-results"
-  value="Search term"
-  restricted=""
-  size="medium"
-  placement="bottom"
-  form=""
-  open=""
->
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-0"
-    hidden=""
-    >Option 1</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-1"
-    hidden=""
-    >Option 2</syn-option
-  >
-  <syn-option
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    value=""
-    id="syn-combobox-option-2"
-    hidden=""
-    >Option 3</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Sizes
-
-Use the size attribute to change a combobox size.
-
-```html
-<syn-combobox size="small" placeholder="Small" placement="bottom" form="">
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-
-<br />
-
-<syn-combobox size="medium" placeholder="Medium" placement="bottom" form="">
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-
-<br />
-
-<syn-combobox size="large" placeholder="Large" placement="bottom" form="">
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Invalid
-
-The invalid status is used to warn the user that the combobox is invalid. For example, if the entry is mandatory.
-
-```html
-<form class="custom-validity">
-  <syn-combobox
-    required=""
-    placeholder="Type something"
-    help-text="This is required"
-    size="medium"
-    placement="bottom"
-    form=""
-  >
-    <syn-option
-      value="Black"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-0"
-      >Black</syn-option
-    >
-    <syn-option
-      value="Blue"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-1"
-      >Blue</syn-option
-    >
-    <syn-option
-      value="Brown"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-2"
-      >Brown</syn-option
-    >
-    <syn-option
-      value="Green"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-3"
-      >Green</syn-option
-    >
-    <syn-option
-      value="Grey"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-4"
-      >Grey</syn-option
-    >
-    <syn-option
-      value="Light_Green"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-5"
-      >Light Green</syn-option
-    >
-    <syn-option
-      value="Magenta"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-6"
-      >Magenta</syn-option
-    >
-    <syn-option
-      value="Orange"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-7"
-      >Orange</syn-option
-    >
-    <syn-option
-      value="Pink"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-8"
-      >Pink</syn-option
-    >
-    <syn-option
-      value="Purple"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-9"
-      >Purple</syn-option
-    >
-    <syn-option
-      value="Red"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-10"
-      >Red</syn-option
-    >
-    <syn-option
-      value="White"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-11"
-      >White</syn-option
-    >
-    <syn-option
-      value="Yellow"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-12"
-      >Yellow</syn-option
-    >
-  </syn-combobox>
-  <syn-button type="submit" variant="filled" title="" size="medium"
-    >Submit</syn-button
-  >
-</form>
-<style>
-  .custom-validity {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  syn-button {
-    align-self: flex-start;
-  }
-</style>
-```
-
----
-
-## Prefix Suffix Text And Icons
-
-Use the prefix and suffix slots to add text and icons.
-
-```html
-<syn-combobox
-  placeholder="Small"
-  size="small"
-  clearable=""
-  placement="bottom"
-  form=""
->
-  <span slot="prefix">prefix</span>
-  <span slot="suffix">suffix</span>
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-<br />
-<syn-combobox
-  placeholder="Medium"
-  size="medium"
-  clearable=""
-  placement="bottom"
-  form=""
->
-  <span slot="prefix">prefix</span>
-  <span slot="suffix">suffix</span>
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-<br />
-<syn-combobox
-  placeholder="Large"
-  size="large"
-  clearable=""
-  placement="bottom"
-  form=""
->
-  <span slot="prefix">prefix</span>
-  <span slot="suffix">suffix</span>
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-
-<br />
-
-<syn-combobox
-  placeholder="Small"
-  size="small"
-  clearable=""
-  placement="bottom"
-  form=""
->
-  <syn-icon
-    name="wallpaper"
-    slot="prefix"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-  <syn-icon
-    name="wallpaper"
-    slot="suffix"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-</syn-combobox>
-<br />
-<syn-combobox
-  placeholder="Medium"
-  size="medium"
-  clearable=""
-  placement="bottom"
-  form=""
->
-  <syn-icon
-    name="wallpaper"
-    slot="prefix"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-  <syn-icon
-    name="wallpaper"
-    slot="suffix"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-</syn-combobox>
-<br />
-<syn-combobox
-  placeholder="Large"
-  size="large"
-  clearable=""
-  placement="bottom"
-  form=""
->
-  <syn-icon
-    name="wallpaper"
-    slot="prefix"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-  <syn-icon
-    name="wallpaper"
-    slot="suffix"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-</syn-combobox>
-```
-
----
-
-## Simple Suggests
-
-A simple suggestions list shows the user a filtered list.
-
-```html
-<syn-combobox
-  label="Preferred Color"
-  value="g"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    hidden=""
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    hidden=""
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    hidden=""
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    hidden=""
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    hidden=""
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    hidden=""
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    hidden=""
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    hidden=""
-    >Yellow</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Highlight Query
-
-The filtered options shown in the list can be customized by passing a function to the getOption property. Your function can return a string of HTML, a Lit Template, or an HTMLElement. The getOption() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.Remember that the options are rendered in a shadow root. To style them, you can use the style attribute in your template or you can add your own parts and target them with the ::part() selector. Note: Be sure you trust the content you are outputting! Passing unsanitized user input to getOption() can result in XSS vulnerabilities.
-
-```html
-<syn-combobox
-  label="Preferred color"
-  class="highlight-combobox"
-  value="g"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    hidden=""
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    hidden=""
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    hidden=""
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    ><mark class="syn-highlight-style">G</mark>reen</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    ><mark class="syn-highlight-style">G</mark>rey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Li<mark class="syn-highlight-style">g</mark>ht Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Ma<mark class="syn-highlight-style">g</mark>enta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Oran<mark class="syn-highlight-style">g</mark>e</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    hidden=""
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    hidden=""
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    hidden=""
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    hidden=""
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    hidden=""
-    >Yellow</syn-option
-  >
-</syn-combobox>
-```
-
----
-
-## Grouping Query
-
-Use <syn-optgroup> to group <syn-option>`s visually.
-
-```html
-<syn-combobox
-  label="Group elements"
-  value="g"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-optgroup label="B" id="syn-combobox-optgroup-0" hidden="">
-    <syn-option
-      value="Black"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-0"
-      hidden=""
-      >Black</syn-option
-    >
-    <syn-option
-      value="Blue"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-1"
-      hidden=""
-      >Blue</syn-option
-    >
-    <syn-option
-      value="Brown"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-2"
-      hidden=""
-      >Brown</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup
-    label="G"
-    id="syn-combobox-optgroup-1"
-    style="--display-divider: none"
-  >
-    <syn-option
-      value="Green"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-3"
-      >Green</syn-option
-    >
-    <syn-option
-      value="Grey"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-4"
-      >Grey</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="L" id="syn-combobox-optgroup-2">
-    <syn-option
-      value="Light_Green"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-5"
-      >Light Green</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="M" id="syn-combobox-optgroup-3">
-    <syn-option
-      value="Magenta"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-6"
-      >Magenta</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="O" id="syn-combobox-optgroup-4">
-    <syn-option
-      value="Orange"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-7"
-      >Orange</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="W" id="syn-combobox-optgroup-5" hidden="">
-    <syn-option
-      value="White"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-8"
-      hidden=""
-      >White</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="P" id="syn-combobox-optgroup-6" hidden="">
-    <syn-option
-      value="Pink"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-9"
-      hidden=""
-      >Pink</syn-option
-    >
-    <syn-option
-      value="Purple"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-10"
-      hidden=""
-      >Purple</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="R" id="syn-combobox-optgroup-7" hidden="">
-    <syn-option
-      value="Red"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-11"
-      hidden=""
-      >Red</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="W" id="syn-combobox-optgroup-8" hidden="">
-    <syn-option
-      value="White"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-12"
-      hidden=""
-      >White</syn-option
-    >
-  </syn-optgroup>
-  <syn-optgroup label="Y" id="syn-combobox-optgroup-9" hidden="">
-    <syn-option
-      value="Yellow"
-      role="option"
-      aria-selected="false"
-      aria-disabled="false"
-      id="syn-combobox-option-13"
-      hidden=""
-      >Yellow</syn-option
-    >
-  </syn-optgroup>
-</syn-combobox>
-```
-
----
-
-## Suggestion Container Height
-
-The height of the filtered options list can be customized by setting the max-height on the listbox part of the combobox.
-
-```html
-<syn-combobox
-  id="max-height"
-  label="Preferred color"
-  value="g"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    hidden=""
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    hidden=""
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    hidden=""
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    hidden=""
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    hidden=""
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    hidden=""
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    hidden=""
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    hidden=""
-    >Yellow</syn-option
-  >
-</syn-combobox>
-<style>
-  #max-height::part(listbox) {
-    /* if there is not enough space for the desired height, use the available calculated height */
-    max-height: min(var(--auto-size-available-height), 112px);
-  }
-</style>
-```
-
----
-
-## Custom Filter
-
-A custom filter can be applied by passing a filter function to the filter property. This filter() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.
-
-```html
-<syn-combobox
-  label="Custom Filter"
-  class="filter-combobox"
-  size="medium"
-  placement="bottom"
-  form=""
->
-  <syn-option
-    value="Black"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-0"
-    >Black</syn-option
-  >
-  <syn-option
-    value="Blue"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-1"
-    >Blue</syn-option
-  >
-  <syn-option
-    value="Brown"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-2"
-    >Brown</syn-option
-  >
-  <syn-option
-    value="Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-3"
-    >Green</syn-option
-  >
-  <syn-option
-    value="Grey"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-4"
-    >Grey</syn-option
-  >
-  <syn-option
-    value="Light_Green"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-5"
-    >Light Green</syn-option
-  >
-  <syn-option
-    value="Magenta"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-6"
-    >Magenta</syn-option
-  >
-  <syn-option
-    value="Orange"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-7"
-    >Orange</syn-option
-  >
-  <syn-option
-    value="Pink"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-8"
-    >Pink</syn-option
-  >
-  <syn-option
-    value="Purple"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-9"
-    >Purple</syn-option
-  >
-  <syn-option
-    value="Red"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-10"
-    >Red</syn-option
-  >
-  <syn-option
-    value="White"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-11"
-    >White</syn-option
-  >
-  <syn-option
-    value="Yellow"
-    role="option"
-    aria-selected="false"
-    aria-disabled="false"
-    id="syn-combobox-option-12"
-    >Yellow</syn-option
-  >
-</syn-combobox>
-```