@m3e/nav-rail 1.0.0-rc.2 → 1.0.0-rc.4

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 
@@ -35,12 +35,6 @@ This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/
 <script type="module" src="/node_modules/@m3e/nav-rail/dist/index.js"></script>
 ```
 
-You also need a module script for `@m3e/nav-bar` due to it being a dependency.
-
-```html
-<script type="module" src="/node_modules/@m3e/nav-bar/dist/index.js"></script>
-```
-
 In addition, you must use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) to include dependencies.
 
 ```html

package/dist/css-custom-data.json

@@ -46,6 +46,36 @@
       "name": "--m3e-nav-rail-expanded-icon-button-inset",
       "description": "Inset for icon buttons in expanded mode.",
       "values": []
+    },
+    {
+      "name": "--m3e-nav-bar-height",
+      "description": "Height of the navigation bar.",
+      "values": []
+    },
+    {
+      "name": "--m3e-nav-bar-container-color",
+      "description": "Background color of the navigation bar container.",
+      "values": []
+    },
+    {
+      "name": "--m3e-nav-bar-vertical-item-width",
+      "description": "Minimum width of vertical nav items.",
+      "values": []
+    },
+    {
+      "name": "--m3e-nav-bar-height",
+      "description": "Height of the navigation bar.",
+      "values": []
+    },
+    {
+      "name": "--m3e-nav-bar-container-color",
+      "description": "Background color of the navigation bar container.",
+      "values": []
+    },
+    {
+      "name": "--m3e-nav-bar-vertical-item-width",
+      "description": "Minimum width of vertical nav items.",
+      "values": []
     }
   ],
   "pseudoElements": []

package/dist/custom-elements.json

@@ -69,6 +69,30 @@
             {
               "description": "Inset for icon buttons in expanded mode.",
               "name": "--m3e-nav-rail-expanded-icon-button-inset"
+            },
+            {
+              "description": "Height of the navigation bar.",
+              "name": "--m3e-nav-bar-height",
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            },
+            {
+              "description": "Background color of the navigation bar container.",
+              "name": "--m3e-nav-bar-container-color",
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            },
+            {
+              "description": "Minimum width of vertical nav items.",
+              "name": "--m3e-nav-bar-vertical-item-width",
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
             }
           ],
           "members": [
@@ -100,18 +124,123 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "NavBarMode"
+              },
+              "default": "\"compact\"",
+              "description": "The mode in which items in the bar are presented.",
+              "attribute": "mode",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "readonly M3eNavItemElement[]"
+              },
+              "description": "The items of the bar.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "M3eNavItemElement | null"
+              },
+              "description": "The selected item.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "currentMode",
+              "type": {
+                "text": "Exclude<NavBarMode, \"auto\">"
+              },
+              "description": "The current mode applied to the bar.",
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
             }
           ],
           "events": [
             {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
               "description": "Emitted when the selected state of an item changes.",
-              "name": "change"
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
             }
           ],
           "attributes": [
             {
               "description": "The mode in which items in the rail are presented.",
-              "name": "mode"
+              "name": "mode",
+              "type": {
+                "text": "NavBarMode"
+              },
+              "default": "\"compact\"",
+              "fieldName": "mode",
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
             }
           ],
           "superclass": {
@@ -119,7 +248,17 @@
             "package": "@m3e/nav-bar"
           },
           "tagName": "m3e-nav-rail",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Renders the items of the bar.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "M3eNavBarElement",
+                "module": "../nav-bar/src/NavBarElement.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -223,7 +362,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
               }
             },
@@ -326,6 +465,154 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "../nav-bar/src/NavBarElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.",
+          "name": "M3eNavBarElement",
+          "cssProperties": [
+            {
+              "description": "Height of the navigation bar.",
+              "name": "--m3e-nav-bar-height"
+            },
+            {
+              "description": "Background color of the navigation bar container.",
+              "name": "--m3e-nav-bar-container-color"
+            },
+            {
+              "description": "Minimum width of vertical nav items.",
+              "name": "--m3e-nav-bar-vertical-item-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the items of the bar.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "NavBarMode"
+              },
+              "default": "\"compact\"",
+              "description": "The mode in which items in the bar are presented.",
+              "attribute": "mode",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "readonly M3eNavItemElement[]"
+              },
+              "description": "The items of the bar.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "M3eNavItemElement | null"
+              },
+              "description": "The selected item.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "currentMode",
+              "type": {
+                "text": "Exclude<NavBarMode, \"auto\">"
+              },
+              "description": "The current mode applied to the bar."
+            },
+            {
+              "kind": "method",
+              "name": "#handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the selected state of an item changes."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "The mode in which items in the bar are presented.",
+              "name": "mode",
+              "type": {
+                "text": "NavBarMode"
+              },
+              "default": "\"compact\"",
+              "fieldName": "mode"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-nav-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eNavBarElement",
+          "declaration": {
+            "name": "M3eNavBarElement",
+            "module": "../nav-bar/src/NavBarElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-nav-bar",
+          "declaration": {
+            "name": "M3eNavBarElement",
+            "module": "../nav-bar/src/NavBarElement.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/AttachInternals.ts",
@@ -1180,25 +1467,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -1496,6 +1764,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2032,6 +2311,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -2081,16 +2365,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -2105,6 +2379,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/html-custom-data.json

@@ -4,12 +4,12 @@
   "tags": [
     {
       "name": "m3e-nav-rail",
-      "description": "A vertical bar, typically used on larger devices, that allows a user to switch between views.\n---\n\n\n### **Events:**\n - **change** - Emitted when the selected state of an item changes.\n\n### **CSS Properties:**\n - **--m3e-nav-rail-top-space** - Top block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-bottom-space** - Bottom block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-compact-width** - Width of the nav rail in compact mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-inline-padding** - Inline padding for expanded nav rail. _(default: undefined)_\n- **--m3e-nav-rail-expanded-min-width** - Minimum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-max-width** - Maximum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-item-height** - Height of nav items in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-button-item-space** - Space below icon buttons and FABs. _(default: undefined)_\n- **--m3e-nav-rail-expanded-icon-button-inset** - Inset for icon buttons in expanded mode. _(default: undefined)_",
+      "description": "A vertical bar, typically used on larger devices, that allows a user to switch between views.\n---\n\n\n### **Events:**\n - **change** - Emitted when the selected state of an item changes.\n\n### **Slots:**\n - _default_ - Renders the items of the bar.\n\n### **CSS Properties:**\n - **--m3e-nav-rail-top-space** - Top block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-bottom-space** - Bottom block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-compact-width** - Width of the nav rail in compact mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-inline-padding** - Inline padding for expanded nav rail. _(default: undefined)_\n- **--m3e-nav-rail-expanded-min-width** - Minimum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-max-width** - Maximum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-item-height** - Height of nav items in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-button-item-space** - Space below icon buttons and FABs. _(default: undefined)_\n- **--m3e-nav-rail-expanded-icon-button-inset** - Inset for icon buttons in expanded mode. _(default: undefined)_\n- **--m3e-nav-bar-height** - Height of the navigation bar. _(default: undefined)_\n- **--m3e-nav-bar-container-color** - Background color of the navigation bar container. _(default: undefined)_\n- **--m3e-nav-bar-vertical-item-width** - Minimum width of vertical nav items. _(default: undefined)_",
       "attributes": [
         {
           "name": "mode",
           "description": "The mode in which items in the rail are presented.",
-          "values": []
+          "values": [{ "name": "NavBarMode" }]
         }
       ],
       "references": []
@@ -25,6 +25,18 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "m3e-nav-bar",
+      "description": "A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.\n---\n\n\n### **Events:**\n - **change** - Emitted when the selected state of an item changes.\n\n### **Slots:**\n - _default_ - Renders the items of the bar.\n\n### **CSS Properties:**\n - **--m3e-nav-bar-height** - Height of the navigation bar. _(default: undefined)_\n- **--m3e-nav-bar-container-color** - Background color of the navigation bar container. _(default: undefined)_\n- **--m3e-nav-bar-vertical-item-width** - Minimum width of vertical nav items. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "mode",
+          "description": "The mode in which items in the bar are presented.",
+          "values": [{ "name": "NavBarMode" }]
+        }
+      ],
+      "references": []
     }
   ]
 }

package/dist/index.js

@@ -5,7 +5,7 @@
  */
 import { css, LitElement, html } from 'lit';
 import { DesignToken, HtmlFor, MutationController } from '@m3e/core';
-import { RovingTabIndexManager, selectionManager, M3eInteractivityChecker } from '@m3e/core/a11y';
+import { RovingTabIndexManager, selectionManager, M3eInteractivityChecker, addAriaReferencedId, removeAriaReferencedId } from '@m3e/core/a11y';
 import { M3eNavBarElement } from '@m3e/nav-bar';
 
 /******************************************************************************
@@ -255,6 +255,9 @@ let M3eNavRailToggleElement = class M3eNavRailToggleElement extends HtmlFor(LitE
         if (control instanceof M3eNavRailElement) {
             __classPrivateFieldGet(this, _M3eNavRailToggleElement_mutationController, "f").observe(control);
         }
+        if (this.htmlFor && this.parentElement) {
+            addAriaReferencedId(this.parentElement, "aria-controls", this.htmlFor);
+        }
         super.attach(control);
         __classPrivateFieldGet(this, _M3eNavRailToggleElement_instances, "m", _M3eNavRailToggleElement_updateToggle).call(this);
     }
@@ -263,7 +266,12 @@ let M3eNavRailToggleElement = class M3eNavRailToggleElement extends HtmlFor(LitE
         for (const target of __classPrivateFieldGet(this, _M3eNavRailToggleElement_mutationController, "f").targets) {
             __classPrivateFieldGet(this, _M3eNavRailToggleElement_mutationController, "f").unobserve(target);
         }
-        __classPrivateFieldGet(this, _M3eNavRailToggleElement_instances, "m", _M3eNavRailToggleElement_updateToggle).call(this);
+        if (this.parentElement) {
+            if (this.htmlFor) {
+                removeAriaReferencedId(this.parentElement, "aria-controls", this.htmlFor);
+            }
+            this.parentElement.ariaExpanded = null;
+        }
         super.detach();
     }
     /** @inheritdoc */
@@ -279,9 +287,20 @@ _M3eNavRailToggleElement_handleClick = function _M3eNavRailToggleElement_handleC
         this.control.currentMode = this.control.currentMode === "compact" ? "expanded" : "compact";
     }
 };
-_M3eNavRailToggleElement_updateToggle = function _M3eNavRailToggleElement_updateToggle() {
-    if (this.parentElement?.hasAttribute("toggle")) {
-        this.parentElement.toggleAttribute("selected", this.control instanceof M3eNavRailElement && this.control.currentMode === "expanded");
+_M3eNavRailToggleElement_updateToggle = 
+/** @private */
+async function _M3eNavRailToggleElement_updateToggle() {
+    if (!this.parentElement)
+        return;
+    const selected = this.control instanceof M3eNavRailElement && this.control.currentMode === "expanded";
+    this.parentElement.ariaExpanded = `${selected}`;
+    if (this.parentElement.hasAttribute("toggle")) {
+        this.parentElement.toggleAttribute("selected", selected);
+    }
+    if (this.parentElement instanceof LitElement) {
+        // Wait for update and remove aria-pressed due to use of aria-expanded.
+        await this.parentElement.updateComplete;
+        this.parentElement.ariaPressed = null;
     }
 };
 /** The styles of the element. */