feat(autocomplete): add autocomplete component

[driskull]

Related Issue: #10044

Summary

• Adds calcite-autocomplete, calcite-autocomplete-item, and calcite-autocomplete-item-group
• Adds e2e tests
• Adds storybook
• Adds HTML demos
• Adds t9n strings
• Follows Figma designs
• Adds CSS tokens

Tokens

Autocomplete

--calcite-autocomplete-background-color: Specifies the background color of the component.
--calcite-autocomplete-corner-radius: Specifies the component's corner radius.
--calcite-autocomplete-text-color: Specifies the text color of the component.

--calcite-autocomplete-input-prefix-size: Specifies the Input's prefix width, when present.
--calcite-autocomplete-input-suffix-size: Specifies the Input's suffix width, when present.

--calcite-autocomplete-input-background-color: Specifies the background color of the Input.
--calcite-autocomplete-input-border-color: Specifies the border color of the Input.
--calcite-autocomplete-input-corner-radius: Specifies the corner radius of the Input.
--calcite-autocomplete-input-shadow: Specifies the shadow of the Input.

--calcite-autocomplete-input-icon-color: Specifies the icon color of the Input.
--calcite-autocomplete-input-text-color: Specifies the text color of the Input.
--calcite-autocomplete-input-placeholder-text-color: Specifies the color of placeholder text in the Input.

--calcite-autocomplete-input-actions-background-color: Specifies the background color of Input's clearable element.
--calcite-autocomplete-input-actions-background-color-hover: Specifies the background color of Input's clearable element when hovered.
--calcite-autocomplete-input-actions-background-color-press: Specifies the background color of Input's clearable element when pressed.
--calcite-autocomplete-input-actions-icon-color: Specifies the icon color of Input's clearable element.
--calcite-autocomplete-input-actions-icon-color-hover: Specifies the icon color of Input's clearable element when hovered.
--calcite-autocomplete-input-actions-icon-color-press: Specifies the icon color of Input's clearable element when pressed.

--calcite-autocomplete-input-loading-background-color: Specifies the background color of the Input's loading element, when present.
--calcite-autocomplete-input-loading-fill-color: Specifies the fill color of the Input's loading element, when present.

--calcite-autocomplete-input-prefix-background-color: Specifies the background color of the Input's prefix, when present.
--calcite-autocomplete-input-prefix-text-color: Specifies the text color of the Input's prefix, when present.

--calcite-autocomplete-input-suffix-background-color: Specifies the background color of the Input's suffix, when present.
--calcite-autocomplete-input-suffix-text-color: Specifies the text color of the Input's suffix, when present.

Autocomplete item

--calcite-autocomplete-background-color: Specifies the background color of the component.
--calcite-autocomplete-background-color-hover: Specifies the background color of the component when hovered.
--calcite-autocomplete-background-color-focus: Specifies the background color of the component when focused.
--calcite-autocomplete-description-text-color: Specifies the text color of the component's description.
--calcite-autocomplete-heading-text-color: Specifies the text color of the component's heading.
--calcite-autocomplete-text-color: Specifies the text color of the component.

Autocomplete item group

--calcite-autocomplete-background-color: Specifies the background color of the component.
--calcite-autocomplete-border-color: Specifies the border color of the component.
--calcite-autocomplete-text-color: Specifies the text color of the component.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[alisonailea]

Just a few naming schema changes needed on autocomplete-item

[ashetland]

Can we remove the bg color change onHover for disabled items?

[alisonailea]

🚀

[driskull]

Can we remove the bg color change onHover for disabled items?

Done.

I'll work on adding all the input token vars next. I think all of them are applicable.

[ashetland]

Can we remove the bg color change onHover for disabled items?

Done.

Noice. Just noticed that we also have a bg color change while focusing items. For consistency, we should remove that so the focus ring and hover styling are separate.

[driskull]

@alisonailea do we really need this var? I thought if a user could use the host to set the hover state bg color a var wasn't necessary?

[driskull]

Like:

calcite-autocomplete-item:hover{
--calcite-autocomplete-background-color: red;
}

[ashetland]

Lookin' gewd to me

[driskull]

@alisonailea added input vars and a corner radius var.

[driskull]

I removed the actions-start and actions-end slots as well.