{"id":21294130,"url":"https://github.com/alaskaairlines/auro-combobox","last_synced_at":"2025-07-11T16:33:01.396Z","repository":{"id":37261731,"uuid":"455020283","full_name":"AlaskaAirlines/auro-combobox","owner":"AlaskaAirlines","description":"An auroLabs custom element w/an experimental API. You've been warned.","archived":false,"fork":false,"pushed_at":"2024-10-24T16:55:53.000Z","size":3044,"stargazers_count":4,"open_issues_count":9,"forks_count":1,"subscribers_count":10,"default_branch":"main","last_synced_at":"2024-10-24T21:15:24.444Z","etag":null,"topics":["auro-labs","custom-element","design-system","wcgen-v3-16-0"],"latest_commit_sha":null,"homepage":"https://auro.alaskaair.com/components/auroLabs","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":"2022-02-03T03:43:46.000Z","updated_at":"2024-10-24T16:55:55.000Z","dependencies_parsed_at":"2023-02-19T13:15:31.984Z","dependency_job_id":"ac2d06fc-afa7-42ae-83c9-09df38d58702","html_url":"https://github.com/AlaskaAirlines/auro-combobox","commit_stats":{"total_commits":122,"total_committers":5,"mean_commits":24.4,"dds":0.3688524590163934,"last_synced_commit":"51a3191a132d41abfd411cda9d2249789ae1f3b1"},"previous_names":["alaskaairlines/auro-suggest"],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-combobox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-combobox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-combobox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-combobox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlaskaAirlines","download_url":"https://codeload.github.com/AlaskaAirlines/auro-combobox/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-labs","custom-element","design-system","wcgen-v3-16-0"],"created_at":"2024-11-21T13:57:55.227Z","updated_at":"2025-07-11T16:33:01.389Z","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# Combobox (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\n`\u003cauro-combobox\u003e` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.\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-combobox/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-combobox/actions/workflows/testPublish.yml)\n[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-combobox?style=for-the-badge\u0026color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-combobox)\n[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-combobox?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-combobox\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-combobox\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-combobox\";\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-combobox\u003e\n  \u003cspan slot=\"label\"\u003eName\u003c/span\u003e\n  \u003cauro-menu\u003e\n    \u003cauro-menuoption value=\"Apples\" id=\"option-0\"\u003eApples\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Oranges\" id=\"option-1\"\u003eOranges\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Peaches\" id=\"option-2\"\u003ePeaches\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Grapes\" id=\"option-3\"\u003eGrapes\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Cherries\" id=\"option-4\"\u003eCherries\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption static nomatch\u003eNo matching option\u003c/auro-menuoption\u003e\n  \u003c/auro-menu\u003e\n\u003c/auro-combobox\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-combobox__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-combobox@2.2.5/dist/auro-combobox__bundled.js\" type=\"module\"\u003e\u003c/script\u003e\r\n```\r\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## auro-combobox 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 `\u003cauro-combobox\u003e` element should be used in situations where users may:\n\n* Search\n  * Airports: user looks for a specific airport by searching for the city name or airport code\n  * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results\n* Filter\n  * Options: user chooses filters for their search by using combobox\n* Select\n  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## API Code Examples\r\n\r\n### Default auro-combobox\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-combobox\u003e\n  \u003cspan slot=\"label\"\u003eName\u003c/span\u003e\n  \u003cauro-menu\u003e\n    \u003cauro-menuoption value=\"Apples\" id=\"option-0\"\u003eApples\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Oranges\" id=\"option-1\"\u003eOranges\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Peaches\" id=\"option-2\"\u003ePeaches\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Grapes\" id=\"option-3\"\u003eGrapes\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption value=\"Cherries\" id=\"option-4\"\u003eCherries\u003c/auro-menuoption\u003e\n    \u003cauro-menuoption static nomatch\u003eNo matching option\u003c/auro-menuoption\u003e\n  \u003c/auro-menu\u003e\n\u003c/auro-combobox\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-combobox.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-combobox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaskaairlines%2Fauro-combobox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaskaairlines%2Fauro-combobox/lists"}