{"id":21294112,"url":"https://github.com/alaskaairlines/auro-dropdown","last_synced_at":"2025-07-11T16:32:59.810Z","repository":{"id":37062323,"uuid":"414359239","full_name":"AlaskaAirlines/auro-dropdown","owner":"AlaskaAirlines","description":"A custom element that is a trigger and dropdown element combination intended to be used with dropdown content that is interactive.","archived":false,"fork":false,"pushed_at":"2024-11-08T22:41:58.000Z","size":1957,"stargazers_count":3,"open_issues_count":7,"forks_count":0,"subscribers_count":10,"default_branch":"main","last_synced_at":"2024-11-08T23:26:58.268Z","etag":null,"topics":["auro","custom-element","design-system","generator-v3-14-0"],"latest_commit_sha":null,"homepage":"http://auro.alaskaair.com/components/auro/dropdown","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlaskaAirlines.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-06T20:23:23.000Z","updated_at":"2024-10-30T20:53:56.000Z","dependencies_parsed_at":"2023-10-11T05:17:16.688Z","dependency_job_id":"63a0bcdc-502e-48e4-bc9d-9d436162d9ee","html_url":"https://github.com/AlaskaAirlines/auro-dropdown","commit_stats":{"total_commits":158,"total_committers":10,"mean_commits":15.8,"dds":"0.36708860759493667","last_synced_commit":"4646469dc36095ea90d27f187e7a8c4d1e412888"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlaskaAirlines","download_url":"https://codeload.github.com/AlaskaAirlines/auro-dropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225741073,"owners_count":17516895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auro","custom-element","design-system","generator-v3-14-0"],"created_at":"2024-11-21T13:57:50.723Z","updated_at":"2025-07-11T16:32:59.803Z","avatar_url":"https://github.com/AlaskaAirlines.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nThe README.md file is a compiled document. No edits should be made directly to this file.\n\nREADME.md is created by running `npm run build:docs`.\n\nThis file is generated based on a template fetched from\n`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`\nand copied to `./componentDocs/README.md` each time the the docs are compiled.\n\nThe following sections are editable by making changes to the following files:\n\n| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |\n|------------------------|---------------------------------------------------|-------------------------------------|\n| Description            | Description of the component                      | `./docs/partials/description.md`    |\n| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |\n| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |\n| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |\n--\u003e\r\n\r\n# Dropdown (DEPRECATED)\n\n\u003e **WARNING:** This component is deprecated and is no longer supported. Please migrate to the new [Auro Formkit](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit) instead.\r\n\r\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/description.md --\u003e\nThe `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.\r\n\r\n_Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md --\u003e\n\u003c!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. --\u003e\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## UI development browser support\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) --\u003e\nFor the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Install\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) --\u003e\n[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-dropdown/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-dropdown/actions/workflows/testPublish.yml)\n[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-dropdown?style=for-the-badge\u0026color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-dropdown)\n[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-dropdown?color=blue\u0026style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)\n![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)\r\n\r\n```shell\n$ npm i @aurodesignsystem/auro-dropdown\n```\n\nInstalling as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Design Token CSS Custom Property dependency\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) --\u003e\nThe use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Define dependency in project component\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) --\u003e\nDefining the component dependency within each component that is using the `\u003cauro-dropdown\u003e` component.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) --\u003e\r\n\r\n```js\nimport \"@aurodesignsystem/auro-dropdown\";\n```\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n**Reference component in HTML**\n\u003c!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) --\u003e\n\u003c!-- The below code snippet is automatically added from ./apiExamples/basic.html --\u003e\r\n\r\n```html\n\u003cauro-dropdown aria-label=\"custom label\"\u003e\n  Lorem ipsum solar\n  \u003cdiv slot=\"trigger\"\u003e\n    Trigger\n  \u003c/div\u003e\n\u003c/auro-dropdown\u003e\r\n```\r\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Install bundled assets from CDN\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) --\u003e\nIn cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-dropdown__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.\n\n**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Bundle example code\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) --\u003e\r\n\r\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/auro-classic/CSSCustomProperties.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.2/dist/bundled/essentials.css\" /\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dropdown@3.2.6/dist/auro-dropdown__bundled.js\" type=\"module\"\u003e\u003c/script\u003e\r\n```\r\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## auro-dropdown use cases\n\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/useCases.md --\u003e\nThe `auro-dropdown` element should be used in situations where users may:\n\n* interact with an element to get clarification on content offering\n* provide definition to iconic imagery\n* when interactive help is required\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## API Code Examples\r\n\r\n### Default auro-dropdown\n\n\u003c!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) --\u003e\n\u003c!-- The below code snippet is automatically added from ./apiExamples/basic.html --\u003e\r\n\r\n```html\n\u003cauro-dropdown aria-label=\"custom label\"\u003e\n  Lorem ipsum solar\n  \u003cdiv slot=\"trigger\"\u003e\n    Trigger\n  \u003c/div\u003e\n\u003c/auro-dropdown\u003e\r\n```\r\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Development\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) --\u003e\nIn order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.\n\nPlease be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Start development environment\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) --\u003e\nOnce the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.\n\n```shell\n$ npm run dev\n```\n\nOpen [localhost:8000](http://localhost:8000/)\n\nIf running separate sessions is preferred, please run the following commands in individual terminal shells.\n\n```shell\n$ npm run build:watch\n\n$ npm run serve\n```\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### API generation\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) --\u003e\nThe custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Testing\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) --\u003e\nAutomated tests are required for every Auro component. See `.\\test\\auro-dropdown.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Bundled assets\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) --\u003e\nBundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaskaairlines%2Fauro-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaskaairlines%2Fauro-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaskaairlines%2Fauro-dropdown/lists"}