Alaska Airlines Pull Request

Before Submitting this pull request:

Link all tickets in this repository related to this PR in the Development section note: all pull requests require at least one linked ticket
If this PR is Ready For Review, all ticket's linked under Development must have their status changed to Ready For Review as well

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license and I have performed a self-review of my own update.

Summary by Sourcery

Integrate FloatingUI and introduce a new dropdown component as a proof of concept. The 'auro-dropdown' component is designed to be interactive and customizable, supporting various features like chevron display and event-driven visibility toggling. Additionally, a 'MySelect' component is added to demonstrate the dropdown's usage in a selectable input context. Documentation is provided to guide users on installation and usage.

New Features:

Introduce a new custom element 'auro-dropdown' that provides a dropdown component with various interactive features such as chevron display, border options, and event handling for visibility toggling.
Add 'MySelect' component that utilizes 'auro-dropdown' to create a selectable input interface with event-driven value updates.

Enhancements:

Integrate FloatingUI for positioning and managing dropdown visibility, enhancing the dropdown's responsiveness to user interactions and environmental changes.

Documentation:

Add a README.md file with detailed documentation on the new dropdown component, including installation instructions, usage examples, and development guidelines.

Reviewer's Guide by Sourcery

This pull request introduces a new auro-dropdown component, which is a customizable dropdown element for interactive content. The implementation includes the main dropdown component, a separate bib (dropdown content) component, and integration with the FloatingUI library for positioning. The PR also includes necessary styles, documentation, and example usage.

Sequence diagram for auro-dropdown interactions

sequenceDiagram
    actor User
    participant AuroDropdown
    participant AuroFloatingUI
    participant AuroDropdownBib

    User->>AuroDropdown: Click on trigger
    AuroDropdown->>AuroFloatingUI: handleClick()
    AuroFloatingUI->>AuroDropdown: showBib()
    AuroDropdown->>AuroDropdownBib: Display dropdown content
    AuroFloatingUI->>AuroDropdown: setupHideHandlers()
    User->>AuroDropdown: Click outside
    AuroFloatingUI->>AuroDropdown: hideBib()
    AuroDropdown->>AuroDropdownBib: Hide dropdown content

Class diagram for the new auro-dropdown component

classDiagram
    class AuroDropdown {
        +Boolean bordered
        +Boolean chevron
        +Boolean disabled
        +Boolean error
        +Boolean inset
        +Boolean matchWidth
        +Boolean rounded
        +Boolean noToggle
        +Boolean noHideOnThisFocusLoss
        +Boolean isPopoverVisible
        +Boolean ready
        +Number dropdownWidth
        +String placement
        +Number tabIndex
        +void privateDefaults()
        +void connectedCallback()
        +void disconnectedCallback()
        +void updated(changedProperties)
        +void firstUpdated()
        +void handleDefaultSlot()
        +render()
    }

    class AuroDropdownBib {
        +render()
    }

    class AuroFloatingUI {
        +void position()
        +void updateState()
        +void setupHideHandlers()
        +void handleUpdate(changedProperties)
        +void updateCurrentExpandedDropdown()
        +void showBib()
        +void hideBib()
        +void handleClick()
        +void handleEvent(event)
        +void handleTriggerTabIndex()
        +void configure(elem)
    }

    AuroDropdown --> AuroDropdownBib
    AuroDropdown --> AuroFloatingUI

File-Level Changes

Change	Details	Files
Implement main auro-dropdown component	Create AuroDropdown class extending LitElement Implement render method for dropdown structure Add properties for customization (e.g., bordered, chevron, disabled) Integrate with FloatingUI for positioning Implement show/hide functionality	`src/dropdown/auro-dropdown.js`
Create separate auro-dropdownBib component for dropdown content	Implement AuroDropdownBib class extending LitElement Create render method for bib content	`src/dropdown/auro-dropdownBib.js`
Implement FloatingUI integration	Create AuroFloatingUI class for handling positioning Implement methods for showing, hiding, and updating dropdown position	`src/dropdown/floatingUI.mjs`
Add styles for dropdown component	Create main styles for dropdown layout Implement color styles for different states Add token styles for customization	`src/dropdown/style.scss` `src/dropdown/color.scss` `src/dropdown/tokens.scss`
Create example select component using auro-dropdown	Implement MySelect class extending LitElement Use auro-dropdown in render method Add value property and event listener for input changes	`src/dropdown/select.js`
Update project configuration and documentation	Add README.md with component description and usage instructions Create demo/index.md for component demonstration Update index.js to export new components	`README.md` `demo/index.md` `index.js`

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

AlaskaAirlines / auro-form

feat: initial integration of floatingUI and dropdown POC #4