@spectrum-web-components/menu - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

		@@ -6,3 +6,18 @@ {
		},
		"version": "0.1.1",
		"repository": {
		"type": "git",
		"url": "https://github.com/adobe/spectrum-web-components.git",
		"directory": "packages/menu"
		},
		"bugs": {
		"url": "https://github.com/adobe/spectrum-web-components/issues"
		},
		"homepage": "https://adobe.github.io/spectrum-web-components/components/menu",
		"keywords": [
		"spectrum css",
		"web components",
		"lit-element",
		"lit-html"
		],
		"version": "0.1.2",
		"description": "",
		@@ -24,3 +39,3 @@ "main": "lib/index.js",
		},
		"gitHead": "90089ee7bdf89af4685f077adf15a54640c34dfa"
		"gitHead": "3d7176f688fee7746b52556ecba4df15c2342948"
		}

README.md

		@@ -56,80 +56,4 @@ ## Overview

		## Variants

		### Menu Items

		Menus are a collection of `<sp-menu-items />` that can be modified to be `disabled` or `selected`.

		<!-- prettier-ignore -->
		```html
		<sp-menu>
		<sp-menu-item>
		Active Menu Item
		</sp-menu-item>
		<sp-menu-item disabled>
		Disabled Menu Item
		</sp-menu-item>
		<sp-menu-item selected>
		Selected Menu Item
		</sp-menu-item>
		</sp-menu>
		```

		### Organization

		The content of a menu can be organized by either adding `<sp-menu-divider />` elements to a flat list, or by labeling groups of items in a longer list with a `<sp-menu-group />` element which provides a slot for a group header; `[slot="header"]`.

		<!-- prettier-ignore -->
		```html
		<sp-popover open style="position: relative">
		<sp-menu>
		<sp-menu-item>
		Menu Item 1a
		</sp-menu-item>
		<sp-menu-item>
		Menu Item 2a
		</sp-menu-item>
		<sp-menu-item>
		Menu Item 3a
		</sp-menu-item>
		<sp-menu-divider></sp-menu-divider>
		<sp-menu-item>
		Menu Item 1b
		</sp-menu-item>
		<sp-menu-item>
		Menu Item 2b
		</sp-menu-item>
		</sp-menu>
		</sp-popover>
		```

		<!-- prettier-ignore -->
		```html
		<sp-popover open style="position: relative">
		<sp-menu>
		<sp-menu-group>
		<span slot="header">New York</span>
		<sp-menu-item>
		Central Park
		</sp-menu-item>
		<sp-menu-item>
		Prospect Park
		</sp-menu-item>
		</sp-menu-group>
		<sp-menu-divider></sp-menu-divider>
		<sp-menu-group>
		<span slot="header">San Fransisco</span>
		<sp-menu-item>
		Golden Gate Park
		</sp-menu-item>
		<sp-menu-item>
		Lake Merced Park
		</sp-menu-item>
		</sp-menu-group>
		</sp-menu>
		</sp-popover>
		```

		## Accessibility

		`<sp-menu />`, `<sp-menu-group />`, and `<sp-menu-item />` each deliver a different part of the wai-aria "menu" pattern and support the `menu`, `group`, and `menuitem` roles respectively. To support ease of keyboard navigation, only the first active _or_ first selected `<sp-menu-item />` can be accessed in the tab order. Once the focus has entered the menu the up and down arrow keys can be used to access the rest of the menu.

@spectrum-web-components/menu - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics