@m3e/app-bar 1.0.0-rc.1

package/dist/custom-elements.json

@@ -0,0 +1,598 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/AppBarElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3eAppBarElement",
+          "cssProperties": [
+            {
+              "description": "Background color of the app bar container.",
+              "name": "--m3e-app-bar-container-color"
+            },
+            {
+              "description": "Background color of the app bar container when scrolled.",
+              "name": "--m3e-app-bar-container-color-on-scroll"
+            },
+            {
+              "description": "Elevation (shadow) of the app bar container.",
+              "name": "--m3e-app-bar-container-elevation"
+            },
+            {
+              "description": "Elevation (shadow) of the app bar container when scrolled.",
+              "name": "--m3e-app-bar-container-elevation-on-scroll"
+            },
+            {
+              "description": "Color of the app bar title text.",
+              "name": "--m3e-app-bar-title-text-color"
+            },
+            {
+              "description": "Color of the app bar subtitle text.",
+              "name": "--m3e-app-bar-subtitle-text-color"
+            },
+            {
+              "description": "Left padding for the app bar container.",
+              "name": "--m3e-app-bar-padding-left"
+            },
+            {
+              "description": "Right padding for the app bar container.",
+              "name": "--m3e-app-bar-padding-right"
+            },
+            {
+              "description": "Height of the small app bar container.",
+              "name": "--m3e-app-bar-small-container-height"
+            },
+            {
+              "description": "Font size for the small app bar title text.",
+              "name": "--m3e-app-bar-small-title-text-font-size"
+            },
+            {
+              "description": "Font weight for the small app bar title text.",
+              "name": "--m3e-app-bar-small-title-text-font-weight"
+            },
+            {
+              "description": "Line height for the small app bar title text.",
+              "name": "--m3e-app-bar-small-title-text-line-height"
+            },
+            {
+              "description": "Letter spacing (tracking) for the small app bar title text.",
+              "name": "--m3e-app-bar-small-subtitle-text-tracking"
+            },
+            {
+              "description": "Font size for the small app bar subtitle text.",
+              "name": "--m3e-app-bar-small-subtitle-text-font-size"
+            },
+            {
+              "description": "Font weight for the small app bar subtitle text.",
+              "name": "--m3e-app-bar-small-subtitle-text-font-weight"
+            },
+            {
+              "description": "Line height for the small app bar subtitle text.",
+              "name": "--m3e-app-bar-small-subtitle-text-line-height"
+            },
+            {
+              "description": "Letter spacing (tracking) for the small app bar subtitle text.",
+              "name": "--m3e-app-bar-small-subtitle-text-tracking"
+            },
+            {
+              "description": "Left padding for the small app bar heading.",
+              "name": "--m3e-app-bar-small-heading-padding-left"
+            },
+            {
+              "description": "Right padding for the small app bar heading.",
+              "name": "--m3e-app-bar-small-heading-padding-right"
+            },
+            {
+              "description": "Height of the medium app bar container.",
+              "name": "--m3e-app-bar-medium-container-height"
+            },
+            {
+              "description": "Height of the medium app bar container with subtitle.",
+              "name": "--m3e-app-bar-medium-container-height-with-subtitle"
+            },
+            {
+              "description": "Font size for the medium app bar title text.",
+              "name": "--m3e-app-bar-medium-title-text-font-size"
+            },
+            {
+              "description": "Font weight for the medium app bar title text.",
+              "name": "--m3e-app-bar-medium-title-text-font-weight"
+            },
+            {
+              "description": "Line height for the medium app bar title text.",
+              "name": "--m3e-app-bar-medium-title-text-line-height"
+            },
+            {
+              "description": "Letter spacing (tracking) for the medium app bar title text.",
+              "name": "--m3e-app-bar-medium-subtitle-text-tracking"
+            },
+            {
+              "description": "Font size for the medium app bar subtitle text.",
+              "name": "--m3e-app-bar-medium-subtitle-text-font-size"
+            },
+            {
+              "description": "Font weight for the medium app bar subtitle text.",
+              "name": "--m3e-app-bar-medium-subtitle-text-font-weight"
+            },
+            {
+              "description": "Line height for the medium app bar subtitle text.",
+              "name": "--m3e-app-bar-medium-subtitle-text-line-height"
+            },
+            {
+              "description": "Letter spacing (tracking) for the medium app bar subtitle text.",
+              "name": "--m3e-app-bar-medium-subtitle-text-tracking"
+            },
+            {
+              "description": "Left padding for the medium app bar heading.",
+              "name": "--m3e-app-bar-medium-heading-padding-left"
+            },
+            {
+              "description": "Right padding for the medium app bar heading.",
+              "name": "--m3e-app-bar-medium-heading-padding-right"
+            },
+            {
+              "description": "Top padding for the medium app bar.",
+              "name": "--m3e-app-bar-medium-padding-top"
+            },
+            {
+              "description": "Bottom padding for the medium app bar.",
+              "name": "--m3e-app-bar-medium-padding-bottom"
+            },
+            {
+              "description": "Maximum number of lines for the medium app bar title.",
+              "name": "--m3e-app-bar-medium-title-max-lines"
+            },
+            {
+              "description": "Maximum number of lines for the medium app bar subtitle.",
+              "name": "--m3e-app-bar-medium-subtitle-max-lines"
+            },
+            {
+              "description": "Height of the large app bar container.",
+              "name": "--m3e-app-bar-large-container-height"
+            },
+            {
+              "description": "Height of the large app bar container with subtitle.",
+              "name": "--m3e-app-bar-large-container-height-with-subtitle"
+            },
+            {
+              "description": "Font size for the large app bar title text.",
+              "name": "--m3e-app-bar-large-title-text-font-size"
+            },
+            {
+              "description": "Font weight for the large app bar title text.",
+              "name": "--m3e-app-bar-large-title-text-font-weight"
+            },
+            {
+              "description": "Line height for the large app bar title text.",
+              "name": "--m3e-app-bar-large-title-text-line-height"
+            },
+            {
+              "description": "Letter spacing (tracking) for the large app bar title text.",
+              "name": "--m3e-app-bar-large-subtitle-text-tracking"
+            },
+            {
+              "description": "Font size for the large app bar subtitle text.",
+              "name": "--m3e-app-bar-large-subtitle-text-font-size"
+            },
+            {
+              "description": "Font weight for the large app bar subtitle text.",
+              "name": "--m3e-app-bar-large-subtitle-text-font-weight"
+            },
+            {
+              "description": "Line height for the large app bar subtitle text.",
+              "name": "--m3e-app-bar-large-subtitle-text-line-height"
+            },
+            {
+              "description": "Letter spacing (tracking) for the large app bar subtitle text.",
+              "name": "--m3e-app-bar-large-subtitle-text-tracking"
+            },
+            {
+              "description": "Left padding for the large app bar heading.",
+              "name": "--m3e-app-bar-large-heading-padding-left"
+            },
+            {
+              "description": "Right padding for the large app bar heading.",
+              "name": "--m3e-app-bar-large-heading-padding-right"
+            },
+            {
+              "description": "Top padding for the large app bar.",
+              "name": "--m3e-app-bar-large-padding-top"
+            },
+            {
+              "description": "Bottom padding for the large app bar.",
+              "name": "--m3e-app-bar-large-padding-bottom"
+            },
+            {
+              "description": "Maximum number of lines for the large app bar title.",
+              "name": "--m3e-app-bar-large-title-max-lines"
+            },
+            {
+              "description": "Maximum number of lines for the large app bar subtitle.",
+              "name": "--m3e-app-bar-large-subtitle-max-lines"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders a leading icon.",
+              "name": "leading-icon"
+            },
+            {
+              "description": "Renders the subtitle.",
+              "name": "subtitle"
+            },
+            {
+              "description": "Renders the title.",
+              "name": "title"
+            },
+            {
+              "description": "Renders a trailing icon.",
+              "name": "trailing-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#scrollHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#frameLoadHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_base",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_leadingIcon",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_trailingIcon",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "centered",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the title and subtitle are centered.",
+              "attribute": "centered",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "AppBarSize"
+              },
+              "default": "\"small\"",
+              "description": "The size of the bar.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "attach",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "control",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "detach",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleTitleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleSubtitleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleLeadingIconSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleTrailingIconsSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#clearCentered",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#computeCentered",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_updateScroll",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleFrameLoad",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#getFrameScrollTop",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "frame",
+                  "type": {
+                    "text": "HTMLIFrameElement"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Whether the title and subtitle are centered.",
+              "name": "centered",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "centered"
+            },
+            {
+              "description": "The identifier of the interactive control to which this element is attached.",
+              "name": "for"
+            },
+            {
+              "description": "The size of the bar.",
+              "name": "size",
+              "type": {
+                "text": "AppBarSize"
+              },
+              "default": "\"small\"",
+              "fieldName": "size"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "HtmlFor",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-app-bar",
+          "customElement": true,
+          "summary": "A bar, placed a the top of a screen, used to help users navigate through an application."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eAppBarElement",
+          "declaration": {
+            "name": "M3eAppBarElement",
+            "module": "src/AppBarElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-app-bar",
+          "declaration": {
+            "name": "M3eAppBarElement",
+            "module": "src/AppBarElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/AppBarSize.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./AppBarElement\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./AppBarSize\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/AppBarSizeStyle.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/AppBarSizeToken.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/AppBarStyle.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/AppBarToken.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./AppBarSizeStyle\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./AppBarStyle\""
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/html-custom-data.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "m3e-app-bar",
+      "description": "A bar, placed a the top of a screen, used to help users navigate through an application.\n---\n\n\n### **Slots:**\n - **leading-icon** - Renders a leading icon.\n- **subtitle** - Renders the subtitle.\n- **title** - Renders the title.\n- **trailing-icon** - Renders a trailing icon.\n\n### **CSS Properties:**\n - **--m3e-app-bar-container-color** - Background color of the app bar container. _(default: undefined)_\n- **--m3e-app-bar-container-color-on-scroll** - Background color of the app bar container when scrolled. _(default: undefined)_\n- **--m3e-app-bar-container-elevation** - Elevation (shadow) of the app bar container. _(default: undefined)_\n- **--m3e-app-bar-container-elevation-on-scroll** - Elevation (shadow) of the app bar container when scrolled. _(default: undefined)_\n- **--m3e-app-bar-title-text-color** - Color of the app bar title text. _(default: undefined)_\n- **--m3e-app-bar-subtitle-text-color** - Color of the app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-padding-left** - Left padding for the app bar container. _(default: undefined)_\n- **--m3e-app-bar-padding-right** - Right padding for the app bar container. _(default: undefined)_\n- **--m3e-app-bar-small-container-height** - Height of the small app bar container. _(default: undefined)_\n- **--m3e-app-bar-small-title-text-font-size** - Font size for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-title-text-font-weight** - Font weight for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-title-text-line-height** - Line height for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-tracking** - Letter spacing (tracking) for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-font-size** - Font size for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-font-weight** - Font weight for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-line-height** - Line height for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-tracking** - Letter spacing (tracking) for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-heading-padding-left** - Left padding for the small app bar heading. _(default: undefined)_\n- **--m3e-app-bar-small-heading-padding-right** - Right padding for the small app bar heading. _(default: undefined)_\n- **--m3e-app-bar-medium-container-height** - Height of the medium app bar container. _(default: undefined)_\n- **--m3e-app-bar-medium-container-height-with-subtitle** - Height of the medium app bar container with subtitle. _(default: undefined)_\n- **--m3e-app-bar-medium-title-text-font-size** - Font size for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-title-text-font-weight** - Font weight for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-title-text-line-height** - Line height for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-tracking** - Letter spacing (tracking) for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-font-size** - Font size for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-font-weight** - Font weight for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-line-height** - Line height for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-tracking** - Letter spacing (tracking) for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-heading-padding-left** - Left padding for the medium app bar heading. _(default: undefined)_\n- **--m3e-app-bar-medium-heading-padding-right** - Right padding for the medium app bar heading. _(default: undefined)_\n- **--m3e-app-bar-medium-padding-top** - Top padding for the medium app bar. _(default: undefined)_\n- **--m3e-app-bar-medium-padding-bottom** - Bottom padding for the medium app bar. _(default: undefined)_\n- **--m3e-app-bar-medium-title-max-lines** - Maximum number of lines for the medium app bar title. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-max-lines** - Maximum number of lines for the medium app bar subtitle. _(default: undefined)_\n- **--m3e-app-bar-large-container-height** - Height of the large app bar container. _(default: undefined)_\n- **--m3e-app-bar-large-container-height-with-subtitle** - Height of the large app bar container with subtitle. _(default: undefined)_\n- **--m3e-app-bar-large-title-text-font-size** - Font size for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-title-text-font-weight** - Font weight for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-title-text-line-height** - Line height for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-tracking** - Letter spacing (tracking) for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-font-size** - Font size for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-font-weight** - Font weight for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-line-height** - Line height for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-tracking** - Letter spacing (tracking) for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-heading-padding-left** - Left padding for the large app bar heading. _(default: undefined)_\n- **--m3e-app-bar-large-heading-padding-right** - Right padding for the large app bar heading. _(default: undefined)_\n- **--m3e-app-bar-large-padding-top** - Top padding for the large app bar. _(default: undefined)_\n- **--m3e-app-bar-large-padding-bottom** - Bottom padding for the large app bar. _(default: undefined)_\n- **--m3e-app-bar-large-title-max-lines** - Maximum number of lines for the large app bar title. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-max-lines** - Maximum number of lines for the large app bar subtitle. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "centered",
+          "description": "Whether the title and subtitle are centered.",
+          "values": []
+        },
+        {
+          "name": "for",
+          "description": "The identifier of the interactive control to which this element is attached.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the bar.",
+          "values": [{ "name": "AppBarSize" }]
+        }
+      ],
+      "references": []
+    }
+  ]
+}