@m3e/nav-bar 1.0.0-rc.1

package/dist/custom-elements.json

@@ -0,0 +1,532 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./NavBarElement\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./NavBarMode\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./NavItemElement\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./NavItemOrientation\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/NavBarElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "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,
+          "summary": "A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eNavBarElement",
+          "declaration": {
+            "name": "M3eNavBarElement",
+            "module": "src/NavBarElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-nav-bar",
+          "declaration": {
+            "name": "M3eNavBarElement",
+            "module": "src/NavBarElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/NavBarMode.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/NavItemElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3eNavItemElement",
+          "cssProperties": [
+            {
+              "description": "Font size for the label text.",
+              "name": "--m3e-nav-item-label-text-font-size"
+            },
+            {
+              "description": "Font weight for the label text.",
+              "name": "--m3e-nav-item-label-text-font-weight"
+            },
+            {
+              "description": "Line height for the label text.",
+              "name": "--m3e-nav-item-label-text-line-height"
+            },
+            {
+              "description": "Letter spacing for the label text.",
+              "name": "--m3e-nav-item-label-text-tracking"
+            },
+            {
+              "description": "Border radius of the nav item.",
+              "name": "--m3e-nav-item-shape"
+            },
+            {
+              "description": "Size of the icon.",
+              "name": "--m3e-nav-item-icon-size"
+            },
+            {
+              "description": "Spacing between icon and label.",
+              "name": "--m3e-nav-item-spacing"
+            },
+            {
+              "description": "Color of the label text when inactive.",
+              "name": "--m3e-nav-item-inactive-label-text-color"
+            },
+            {
+              "description": "Color of the icon when inactive.",
+              "name": "--m3e-nav-item-inactive-icon-color"
+            },
+            {
+              "description": "State layer color on hover when inactive.",
+              "name": "--m3e-nav-item-inactive-hover-state-layer-color"
+            },
+            {
+              "description": "State layer color on focus when inactive.",
+              "name": "--m3e-nav-item-inactive-focus-state-layer-color"
+            },
+            {
+              "description": "State layer color on press when inactive.",
+              "name": "--m3e-nav-item-inactive-pressed-state-layer-color"
+            },
+            {
+              "description": "Color of the label text when active/selected.",
+              "name": "--m3e-nav-item-active-label-text-color"
+            },
+            {
+              "description": "Color of the icon when active/selected.",
+              "name": "--m3e-nav-item-active-icon-color"
+            },
+            {
+              "description": "Container color when active/selected.",
+              "name": "--m3e-nav-item-active-container-color"
+            },
+            {
+              "description": "State layer color on hover when active.",
+              "name": "--m3e-nav-item-active-hover-state-layer-color"
+            },
+            {
+              "description": "State layer color on focus when active.",
+              "name": "--m3e-nav-item-active-focus-state-layer-color"
+            },
+            {
+              "description": "State layer color on press when active.",
+              "name": "--m3e-nav-item-active-pressed-state-layer-color"
+            },
+            {
+              "description": "Border radius for the focus ring.",
+              "name": "--m3e-nav-item-focus-ring-shape"
+            },
+            {
+              "description": "Color of the label text when disabled.",
+              "name": "--m3e-nav-item-disabled-label-text-color"
+            },
+            {
+              "description": "Opacity of the label text when disabled.",
+              "name": "--m3e-nav-item-disabled-label-text-opacity"
+            },
+            {
+              "description": "Color of the icon when disabled.",
+              "name": "--m3e-nav-item-disabled-icon-color"
+            },
+            {
+              "description": "Opacity of the icon when disabled.",
+              "name": "--m3e-nav-item-disabled-icon-opacity"
+            },
+            {
+              "description": "Padding for horizontal orientation.",
+              "name": "--m3e-horizontal-nav-item-padding"
+            },
+            {
+              "description": "Height of the active indicator in horizontal orientation.",
+              "name": "--m3e-horizontal-nav-item-active-indicator-height"
+            },
+            {
+              "description": "Width of the active indicator in vertical orientation.",
+              "name": "--m3e-vertical-nav-item-active-indicator-width"
+            },
+            {
+              "description": "Height of the active indicator in vertical orientation.",
+              "name": "--m3e-vertical-nav-item-active-indicator-height"
+            },
+            {
+              "description": "Margin for the active indicator in vertical orientation.",
+              "name": "--m3e-vertical-nav-item-active-indicator-margin"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the label of the item.",
+              "name": ""
+            },
+            {
+              "description": "Renders the icon of the item.",
+              "name": "icon"
+            },
+            {
+              "description": "Renders the icon of the item when selected.",
+              "name": "selected-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#clickHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_focusRing",
+              "type": {
+                "text": "M3eFocusRingElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_stateLayer",
+              "type": {
+                "text": "M3eStateLayerElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_ripple",
+              "type": {
+                "text": "M3eRippleElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "NavItemOrientation"
+              },
+              "default": "\"vertical\"",
+              "description": "The layout orientation of the item.",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "navBar",
+              "type": {
+                "text": "M3eNavBarElement | null"
+              },
+              "description": "The navigation bar to which this item belongs.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the selected state changes."
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the selected state changes."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "A value indicating whether the element is disabled.",
+              "name": "disabled"
+            },
+            {
+              "description": "A value indicating whether the element is disabled and interactive.",
+              "name": "disabled-interactive"
+            },
+            {
+              "description": "A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.",
+              "name": "download"
+            },
+            {
+              "description": "The URL to which the link button points.",
+              "name": "href"
+            },
+            {
+              "description": "The layout orientation of the item.",
+              "name": "orientation",
+              "type": {
+                "text": "NavItemOrientation"
+              },
+              "default": "\"vertical\"",
+              "fieldName": "orientation"
+            },
+            {
+              "description": "The relationship between the `target` of the link button and the document.",
+              "name": "rel"
+            },
+            {
+              "description": "A value indicating whether the element is selected.",
+              "name": "selected"
+            },
+            {
+              "description": "The target of the link button.",
+              "name": "target"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "LinkButton",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Selected",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "KeyboardClick",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Focusable",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "DisabledInteractive",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Disabled",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "AttachInternals",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-nav-item",
+          "customElement": true,
+          "summary": "An item, placed in a navigation bar or rail, used to navigate to destinations in an application."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eNavItemElement",
+          "declaration": {
+            "name": "M3eNavItemElement",
+            "module": "src/NavItemElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-nav-item",
+          "declaration": {
+            "name": "M3eNavItemElement",
+            "module": "src/NavItemElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/NavItemOrientation.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/html-custom-data.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "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": []
+    },
+    {
+      "name": "m3e-nav-item",
+      "description": "An item, placed in a navigation bar or rail, used to navigate to destinations in an application.\n---\n\n\n### **Events:**\n - **input** - Emitted when the selected state changes.\n- **change** - Emitted when the selected state changes.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders the icon of the item.\n- **selected-icon** - Renders the icon of the item when selected.\n\n### **CSS Properties:**\n - **--m3e-nav-item-label-text-font-size** - Font size for the label text. _(default: undefined)_\n- **--m3e-nav-item-label-text-font-weight** - Font weight for the label text. _(default: undefined)_\n- **--m3e-nav-item-label-text-line-height** - Line height for the label text. _(default: undefined)_\n- **--m3e-nav-item-label-text-tracking** - Letter spacing for the label text. _(default: undefined)_\n- **--m3e-nav-item-shape** - Border radius of the nav item. _(default: undefined)_\n- **--m3e-nav-item-icon-size** - Size of the icon. _(default: undefined)_\n- **--m3e-nav-item-spacing** - Spacing between icon and label. _(default: undefined)_\n- **--m3e-nav-item-inactive-label-text-color** - Color of the label text when inactive. _(default: undefined)_\n- **--m3e-nav-item-inactive-icon-color** - Color of the icon when inactive. _(default: undefined)_\n- **--m3e-nav-item-inactive-hover-state-layer-color** - State layer color on hover when inactive. _(default: undefined)_\n- **--m3e-nav-item-inactive-focus-state-layer-color** - State layer color on focus when inactive. _(default: undefined)_\n- **--m3e-nav-item-inactive-pressed-state-layer-color** - State layer color on press when inactive. _(default: undefined)_\n- **--m3e-nav-item-active-label-text-color** - Color of the label text when active/selected. _(default: undefined)_\n- **--m3e-nav-item-active-icon-color** - Color of the icon when active/selected. _(default: undefined)_\n- **--m3e-nav-item-active-container-color** - Container color when active/selected. _(default: undefined)_\n- **--m3e-nav-item-active-hover-state-layer-color** - State layer color on hover when active. _(default: undefined)_\n- **--m3e-nav-item-active-focus-state-layer-color** - State layer color on focus when active. _(default: undefined)_\n- **--m3e-nav-item-active-pressed-state-layer-color** - State layer color on press when active. _(default: undefined)_\n- **--m3e-nav-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-nav-item-disabled-label-text-color** - Color of the label text when disabled. _(default: undefined)_\n- **--m3e-nav-item-disabled-label-text-opacity** - Opacity of the label text when disabled. _(default: undefined)_\n- **--m3e-nav-item-disabled-icon-color** - Color of the icon when disabled. _(default: undefined)_\n- **--m3e-nav-item-disabled-icon-opacity** - Opacity of the icon when disabled. _(default: undefined)_\n- **--m3e-horizontal-nav-item-padding** - Padding for horizontal orientation. _(default: undefined)_\n- **--m3e-horizontal-nav-item-active-indicator-height** - Height of the active indicator in horizontal orientation. _(default: undefined)_\n- **--m3e-vertical-nav-item-active-indicator-width** - Width of the active indicator in vertical orientation. _(default: undefined)_\n- **--m3e-vertical-nav-item-active-indicator-height** - Height of the active indicator in vertical orientation. _(default: undefined)_\n- **--m3e-vertical-nav-item-active-indicator-margin** - Margin for the active indicator in vertical orientation. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "A value indicating whether the element is disabled.",
+          "values": []
+        },
+        {
+          "name": "disabled-interactive",
+          "description": "A value indicating whether the element is disabled and interactive.",
+          "values": []
+        },
+        {
+          "name": "download",
+          "description": "A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "The URL to which the link button points.",
+          "values": []
+        },
+        {
+          "name": "orientation",
+          "description": "The layout orientation of the item.",
+          "values": [{ "name": "NavItemOrientation" }]
+        },
+        {
+          "name": "rel",
+          "description": "The relationship between the `target` of the link button and the document.",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "A value indicating whether the element is selected.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "The target of the link button.",
+          "values": []
+        }
+      ],
+      "references": []
+    }
+  ]
+}