mbio-ui/custom-elements.json

Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

{
  "version": "experimental",
  "tags": [
    {
      "name": "mbio-icon",
      "path": "./components\\icon\\mbio-icon.ts",
      "attributes": [
        {
          "name": "icon",
          "description": "Defines the icon shown. Takes any string from the Material Design Library or custom url('') pointing to local or remote images or vectors.",
          "type": "String"
        },
        {
          "name": "size",
          "description": "If set, defines the size of the icon. Possible values are `xl`(48px) `l`(32px), `m`(24px) and `s`(16px), but css font-size can be used to set custom sizes.",
          "type": "'s'|'m'|'l'|'xl'",
          "default": "\"m\""
        },
        {
          "name": "color",
          "description": "If set, replaces the text label with a custom icon.",
          "type": "String"
        },
        {
          "name": "button",
          "description": "If set to true, updates hover, click effects and cursors.",
          "type": "Boolean"
        },
        {
          "name": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "icon",
          "attribute": "icon",
          "description": "Defines the icon shown. Takes any string from the Material Design Library or custom url('') pointing to local or remote images or vectors.",
          "type": "String"
        },
        {
          "name": "size",
          "attribute": "size",
          "description": "If set, defines the size of the icon. Possible values are `xl`(48px) `l`(32px), `m`(24px) and `s`(16px), but css font-size can be used to set custom sizes.",
          "type": "'s'|'m'|'l'|'xl'",
          "default": "\"m\""
        },
        {
          "name": "color",
          "attribute": "color",
          "description": "If set, replaces the text label with a custom icon.",
          "type": "String"
        },
        {
          "name": "button",
          "attribute": "button",
          "description": "If set to true, updates hover, click effects and cursors.",
          "type": "Boolean"
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ]
    },
    {
      "name": "mbio-card",
      "path": "./components\\card\\mbio-card.ts",
      "attributes": [
        {
          "name": "label",
          "description": "If set, defines the text label.",
          "type": "String"
        },
        {
          "name": "icon",
          "description": "If set, defines the icon shown close to the label.",
          "type": "String"
        },
        {
          "name": "image",
          "description": "If set, defines the image shown on top of the card.",
          "type": "String"
        },
        {
          "name": "flex-direction",
          "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.",
          "type": "'row'|'column'",
          "default": "\"column\""
        },
        {
          "name": "flat",
          "description": "If set, background, shadows and external padding are not shown.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "emptyHeader",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "emptyFunctions",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "emptyFooter",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "If set, defines the text label.",
          "type": "String"
        },
        {
          "name": "icon",
          "attribute": "icon",
          "description": "If set, defines the icon shown close to the label.",
          "type": "String"
        },
        {
          "name": "image",
          "attribute": "image",
          "description": "If set, defines the image shown on top of the card.",
          "type": "String"
        },
        {
          "name": "flexDirection",
          "attribute": "flex-direction",
          "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.",
          "type": "'row'|'column'",
          "default": "\"column\""
        },
        {
          "name": "flat",
          "attribute": "flat",
          "description": "If set, background, shadows and external padding are not shown.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Displayed inside the content area."
        },
        {
          "name": "header",
          "description": "Shown on top of the card, below the label (if any is set)."
        },
        {
          "name": "functions",
          "description": "Shown on the right side of the label or header slot."
        },
        {
          "name": "footer",
          "description": "Shown below the content area."
        }
      ],
      "cssProperties": [
        {
          "name": "--body-gap",
          "description": "Defines the gap between elements in the body slot."
        },
        {
          "name": "--header-gap",
          "description": "Defines the gap between elements in the header slot."
        },
        {
          "name": "--functions-gap",
          "description": "Defines the gap between elements in the functions slot."
        },
        {
          "name": "--footer-gap",
          "description": "Defines the gap between elements in the footer slot."
        }
      ]
    },
    {
      "name": "mbio-accordion",
      "path": "./components\\accordion\\mbio-accordion.ts",
      "attributes": [
        {
          "name": "label",
          "description": "Defines the text label.",
          "type": "String",
          "default": "\"Label\""
        },
        {
          "name": "icon",
          "description": "If set, defines the icon shown before the label.",
          "type": "String"
        },
        {
          "name": "expanded",
          "description": "If set to true, expands the accordion to display its content.",
          "type": "Boolean"
        },
        {
          "name": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "emptyHeader",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "emptyFunctions",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "emptyBody",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "emptyFooter",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "Defines the text label.",
          "type": "String",
          "default": "\"Label\""
        },
        {
          "name": "icon",
          "attribute": "icon",
          "description": "If set, defines the icon shown before the label.",
          "type": "String"
        },
        {
          "name": "expanded",
          "attribute": "expanded",
          "description": "If set to true, expands the accordion to display its content.",
          "type": "Boolean"
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Displayed inside the accordion when it is expanded."
        },
        {
          "name": "header",
          "description": "If used, the header slot replaces the default text label and expand arrow with custom content."
        },
        {
          "name": "functions",
          "description": "Displayed close to the 'expand' arrow."
        },
        {
          "name": "footer",
          "description": "Displayed below the content when it is expanded."
        }
      ],
      "cssProperties": [
        {
          "name": "--body-gap",
          "description": "Defines the gap between elements in the body slot."
        },
        {
          "name": "--header-gap",
          "description": "Defines the gap between elements in the header slot."
        },
        {
          "name": "--functions-gap",
          "description": "Defines the gap between elements in the functions slot."
        },
        {
          "name": "--footer-gap",
          "description": "Defines the gap between elements in the footer slot."
        }
      ]
    },
    {
      "name": "mbio-app-bar",
      "path": "./components\\app-bar\\mbio-app-bar.ts",
      "attributes": [
        {
          "name": "label",
          "description": "If set, defines the text label shown on the left side (if mobile is unset).",
          "type": "String"
        },
        {
          "name": "logo",
          "description": "If set, defines the logo shown on the left side.",
          "type": "String"
        },
        {
          "name": "mobile",
          "description": "If set, toggles the mobile variation.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "If set, defines the text label shown on the left side (if mobile is unset).",
          "type": "String"
        },
        {
          "name": "logo",
          "attribute": "logo",
          "description": "If set, defines the logo shown on the left side.",
          "type": "String"
        },
        {
          "name": "mobile",
          "attribute": "mobile",
          "description": "If set, toggles the mobile variation.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "events": [
        {
          "name": "logo-clicked",
          "description": "Fired when clicking on the logo."
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "The central content area. Used for hosting components such as Tabs."
        },
        {
          "name": "functions",
          "description": "Displayed on the right side (if mobile is unset). Used for hosting components such as Icon and Avatar."
        },
        {
          "name": "left",
          "description": "Displayed on the left side (if mobile is set to true). Used for hosting components such as Icon."
        },
        {
          "name": "right",
          "description": "Displayed on the right side (if mobile is set to true). Used for hosting components such as Icon."
        }
      ],
      "cssProperties": [
        {
          "name": "--functions-gap",
          "description": "Defines the gap between elements in the functions slot."
        }
      ]
    },
    {
      "name": "mbio-text",
      "path": "./components\\text\\mbio-text.ts",
      "attributes": [
        {
          "name": "size",
          "description": "Defines the size, line height, font family and initial color of the text. Possible values are `header-1`, `header-2`, `body-1` and `body-2`, but custom styles can be set through css.",
          "type": "'header-1'|'header-2'|'body-1'|'body-2'",
          "default": "\"body-1\""
        },
        {
          "name": "color",
          "description": "If set, overwrites the initial color of the text. Possible values are var(--text-1) (90% neutral color), var(--text-2) (60% neutral color) and var(--text-3) (20% neutral color), but any custom RGB, RGBA, HEX or color variable can be passed to the property as value as well.",
          "type": "String"
        }
      ],
      "properties": [
        {
          "name": "size",
          "attribute": "size",
          "description": "Defines the size, line height, font family and initial color of the text. Possible values are `header-1`, `header-2`, `body-1` and `body-2`, but custom styles can be set through css.",
          "type": "'header-1'|'header-2'|'body-1'|'body-2'",
          "default": "\"body-1\""
        },
        {
          "name": "color",
          "attribute": "color",
          "description": "If set, overwrites the initial color of the text. Possible values are var(--text-1) (90% neutral color), var(--text-2) (60% neutral color) and var(--text-3) (20% neutral color), but any custom RGB, RGBA, HEX or color variable can be passed to the property as value as well.",
          "type": "String"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Container where plain text (and/or other elements) is written."
        }
      ]
    },
    {
      "name": "mbio-avatar",
      "path": "./components\\avatar\\mbio-avatar.ts",
      "attributes": [
        {
          "name": "label",
          "description": "If set, defines the text label shown next to the icon/image. If the label is set and an image is not defined, the initials will be shown as a placeholder.",
          "type": "String"
        },
        {
          "name": "info",
          "description": "If set, defines the information text shown below the label.",
          "type": "String"
        },
        {
          "name": "image",
          "description": "If set, replaces the placeholder image with a custom image.",
          "type": "String"
        },
        {
          "name": "condensed",
          "description": "If set, the image is shown in a smaller size.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "If set, defines the text label shown next to the icon/image. If the label is set and an image is not defined, the initials will be shown as a placeholder.",
          "type": "String"
        },
        {
          "name": "info",
          "attribute": "info",
          "description": "If set, defines the information text shown below the label.",
          "type": "String"
        },
        {
          "name": "image",
          "attribute": "image",
          "description": "If set, replaces the placeholder image with a custom image.",
          "type": "String"
        },
        {
          "name": "condensed",
          "attribute": "condensed",
          "description": "If set, the image is shown in a smaller size.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ]
    },
    {
      "name": "mbio-badge",
      "path": "./components\\badge\\mbio-badge.ts",
      "attributes": [
        {
          "name": "label",
          "description": "If set, degines the number shown inside the badge. Numbers bigger than 3 digits are shown as 999+.",
          "type": "Number"
        },
        {
          "name": "status",
          "description": "If set, a status icon is shown inside the badge. Accepted values are `error`, `warning`, `success`.",
          "type": "'error'|'warning'|'success'|undefined"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "If set, degines the number shown inside the badge. Numbers bigger than 3 digits are shown as 999+.",
          "type": "Number"
        },
        {
          "name": "status",
          "attribute": "status",
          "description": "If set, a status icon is shown inside the badge. Accepted values are `error`, `warning`, `success`.",
          "type": "'error'|'warning'|'success'|undefined"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ]
    },
    {
      "name": "mbio-breadcrumb-item",
      "path": "./components\\breadcrumbs\\mbio-breadcrumb-item.ts",
      "attributes": [
        {
          "name": "label",
          "description": "Defines the text label.",
          "type": "String",
          "default": "\"Label\""
        },
        {
          "name": "active",
          "description": "Defines whether the item is currently active or not.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "Defines the text label.",
          "type": "String",
          "default": "\"Label\""
        },
        {
          "name": "active",
          "attribute": "active",
          "description": "Defines whether the item is currently active or not.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ]
    },
    {
      "name": "mbio-breadcrumbs",
      "path": "./components\\breadcrumbs\\mbio-breadcrumbs.ts",
      "properties": [
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "The default slot. Takes `mbio-breadcrumb-item`s as children."
        }
      ]
    },
    {
      "name": "mbio-button",
      "path": "./components\\button\\mbio-button.ts",
      "attributes": [
        {
          "name": "label",
          "description": "Defines the text label.",
          "type": "String"
        },
        {
          "name": "icon",
          "description": "If set, replaces the text label with a custom icon.",
          "type": "String"
        },
        {
          "name": "color",
          "description": "Defines the color. The possible values are `primary`, `secondary` and `tertiary`",
          "type": "'primary'|'secondary'|'tertiary'",
          "default": "\"primary\""
        },
        {
          "name": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "Defines the text label.",
          "type": "String"
        },
        {
          "name": "icon",
          "attribute": "icon",
          "description": "If set, replaces the text label with a custom icon.",
          "type": "String"
        },
        {
          "name": "color",
          "attribute": "color",
          "description": "Defines the color. The possible values are `primary`, `secondary` and `tertiary`",
          "type": "'primary'|'secondary'|'tertiary'",
          "default": "\"primary\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ]
    },
    {
      "name": "mbio-checkbox",
      "path": "./components\\checkbox\\mbio-checkbox.ts",
      "attributes": [
        {
          "name": "label",
          "description": "If set, defines the text label.",
          "type": "String"
        },
        {
          "name": "active",
          "description": "If set to true, a highlight style gets applied.",
          "type": "Boolean"
        },
        {
          "name": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "If set, defines the text label.",
          "type": "String"
        },
        {
          "name": "active",
          "attribute": "active",
          "description": "If set to true, a highlight style gets applied.",
          "type": "Boolean"
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "If set to true, disables mouse clicks and the style gets updated.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "events": [
        {
          "name": "change"
        }
      ]
    },
    {
      "name": "mbio-divider",
      "path": "./components\\divider\\mbio-divider.ts",
      "attributes": [
        {
          "name": "spacing",
          "description": "Defines the space around the divider. Possible values are `s`, `m` and `l`.",
          "type": "'s'|'m'|'l'",
          "default": "\"m\""
        },
        {
          "name": "orientation",
          "description": "Defines the orientation of the divider. Possible values are `vertical` and `horizontal`.",
          "type": "'horizontal'|'vertical'",
          "default": "\"horizontal\""
        }
      ],
      "properties": [
        {
          "name": "spacing",
          "attribute": "spacing",
          "description": "Defines the space around the divider. Possible values are `s`, `m` and `l`.",
          "type": "'s'|'m'|'l'",
          "default": "\"m\""
        },
        {
          "name": "orientation",
          "attribute": "orientation",
          "description": "Defines the orientation of the divider. Possible values are `vertical` and `horizontal`.",
          "type": "'horizontal'|'vertical'",
          "default": "\"horizontal\""
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ]
    },
    {
      "name": "mbio-empty-state",
      "path": "./components\\empty-state\\mbio-empty-state.ts",
      "attributes": [
        {
          "name": "label",
          "description": "If set, defines the text label shown under the icon.",
          "type": "String"
        },
        {
          "name": "icon",
          "description": "If set, defines the icon shown above the label.",
          "type": "String"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "If set, defines the text label shown under the icon.",
          "type": "String"
        },
        {
          "name": "icon",
          "attribute": "icon",
          "description": "If set, defines the icon shown above the label.",
          "type": "String"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "slots": [
        {
          "name": "footer",
          "description": "Displayed below the label."
        }
      ],
      "cssProperties": [
        {
          "name": "--footer-gap",
          "description": "Defines the gap between elements in the footer slot."
        }
      ]
    },
    {
      "name": "mbio-drawer",
      "path": "./components\\drawer\\mbio-drawer.ts",
      "attributes": [
        {
          "name": "label",
          "description": "If set, defines the text label.",
          "type": "String"
        },
        {
          "name": "icon",
          "description": "If set, defines the icon shown close to the label.",
          "type": "String"
        },
        {
          "name": "position",
          "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.",
          "type": "'left'|'right'|'top'|'bottom'",
          "default": "\"left\""
        },
        {
          "name": "flex-direction",
          "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.",
          "type": "'row'|'column'",
          "default": "\"column\""
        },
        {
          "name": "height",
          "description": "Defines the height of the container (not the overlay).",
          "type": "String",
          "default": "\"320px\""
        },
        {
          "name": "width",
          "description": "Defines the width of the container (not the overlay).",
          "type": "String",
          "default": "\"320px\""
        },
        {
          "name": "visible",
          "description": "If set to true, displays the component on top of the screen.",
          "type": "Boolean"
        },
        {
          "name": "sticky",
          "description": "If set to true, clicking on the background will not hide the component. The close icon will also not be displayed.",
          "type": "Boolean"
        }
      ],
      "properties": [
        {
          "name": "emptyHeader",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "emptyFunctions",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "emptyFooter",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "If set, defines the text label.",
          "type": "String"
        },
        {
          "name": "icon",
          "attribute": "icon",
          "description": "If set, defines the icon shown close to the label.",
          "type": "String"
        },
        {
          "name": "position",
          "attribute": "position",
          "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.",
          "type": "'left'|'right'|'top'|'bottom'",
          "default": "\"left\""
        },
        {
          "name": "flexDirection",
          "attribute": "flex-direction",
          "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.",
          "type": "'row'|'column'",
          "default": "\"column\""
        },
        {
          "name": "height",
          "attribute": "height",
          "description": "Defines the height of the container (not the overlay).",
          "type": "String",
          "default": "\"320px\""
        },
        {
          "name": "width",
          "attribute": "width",
          "description": "Defines the width of the container (not the overlay).",
          "type": "String",
          "default": "\"320px\""
        },
        {
          "name": "visible",
          "attribute": "visible",
          "description": "If set to true, displays the component on top of the screen.",
          "type": "Boolean"
        },
        {
          "name": "sticky",
          "attribute": "sticky",
          "description": "If set to true, clicking on the background will not hide the component. The close icon will also not be displayed.",
          "type": "Boolean"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Displayed inside the content area."
        },
        {
          "name": "header",
          "description": "If used, the header slot is shown on top of the component, below the label (if any is set)."
        },
        {
          "name": "functions",
          "description": "Shown on the right side of the label or header slot."
        },
        {
          "name": "footer",
          "description": "Shown below the content area."
        }
      ],
      "cssProperties": [
        {
          "name": "--body-gap",
          "description": "Defines the gap between elements in the body slot."
        },
        {
          "name": "--header-gap",
          "description": "Defines the gap between elements in the header slot."
        },
        {
          "name": "--functions-gap",
          "description": "Defines the gap between elements in the functions slot."
        },
        {
          "name": "--footer-gap",
          "description": "Defines the gap between elements in the footer slot."
        }
      ]
    },
    {
      "name": "mbio-grid",
      "path": "./components\\grid\\mbio-grid.ts",
      "attributes": [
        {
          "name": "columns",
          "description": "Defines how many columns the grid has.",
          "type": "Number",
          "default": "12"
        },
        {
          "name": "rows",
          "description": "If set, defines how many rows the grid has. If left undefined, the rows will be automatically populated according to the columns wrapping.",
          "type": "Number"
        },
        {
          "name": "spacing",
          "description": "Defines the gap between the elements in the grid. Possible values are `s`(8px), `m`(12px) and `l`(16px).",
          "type": "'s'|'m'|'l'",
          "default": "\"m\""
        }
      ],
      "properties": [
        {
          "name": "columns",
          "attribute": "columns",
          "description": "Defines how many columns the grid has.",
          "type": "Number",
          "default": "12"
        },
        {
          "name": "rows",
          "attribute": "rows",
          "description": "If set, defines how many rows the grid has. If left undefined, the rows will be automatically populated according to the columns wrapping.",
          "type": "Number"
        },
        {
          "name": "spacing",
          "attribute": "spacing",
          "description": "Defines the gap between the elements in the grid. Possible values are `s`(8px), `m`(12px) and `l`(16px).",
          "type": "'s'|'m'|'l'",
          "default": "\"m\""
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "The slot where the content is rendered."
        }
      ]
    },
    {
      "name": "mbio-image",
      "path": "./components\\image\\mbio-image.ts",
      "attributes": [
        {
          "name": "src",
          "description": "Defines the source image to be displayed. Must be a url (web or relative path).",
          "type": "String"
        },
        {
          "name": "alt",
          "description": "Defines the text shown in case the image cannot be loaded.",
          "type": "String"
        },
        {
          "name": "width",
          "description": "Defines the width of the image. Can take a numeric or percentual value.",
          "type": "String",
          "default": "\"100%\""
        },
        {
          "name": "height",
          "description": "Defines the height of the image. Can take a numeric or percentual value.",
          "type": "String"
        },
        {
          "name": "fit",
          "description": "Defines how the image fits to the component. Possible values are `fill`, `contain`, `cover`, `none` and `scale-down`.",
          "type": "'fill'|'contain'|'cover'|'none'|'scale-down'",
          "default": "\"contain\""
        },
        {
          "name": "legend",
          "description": "Defines the legend text.",
          "type": "String"
        },
        {
          "name": "legend-position",
          "description": "Defines the position of the legend. Possible values are `inner-top` and `inner-bottom`. If left unset, the legend is displayed underneath the image",
          "type": "'inner-top'|'inner-bottom'"
        }
      ],
      "properties": [
        {
          "name": "src",
          "attribute": "src",
          "description": "Defines the source image to be displayed. Must be a url (web or relative path).",
          "type": "String"
        },
        {
          "name": "alt",
          "attribute": "alt",
          "description": "Defines the text shown in case the image cannot be loaded.",
          "type": "String"
        },
        {
          "name": "width",
          "attribute": "width",
          "description": "Defines the width of the image. Can take a numeric or percentual value.",
          "type": "String",
          "default": "\"100%\""
        },
        {
          "name": "height",
          "attribute": "height",
          "description": "Defines the height of the image. Can take a numeric or percentual value.",
          "type": "String"
        },
        {
          "name": "fit",
          "attribute": "fit",
          "description": "Defines how the image fits to the component. Possible values are `fill`, `contain`, `cover`, `none` and `scale-down`.",
          "type": "'fill'|'contain'|'cover'|'none'|'scale-down'",
          "default": "\"contain\""
        },
        {
          "name": "legend",
          "attribute": "legend",
          "description": "Defines the legend text.",
          "type": "String"
        },
        {
          "name": "legendPosition",
          "attribute": "legend-position",
          "description": "Defines the position of the legend. Possible values are `inner-top` and `inner-bottom`. If left unset, the legend is displayed underneath the image",
          "type": "'inner-top'|'inner-bottom'"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | ShadowRoot"
        },
        {
          "name": "isUpdatePending",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod.