   "dynamicPartials": {
     "dropdown": "./toolkits/global/packages/global-dropdown/view/dropdown.hbs"
 	"iconURL": "../../img/chevron-more.svg#i-chevron-more",
 	"dynamicPartials": {
 		"dropdown": "./toolkits/global/packages/global-dropdown/view/dropdown.hbs"

HISTORY.md

		# History

		## 1.0.0 (2021-10-27)
		* Update styling to use a more complete set of default variables
		* Add nature settings
		* Update demo to use svg for icon

		## 0.5.0 (2021-10-26)
		@@ -4,0 +9,0 @@ * Move consumable template to `view` and link to `demo` folder

package.json

		{
		"name": "@springernature/global-dropdown",
		"version": "0.5.0",
		"version": "1.0.0",
		"license": "MIT",
		"description": "Display a contextual list of links controlled by a toggle",
		"keywords": [],
		"author": "Springer Nature"
		"author": "Springer Nature",
		"brandContext": "16.0.0",
		"dependencies": {
		"@springernature/brand-context": "16.0.0"
		},
		"scripts": {
		"postinstall": "npm_config_registry=https://registry.npmjs.org/ npx @springernature/util-context-warning@0.0.5 -p @springernature/global-dropdown@1.0.0 -v 16.0.0"
		}
		}

README.md

		@@ -1,8 +0,41 @@
		## Global Dropdown
		# Global Dropdown

		This is a generic dropdown component. It is not a `<select>`, but rather a list which is expanded when the user clicks a button.
		Global branded dropdown

		The component is keyboard navigable.
		## CSS

		Include the SCSS in your application

		```scss
		// Pick ONE of the brands below to include
		@import '@springernature/global-dropdown/scss/10-settings/default';
		@import '@springernature/global-dropdown/scss/10-settings/nature';

		// Include this with your other components
		@import '@springernature/global-dropdown/scss/50-components/dropdown';
		```

		## Example usage

		The core experience will show a label and a list of items underneath. JavaScript and more advanced CSS options are available by using the class `.js` on the document root element.

		```html
		<div class="c-dropdown">
		<span class="c-dropdown__label">dropdown</span>
		<button class="c-dropdown__button" aria-expanded="false" data-dropdown>Dropdown
		<svg aria-hidden="true" width="10" height="10" aria-hidden="true" focusable="false">
		<use xlink:href="i-chevron-more"></use>
		</svg>
		</button>
		<ul class="c-dropdown__menu">
		<li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 1</a></li>
		<li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 2</a></li>
		<li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 3</a></li>
		</ul>
		</div>
		```

		### Enhanced dropdown

		```
		init(dropdownSelector = '[data-dropdown]', itemSelector = '[data-dropdown-item]')
		@@ -13,5 +46,1 @@ ```
		The first argument is a CSS selector to target the dropdown button. The second argument is a CSS selector to target items inside the list.

		## Dependencies
		This component relies on classes from the global-css-utilities package. Make sure you import `hiding.scss` and `transforms.scss`.

demo/dist/index.html