diff --git a/docs/api.md b/docs/api.md
index 34c6461..5dc6e71 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -16,18 +16,30 @@ The auro-menu element provides users a way to select from a list of options.
## Slots
-| Name | Description |
-|------|------------------------------------------|
-| | Open slot for insertion of menu options. |
+| Name | Description |
+|------|-------------------------------------|
+| | Slot for insertion of menu options. |
# auro-menuoption
The auro-menu element provides users a way to define a menu option.
+## Attributes
+
+| Attribute | Type | Description |
+|-----------|----------|---------------------------------------------|
+| `value` | `String` | Specifies the value to be sent to a server. |
+
## Properties
| Property | Attribute | Type | Description |
|------------|------------|-----------|--------------------------------------------------|
| `disabled` | `disabled` | `Boolean` | When true specifies that the menuoption is disabled. |
-| `selected` | `selected` | `Boolean` | When true designates the selected menuoption. This attribute is only applied via the `optionSelected` event. If manually added without the `optionSelected` event, the attribute will be removed. |
+| `selected` | `selected` | `Boolean` | Specifies that an option is selected. Attribute is applied via the `optionSelected` event for selection at page load. |
+
+## Slots
+
+| Name | Description |
+|------|--------------------------------------------------|
+| | Specifies text for an option, but is not the value. |
diff --git a/src/auro-menu.js b/src/auro-menu.js
index 71f4365..e4d7113 100644
--- a/src/auro-menu.js
+++ b/src/auro-menu.js
@@ -17,7 +17,7 @@ import "focus-visible/dist/focus-visible.min.js";
*
* @attr {Number} selectOption - Predefine selected option from menu. Index starts at 0.
* @fires optionSelected - Value for pre-selected menu option. This value may be placed on the `auro-menu` element specifically or on a outer parent element.
- * @slot Open slot for insertion of menu options.
+ * @slot Slot for insertion of menu options.
*/
class AuroMenu extends LitElement {
@@ -25,6 +25,7 @@ class AuroMenu extends LitElement {
super();
this.options = null;
+ // this.value = null;
}
static get properties() {
@@ -109,7 +110,11 @@ class AuroMenu extends LitElement {
if (parentSelectOption >= 0) {
this.selectOption = parentSelectOption;
- dispatchEventOptionSelected(this.selectOption, this.options[this.selectOption].attributes['data-value'].value, this.options[this.selectOption].innerText);
+ dispatchEventOptionSelected(
+ this.selectOption,
+ this.options[this.selectOption].value,
+ this.options[this.selectOption].innerText
+ );
}
}
}
@@ -120,7 +125,7 @@ class AuroMenu extends LitElement {
if (evt.key.toLowerCase() === ' ') {
evt.preventDefault();
}
- dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('data-value'), evt.target.innerText);
+ dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('value'), evt.target.innerText);
}
}
@@ -146,7 +151,7 @@ class AuroMenu extends LitElement {
};
// Prep each <li>. Give it an index, set its tabindex to -1, add 'keydown' and 'click' event listeners, inject a check mark icon
- const triggerEvent = (evt) => dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('data-value'), evt.target.innerText);
+ const triggerEvent = (evt) => dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('value'), evt.target.innerText);
for (let iter = 0; iter < this.options.length; iter += 1) {
diff --git a/src/auro-menuoption.js b/src/auro-menuoption.js
index 2576835..fac9dfa 100644
--- a/src/auro-menuoption.js
+++ b/src/auro-menuoption.js
@@ -11,8 +11,10 @@ import check from '@alaskaairux/icons/dist/icons/interface/check-sm_es6';
/**
* The auro-menu element provides users a way to define a menu option.
*
+ * @attr {String} value - Specifies the value to be sent to a server.
* @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - When true designates the selected menuoption. This attribute is only applied via the `optionSelected` event. If manually added without the `optionSelected` event, the attribute will be removed.
+ * @attr {Boolean} selected - Specifies that an option is selected. Attribute is applied via the `optionSelected` event for selection at page load.
+ * @slot Specifies text for an option, but is not the value.
*/
class AuroMenuOption extends LitElement {
constructor() {
diff --git a/test/auro-menu.test.js b/test/auro-menu.test.js
index 25a78bf..d86f225 100644
--- a/test/auro-menu.test.js
+++ b/test/auro-menu.test.js
@@ -113,7 +113,7 @@ describe('auro-menu', () => {
async function defaultFixture() {
return await fixture(html`
<div>
- <auro-menu><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+ <auro-menu><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
</div>
`);
}
@@ -121,7 +121,7 @@ async function defaultFixture() {
async function preSelectFixture() {
return await fixture(html`
<div>
- <auro-menu selectOption="2"><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+ <auro-menu selectOption="2"><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
</div>
`);
}
@@ -129,7 +129,7 @@ async function preSelectFixture() {
async function outerParentPreSelectFixture() {
return await fixture(html`
<div selectOption="2">
- <auro-menu><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+ <auro-menu><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
</div>
`);
}