{
  "timestamp": "2023-01-18T20:49:55",
  "compiler": {
    "name": "@stencil/core",
    "version": "2.19.2",
    "typescriptVersion": "4.7.4"
  },
  "components": [
    {
      "filePath": "./src/components/accordion/accordion.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-accordion",
      "readme": "# bkkr-accordion\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "header - Content is placed at the top and is used to\nexpand or collapse the accordion item."
        },
        {
          "name": "slot",
          "text": "content - Content is placed below the header and is\nshown or hidden based on expanded state."
        },
        {
          "name": "part",
          "text": "header - The wrapper element for the header slot."
        },
        {
          "name": "part",
          "text": "content - The wrapper element for the content slot."
        },
        {
          "name": "part",
          "text": "expanded - The expanded element. Can be used in combination\nwith the `header` and `content` parts (i.e. `::part(header expanded)`)."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- Basic -->\n<bkkr-accordion-group>\n  <bkkr-accordion value=\"colors\">\n    <bkkr-item slot=\"header\">\n      <bkkr-label>Colors</bkkr-label>\n    </bkkr-item>\n\n    <bkkr-list slot=\"content\">\n      <bkkr-item>\n        <bkkr-label>Red</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Green</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Blue</bkkr-label>\n      </bkkr-item>\n    </bkkr-list>\n  </bkkr-accordion>\n  <bkkr-accordion value=\"shapes\">\n    <bkkr-item slot=\"header\">\n      <bkkr-label>Shapes</bkkr-label>\n    </bkkr-item>\n\n    <bkkr-list slot=\"content\">\n      <bkkr-item>\n        <bkkr-label>Circle</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Triangle</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Square</bkkr-label>\n      </bkkr-item>\n    </bkkr-list>\n  </bkkr-accordion>\n  <bkkr-accordion value=\"numbers\">\n    <bkkr-item slot=\"header\">\n      <bkkr-label>Numbers</bkkr-label>\n    </bkkr-item>\n\n    <bkkr-list slot=\"content\">\n      <bkkr-item>\n        <bkkr-label>1</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>2</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>3</bkkr-label>\n      </bkkr-item>\n    </bkkr-list>\n  </bkkr-accordion>\n</bkkr-accordion-group>\n```",
        "javascript": "```html\n<!-- Basic -->\n<bkkr-accordion-group>\n  <bkkr-accordion value=\"colors\">\n    <bkkr-item slot=\"header\">\n      <bkkr-label>Colors</bkkr-label>\n    </bkkr-item>\n\n    <bkkr-list slot=\"content\">\n      <bkkr-item>\n        <bkkr-label>Red</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Green</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Blue</bkkr-label>\n      </bkkr-item>\n    </bkkr-list>\n  </bkkr-accordion>\n  <bkkr-accordion value=\"shapes\">\n    <bkkr-item slot=\"header\">\n      <bkkr-label>Shapes</bkkr-label>\n    </bkkr-item>\n\n    <bkkr-list slot=\"content\">\n      <bkkr-item>\n        <bkkr-label>Circle</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Triangle</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>Square</bkkr-label>\n      </bkkr-item>\n    </bkkr-list>\n  </bkkr-accordion>\n  <bkkr-accordion value=\"numbers\">\n    <bkkr-item slot=\"header\">\n      <bkkr-label>Numbers</bkkr-label>\n    </bkkr-item>\n\n    <bkkr-list slot=\"content\">\n      <bkkr-item>\n        <bkkr-label>1</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>2</bkkr-label>\n      </bkkr-item>\n      <bkkr-item>\n        <bkkr-label>3</bkkr-label>\n      </bkkr-item>\n    </bkkr-list>\n  </bkkr-accordion>\n</bkkr-accordion-group>\n```"
      },
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the accordion cannot be interacted with.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "readonly",
          "type": "boolean",
          "mutable": false,
          "attr": "readonly",
          "reflectToAttr": false,
          "docs": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "toggleIcon",
          "type": "string",
          "mutable": false,
          "attr": "toggle-icon",
          "reflectToAttr": false,
          "docs": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed.",
          "docsTags": [],
          "default": "'chevron-down'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "toggleIconSlot",
          "type": "\"end\" | \"start\"",
          "mutable": false,
          "attr": "toggle-icon-slot",
          "reflectToAttr": false,
          "docs": "The slot inside of `bkkr-item` to\nplace the toggle icon. Defaults to `'end'`.",
          "docsTags": [],
          "default": "'end'",
          "values": [
            {
              "value": "end",
              "type": "string"
            },
            {
              "value": "start",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "string",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the accordion.",
          "docsTags": [],
          "default": "`bkkr-accordion-${accordionIds++}`",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "content",
          "docs": "Content is placed below the header and is\nshown or hidden based on expanded state."
        },
        {
          "name": "header",
          "docs": "Content is placed at the top and is used to\nexpand or collapse the accordion item."
        }
      ],
      "parts": [
        {
          "name": "content",
          "docs": "The wrapper element for the content slot."
        },
        {
          "name": "expanded",
          "docs": "The expanded element. Can be used in combination\nwith the `header` and `content` parts (i.e. `::part(header expanded)`)."
        },
        {
          "name": "header",
          "docs": "The wrapper element for the header slot."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-accordion": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/accordion-group/accordion-group.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-accordion-group",
      "readme": "# bkkr-accordion-group\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the accordion group cannot be interacted with.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "expand",
          "type": "\"compact\" | \"inset\"",
          "mutable": false,
          "attr": "expand",
          "reflectToAttr": false,
          "docs": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.",
          "docsTags": [],
          "default": "'compact'",
          "values": [
            {
              "value": "compact",
              "type": "string"
            },
            {
              "value": "inset",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "multiple",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "multiple",
          "reflectToAttr": false,
          "docs": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "readonly",
          "type": "boolean",
          "mutable": false,
          "attr": "readonly",
          "reflectToAttr": false,
          "docs": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "null | string | string[] | undefined",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the accordion group.",
          "docsTags": [],
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrChange",
          "detail": "AccordionGroupChangeEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value property has changed.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "keydown",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/alert/alert.tsx",
      "encapsulation": "scoped",
      "tag": "bkkr-alert",
      "readme": "# bkkr-alert\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```typescript\nimport { Component } from '@angular/core';\nimport { AlertController } from '@bkkr/angular';\n\n@Component({\n  selector: 'alert-example',\n  templateUrl: 'alert-example.html',\n  styleUrls: ['./alert-example.css'],\n})\nexport class AlertExample {\n\n  constructor(public alertController: AlertController) {}\n\n  async presentAlert() {\n    const alert = await this.alertController.create({\n      cssClass: 'my-custom-class',\n      header: 'Alert',\n      subHeader: 'Subtitle',\n      message: 'This is an alert message.',\n      buttons: ['OK']\n    });\n\n    await alert.present();\n\n    const { role } = await alert.onDidDismiss();\n    console.log('onDidDismiss resolved with role', role);\n  }\n}\n```",
        "javascript": "```js\nfunction presentAlert() {\n  const alert = document.createElement('bkkr-alert');\n  alert.cssClass = 'my-custom-class';\n  alert.header = 'Alert';\n  alert.subHeader = 'Subtitle';\n  alert.message = 'This is an alert message.';\n  alert.buttons = ['OK'];\n\n  document.body.appendChild(alert);\n  await alert.present();\n\n  const { role } = await alert.onDidDismiss();\n  console.log('onDidDismiss resolved with role', role);\n}\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the alert will animate.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "backdropDismiss",
          "type": "boolean",
          "mutable": false,
          "attr": "backdrop-dismiss",
          "reflectToAttr": false,
          "docs": "If `true`, the alert will be dismissed when the backdrop is clicked.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "buttons",
          "type": "(string | AlertButton)[]",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Array of buttons to be added to the alert.",
          "docsTags": [],
          "default": "[]",
          "values": [
            {
              "type": "(string"
            },
            {
              "type": "AlertButton)[]"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "cssClass",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "css-class",
          "reflectToAttr": false,
          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "enterAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the alert is presented.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "header",
          "type": "string | undefined",
          "mutable": false,
          "attr": "header",
          "reflectToAttr": false,
          "docs": "The main title in the heading of the alert.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "htmlAttributes",
          "type": "HTMLAttributes<HTMLElement> | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Additional attributes to pass to the alert.",
          "docsTags": [],
          "values": [
            {
              "type": "HTMLAttributes<HTMLElement>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputs",
          "type": "AlertInput[]",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Array of input to show in the alert.",
          "docsTags": [],
          "default": "[]",
          "values": [
            {
              "type": "AlertInput[]"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "keyboardClose",
          "type": "boolean",
          "mutable": false,
          "attr": "keyboard-close",
          "reflectToAttr": false,
          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "leaveAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the alert is dismissed.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "message",
          "type": "SafeString | string | undefined",
          "mutable": false,
          "attr": "message",
          "reflectToAttr": false,
          "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Bkkr>` would become\n`&lt;Bkkr&gt;`",
          "docsTags": [],
          "values": [
            {
              "type": "SafeString"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "position",
          "type": "\"bottom\" | \"top\"",
          "mutable": false,
          "attr": "position",
          "reflectToAttr": false,
          "docs": "The position of the alert on the screen.",
          "docsTags": [],
          "default": "'bottom'",
          "values": [
            {
              "value": "bottom",
              "type": "string"
            },
            {
              "value": "top",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "subHeader",
          "type": "string | undefined",
          "mutable": false,
          "attr": "sub-header",
          "reflectToAttr": false,
          "docs": "The subtitle in the heading of the alert. Displayed under the title.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "dismiss",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
          "parameters": [],
          "docs": "Dismiss the alert overlay after it has been presented.",
          "docsTags": [
            {
              "name": "param",
              "text": "data Any data to emit in the dismiss events."
            },
            {
              "name": "param",
              "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
            }
          ]
        },
        {
          "name": "onDidDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the alert did dismiss.",
          "docsTags": []
        },
        {
          "name": "onWillDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the alert will dismiss.",
          "docsTags": []
        },
        {
          "name": "present",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "present() => Promise<void>",
          "parameters": [],
          "docs": "Present the alert overlay after it has been created.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrAlertDidDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the alert has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrAlertDidPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the alert has presented.",
          "docsTags": []
        },
        {
          "event": "bkkrAlertWillDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the alert has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrAlertWillPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the alert has presented.",
          "docsTags": []
        },
        {
          "event": "didDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the alert has dismissed.\nShorthand for bkkrAlertDidDismiss.",
          "docsTags": []
        },
        {
          "event": "didPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the alert has presented.\nShorthand for bkkrAlertWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the alert has dismissed.\nShorthand for bkkrAlertWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the alert has presented.\nShorthand for bkkrAlertWillPresent.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "keydown",
          "target": "document",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [
        {
          "name": "--backdrop-opacity",
          "annotation": "prop",
          "docs": "Opacity of the backdrop"
        },
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the alert"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the alert"
        },
        {
          "name": "--max-height",
          "annotation": "prop",
          "docs": "Maximum height of the alert"
        },
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Maximum width of the alert"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the alert"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Minimum width of the alert"
        },
        {
          "name": "--width",
          "annotation": "prop",
          "docs": "Width of the alert"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [
        "bkkr-select"
      ],
      "dependencies": [
        "bkkr-backdrop"
      ],
      "dependencyGraph": {
        "bkkr-alert": [
          "bkkr-backdrop"
        ],
        "bkkr-select": [
          "bkkr-alert"
        ]
      }
    },
    {
      "filePath": "./src/components/backdrop/backdrop.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-backdrop",
      "readme": "# bkkr-backdrop\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "stopPropagation",
          "type": "boolean",
          "mutable": false,
          "attr": "stop-propagation",
          "reflectToAttr": false,
          "docs": "If `true`, the backdrop will stop propagation on tap.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "tappable",
          "type": "boolean",
          "mutable": false,
          "attr": "tappable",
          "reflectToAttr": false,
          "docs": "If `true`, the backdrop will can be clicked and will emit the `bkkrBackdropTap` event.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "visible",
          "type": "boolean",
          "mutable": false,
          "attr": "visible",
          "reflectToAttr": false,
          "docs": "If `true`, the backdrop will be visible.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBackdropTap",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the backdrop is tapped.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "click",
          "capture": true,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [
        "bkkr-alert",
        "bkkr-drawer",
        "bkkr-menu",
        "bkkr-modal",
        "bkkr-popover"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "bkkr-alert": [
          "bkkr-backdrop"
        ],
        "bkkr-drawer": [
          "bkkr-backdrop"
        ],
        "bkkr-menu": [
          "bkkr-backdrop"
        ],
        "bkkr-modal": [
          "bkkr-backdrop"
        ],
        "bkkr-popover": [
          "bkkr-backdrop"
        ]
      }
    },
    {
      "filePath": "./src/components/badge/badge.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-badge",
      "readme": "# bkkr-badge\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-badge>99</bkkr-badge>\n\n<!-- Colors -->\n<bkkr-badge color=\"primary\">11</bkkr-badge>\n<bkkr-badge color=\"secondary\">22</bkkr-badge>\n<bkkr-badge color=\"tertiary\">33</bkkr-badge>\n<bkkr-badge color=\"success\">44</bkkr-badge>\n<bkkr-badge color=\"warning\">55</bkkr-badge>\n<bkkr-badge color=\"danger\">66</bkkr-badge>\n<bkkr-badge color=\"light\">77</bkkr-badge>\n<bkkr-badge color=\"medium\">88</bkkr-badge>\n<bkkr-badge color=\"dark\">99</bkkr-badge>\n\n<!-- Item with badge on left and right -->\n<bkkr-item>\n  <bkkr-badge slot=\"start\">11</bkkr-badge>\n  <bkkr-label>My Item</bkkr-label>\n  <bkkr-badge slot=\"end\">22</bkkr-badge>\n</bkkr-item>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-badge>99</bkkr-badge>\n\n<!-- Colors -->\n<bkkr-badge color=\"primary\">11</bkkr-badge>\n<bkkr-badge color=\"secondary\">22</bkkr-badge>\n<bkkr-badge color=\"tertiary\">33</bkkr-badge>\n<bkkr-badge color=\"success\">44</bkkr-badge>\n<bkkr-badge color=\"warning\">55</bkkr-badge>\n<bkkr-badge color=\"danger\">66</bkkr-badge>\n<bkkr-badge color=\"light\">77</bkkr-badge>\n<bkkr-badge color=\"medium\">88</bkkr-badge>\n<bkkr-badge color=\"dark\">99</bkkr-badge>\n\n<!-- Item with badge on left and right -->\n<bkkr-item>\n  <bkkr-badge slot=\"start\">11</bkkr-badge>\n  <bkkr-label>My Item</bkkr-label>\n  <bkkr-badge slot=\"end\">22</bkkr-badge>\n</bkkr-item>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the badge"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the badge"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the badge"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the badge"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/breadcrumb/breadcrumb.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-breadcrumb",
      "readme": "# bkkr-breadcrumb\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "native - The native HTML anchor or div element that wraps all child elements."
        },
        {
          "name": "part",
          "text": "separator - The separator element between each breadcrumb."
        },
        {
          "name": "part",
          "text": "collapsed-indicator - The indicator element that shows the breadcrumbs are collapsed."
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "active",
          "type": "boolean",
          "mutable": false,
          "attr": "active",
          "reflectToAttr": false,
          "docs": "If `true`, the breadcrumb will take on a different look to show that\nit is the currently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the breadcrumb.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "download",
          "type": "string | undefined",
          "mutable": false,
          "attr": "download",
          "reflectToAttr": false,
          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rel",
          "type": "string | undefined",
          "mutable": false,
          "attr": "rel",
          "reflectToAttr": false,
          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerDirection",
          "type": "\"back\" | \"forward\" | \"root\"",
          "mutable": false,
          "attr": "router-direction",
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "docsTags": [],
          "default": "'forward'",
          "values": [
            {
              "value": "back",
              "type": "string"
            },
            {
              "value": "forward",
              "type": "string"
            },
            {
              "value": "root",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "separator",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "separator",
          "reflectToAttr": false,
          "docs": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "target",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target",
          "reflectToAttr": false,
          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the breadcrumb loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the breadcrumb has focus.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background-focused",
          "annotation": "prop",
          "docs": "Background color of the breadcrumb when focused"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the breadcrumb"
        },
        {
          "name": "--color-active",
          "annotation": "prop",
          "docs": "Text color of the active breadcrumb"
        },
        {
          "name": "--color-focused",
          "annotation": "prop",
          "docs": "Text color of the breadcrumb when focused"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Text color of the breadcrumb on hover"
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition of the item"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "collapsed-indicator",
          "docs": "The indicator element that shows the breadcrumbs are collapsed."
        },
        {
          "name": "native",
          "docs": "The native HTML anchor or div element that wraps all child elements."
        },
        {
          "name": "separator",
          "docs": "The separator element between each breadcrumb."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-breadcrumb": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/breadcrumbs/breadcrumbs.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-breadcrumbs",
      "readme": "# bkkr-breadcrumbs\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-breadcrumbs>\n    <bkkr-breadcrumb href=\"#\">\n        Home\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#electronics\">\n        Electronics\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#photography\">\n        Photography\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#cameras\">\n        Cameras\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#film\">\n        Film\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb>\n        35 mm\n    </bkkr-breadcrumb>\n</bkkr-breadcrumbs>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-breadcrumbs>\n    <bkkr-breadcrumb href=\"#\">\n        Home\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#electronics\">\n        Electronics\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#photography\">\n        Photography\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#cameras\">\n        Cameras\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb href=\"#film\">\n        Film\n    </bkkr-breadcrumb>\n    <bkkr-breadcrumb>\n        35 mm\n    </bkkr-breadcrumb>\n</bkkr-breadcrumbs>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "itemsAfterCollapse",
          "type": "number",
          "mutable": false,
          "attr": "items-after-collapse",
          "reflectToAttr": false,
          "docs": "The number of breadcrumbs to show after the collapsed indicator.\nIf this property exists `maxItems` will be ignored.",
          "docsTags": [],
          "default": "1",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "itemsBeforeCollapse",
          "type": "number",
          "mutable": false,
          "attr": "items-before-collapse",
          "reflectToAttr": false,
          "docs": "The number of breadcrumbs to show before the collapsed indicator.\nIf this property exists `maxItems` will be ignored.",
          "docsTags": [],
          "default": "1",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "maxItems",
          "type": "number | undefined",
          "mutable": false,
          "attr": "max-items",
          "reflectToAttr": false,
          "docs": "The maximum number of breadcrumbs to show before collapsing.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrCollapsedClick",
          "detail": "BreadcrumbCollapsedClickEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the collapsed indicator is clicked on.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "collapsedClick",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the breadcrumbs"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the breadcrumbs"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/button/button.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-button",
      "readme": "# bkkr-button\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Content is placed between the named slots if provided without a slot."
        },
        {
          "name": "slot",
          "text": "icon-only - Should be used on an icon in a button that has no text."
        },
        {
          "name": "slot",
          "text": "start - Content is placed to the left of the button text in LTR, and to the right in RTL."
        },
        {
          "name": "slot",
          "text": "end - Content is placed to the right of the button text in LTR, and to the left in RTL."
        },
        {
          "name": "part",
          "text": "native - The native HTML button or anchor element that wraps all child elements."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-button>Default</bkkr-button>\n\n<!-- Anchor -->\n<bkkr-button href=\"#\">Anchor</bkkr-button>\n\n<!-- Colors -->\n<bkkr-button color=\"primary\">Primary</bkkr-button>\n\n<!-- Expand -->\n<bkkr-button expand=\"full\">Full Button</bkkr-button>\n<bkkr-button expand=\"block\">Block Button</bkkr-button>\n\n<!-- Round -->\n<bkkr-button shape=\"round\">Round Button</bkkr-button>\n\n<!-- Fill -->\n<bkkr-button fill=\"clear\">Clear</bkkr-button>\n<bkkr-button fill=\"outline\">Outline</bkkr-button>\n<bkkr-button fill=\"solid\">Solid</bkkr-button>\n\n<!-- Icons -->\n<bkkr-button>\n  <bkkr-icon slot=\"start\" name=\"star\"></bkkr-icon>\n  Left Icon\n</bkkr-button>\n\n<bkkr-button>\n  Right Icon\n  <bkkr-icon slot=\"end\" name=\"star\"></bkkr-icon>\n</bkkr-button>\n\n<bkkr-button>\n  <bkkr-icon slot=\"icon-only\" name=\"star\"></bkkr-icon>\n</bkkr-button>\n\n<!-- Sizes -->\n<bkkr-button size=\"large\">Large</bkkr-button>\n<bkkr-button>Default</bkkr-button>\n<bkkr-button size=\"small\">Small</bkkr-button>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-button>Default</bkkr-button>\n\n<!-- Anchor -->\n<bkkr-button href=\"#\">Anchor</bkkr-button>\n\n<!-- Colors -->\n<bkkr-button color=\"primary\">Primary</bkkr-button>\n\n<!-- Expand -->\n<bkkr-button expand=\"full\">Full Button</bkkr-button>\n<bkkr-button expand=\"block\">Block Button</bkkr-button>\n\n<!-- Round -->\n<bkkr-button shape=\"round\">Round Button</bkkr-button>\n\n<!-- Fill -->\n<bkkr-button fill=\"clear\">Clear</bkkr-button>\n<bkkr-button fill=\"outline\">Outline</bkkr-button>\n<bkkr-button fill=\"solid\">Solid</bkkr-button>\n\n<!-- Icons -->\n<bkkr-button>\n  <bkkr-icon slot=\"start\" name=\"star\"></bkkr-icon>\n  Left Icon\n</bkkr-button>\n\n<bkkr-button>\n  Right Icon\n  <bkkr-icon slot=\"end\" name=\"star\"></bkkr-icon>\n</bkkr-button>\n\n<bkkr-button>\n  <bkkr-icon slot=\"icon-only\" name=\"star\"></bkkr-icon>\n</bkkr-button>\n\n<!-- Sizes -->\n<bkkr-button size=\"large\">Large</bkkr-button>\n<bkkr-button>Default</bkkr-button>\n<bkkr-button size=\"small\">Small</bkkr-button>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": true,
          "docs": "If `true`, the user cannot interact with the button.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "download",
          "type": "string | undefined",
          "mutable": false,
          "attr": "download",
          "reflectToAttr": false,
          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "expand",
          "type": "\"block\" | undefined",
          "mutable": false,
          "attr": "expand",
          "reflectToAttr": true,
          "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.",
          "docsTags": [],
          "values": [
            {
              "value": "block",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "fill",
          "type": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
          "mutable": false,
          "attr": "fill",
          "reflectToAttr": true,
          "docs": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\na toolbar, where the default is `\"clear\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "clear",
              "type": "string"
            },
            {
              "value": "default",
              "type": "string"
            },
            {
              "value": "outline",
              "type": "string"
            },
            {
              "value": "solid",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "form",
          "type": "HTMLFormElement | string | undefined",
          "mutable": false,
          "attr": "form",
          "reflectToAttr": false,
          "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
          "docsTags": [],
          "values": [
            {
              "type": "HTMLFormElement"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rel",
          "type": "string | undefined",
          "mutable": false,
          "attr": "rel",
          "reflectToAttr": false,
          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerDirection",
          "type": "\"back\" | \"forward\" | \"root\"",
          "mutable": false,
          "attr": "router-direction",
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "docsTags": [],
          "default": "'forward'",
          "values": [
            {
              "value": "back",
              "type": "string"
            },
            {
              "value": "forward",
              "type": "string"
            },
            {
              "value": "root",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "shape",
          "type": "\"round\" | undefined",
          "mutable": false,
          "attr": "shape",
          "reflectToAttr": true,
          "docs": "The shape of the button.",
          "docsTags": [],
          "values": [
            {
              "value": "round",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "size",
          "type": "\"default\" | \"large\" | \"small\" | undefined",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": true,
          "docs": "The button size.",
          "docsTags": [],
          "values": [
            {
              "value": "default",
              "type": "string"
            },
            {
              "value": "large",
              "type": "string"
            },
            {
              "value": "small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "target",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target",
          "reflectToAttr": false,
          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"button\" | \"reset\" | \"submit\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The type of the button.",
          "docsTags": [],
          "default": "'button'",
          "values": [
            {
              "value": "button",
              "type": "string"
            },
            {
              "value": "reset",
              "type": "string"
            },
            {
              "value": "submit",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the button loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the button has focus.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background"
        },
        {
          "name": "--background-active",
          "annotation": "prop",
          "docs": "Background when pressed."
        },
        {
          "name": "--background-active-opacity",
          "annotation": "prop",
          "docs": "Opacity when pressed"
        },
        {
          "name": "--background-focus",
          "annotation": "prop",
          "docs": "Background when focused with the tab key"
        },
        {
          "name": "--background-focus-opacity",
          "annotation": "prop",
          "docs": "Opacity when focused with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background on hover"
        },
        {
          "name": "--background-hover-opacity",
          "annotation": "prop",
          "docs": "Opacity of the background on hover"
        },
        {
          "name": "--background-opacity",
          "annotation": "prop",
          "docs": "Background opacity"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Box shadow"
        },
        {
          "name": "--box-shadow-active",
          "annotation": "prop",
          "docs": "Box shadow when pressed."
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color"
        },
        {
          "name": "--color-active",
          "annotation": "prop",
          "docs": "Text color when pressed"
        },
        {
          "name": "--color-focus",
          "annotation": "prop",
          "docs": "Text color when focused with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Text color when hover"
        },
        {
          "name": "--cursor",
          "annotation": "prop",
          "docs": "Cursor type"
        },
        {
          "name": "--opacity",
          "annotation": "prop",
          "docs": "Opacity"
        },
        {
          "name": "--overflow",
          "annotation": "prop",
          "docs": "Overflow"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition"
        }
      ],
      "slots": [
        {
          "name": "",
          "docs": "Content is placed between the named slots if provided without a slot."
        },
        {
          "name": "end",
          "docs": "Content is placed to the right of the button text in LTR, and to the left in RTL."
        },
        {
          "name": "icon-only",
          "docs": "Should be used on an icon in a button that has no text."
        },
        {
          "name": "start",
          "docs": "Content is placed to the left of the button text in LTR, and to the right in RTL."
        }
      ],
      "parts": [
        {
          "name": "native",
          "docs": "The native HTML button or anchor element that wraps all child elements."
        }
      ],
      "dependents": [
        "bkkr-infinite-scroll",
        "bkkr-paginator"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "bkkr-infinite-scroll": [
          "bkkr-button"
        ],
        "bkkr-paginator": [
          "bkkr-button"
        ]
      }
    },
    {
      "filePath": "./src/components/card/card.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-card",
      "readme": "# bkkr-card\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-card>\n  <bkkr-card-header>\n    <bkkr-card-subtitle>Card Subtitle</bkkr-card-subtitle>\n    <h2 class=\"mb-0 text-bold\">Card Title</h2>\n  </bkkr-card-header>\n\n  <bkkr-card-content>\n    Keep close to Nature's heart... and break clear away, once in awhile,\n    and climb a mountain or spend a week in the woods. Wash your spirit clean.\n  </bkkr-card-content>\n</bkkr-card>\n\n<!-- Item in card -->\n<bkkr-card>\n  <bkkr-item>\n    <bkkr-icon name=\"thumbtack\" slot=\"start\"></bkkr-icon>\n    <bkkr-label>bkkr-item in a card, icon left, button right</bkkr-label>\n    <bkkr-button fill=\"outline\" slot=\"end\">View</bkkr-button>\n  </bkkr-item>\n\n  <bkkr-card-content>\n    This is content, without any paragraph or header tags,\n    within an bkkr-card-content element.\n  </bkkr-card-content>\n</bkkr-card>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-card>\n  <bkkr-card-header>\n    <bkkr-card-subtitle>Card Subtitle</bkkr-card-subtitle>\n    <h2 class=\"mb-0 text-bold\">Card Title</h2>\n  </bkkr-card-header>\n\n  <bkkr-card-content>\n    Keep close to Nature's heart... and break clear away, once in awhile,\n    and climb a mountain or spend a week in the woods. Wash your spirit clean.\n  </bkkr-card-content>\n</bkkr-card>\n\n<!-- Item in card -->\n<bkkr-card>\n  <bkkr-item>\n    <bkkr-icon name=\"thumbtack\" slot=\"start\"></bkkr-icon>\n    <bkkr-label>bkkr-item in a card, icon left, button right</bkkr-label>\n    <bkkr-button fill=\"outline\" slot=\"end\">View</bkkr-button>\n  </bkkr-item>\n\n  <bkkr-card-content>\n    This is content, without any paragraph or header tags,\n    within an bkkr-card-content element.\n  </bkkr-card-content>\n</bkkr-card>\n```"
      },
      "props": [
        {
          "name": "button",
          "type": "boolean",
          "mutable": false,
          "attr": "button",
          "reflectToAttr": false,
          "docs": "If `true`, a button tag will be rendered and the card will be tappable.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the card.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "download",
          "type": "string | undefined",
          "mutable": false,
          "attr": "download",
          "reflectToAttr": false,
          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "fill",
          "type": "\"elevated\" | \"outline\" | \"solid\" | undefined",
          "mutable": false,
          "attr": "fill",
          "reflectToAttr": true,
          "docs": "Set to `\"elevated\"` for a elevated card, `\"outline\"` for a transparent\ncard with a border, or to `\"solid\"`. The default style is `\"elevated\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "elevated",
              "type": "string"
            },
            {
              "value": "outline",
              "type": "string"
            },
            {
              "value": "solid",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rel",
          "type": "string | undefined",
          "mutable": false,
          "attr": "rel",
          "reflectToAttr": false,
          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerDirection",
          "type": "\"back\" | \"forward\" | \"root\"",
          "mutable": false,
          "attr": "router-direction",
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "docsTags": [],
          "default": "'forward'",
          "values": [
            {
              "value": "back",
              "type": "string"
            },
            {
              "value": "forward",
              "type": "string"
            },
            {
              "value": "root",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "target",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target",
          "reflectToAttr": false,
          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"button\" | \"reset\" | \"submit\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
          "docsTags": [],
          "default": "'button'",
          "values": [
            {
              "value": "button",
              "type": "string"
            },
            {
              "value": "reset",
              "type": "string"
            },
            {
              "value": "submit",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the card"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color of the card"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the card"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style of the card"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width of the card"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the card"
        },
        {
          "name": "--box-shadow-active",
          "annotation": "prop",
          "docs": "Box shadow when pressed."
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the card"
        },
        {
          "name": "--overflow",
          "annotation": "prop",
          "docs": "Overflow of the card."
        },
        {
          "name": "--transform",
          "annotation": "prop",
          "docs": "Transform of the card when pressed."
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition of the card."
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/card-content/card-content.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-card-content",
      "readme": "# bkkr-card-content\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/card-header/card-header.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-card-header",
      "readme": "# bkkr-card-header\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/checkbox/checkbox.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-checkbox",
      "readme": "# bkkr-checkbox\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "container - The container for the checkbox mark."
        },
        {
          "name": "part",
          "text": "mark - The checkmark used to indicate the checked state."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- Checkboxes in a List -->\n<bkkr-list>\n  <bkkr-item *ngFor=\"let entry of form\">\n    <bkkr-label>{{entry.val}}</bkkr-label>\n    <bkkr-checkbox slot=\"end\" [(ngModel)]=\"entry.isChecked\"></bkkr-checkbox>\n  </bkkr-item>\n</bkkr-list>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-checkbox></bkkr-checkbox>\n\n<!-- Disabled -->\n<bkkr-checkbox disabled></bkkr-checkbox>\n\n<!-- Checked -->\n<bkkr-checkbox checked></bkkr-checkbox>\n\n<!-- Colors -->\n<bkkr-checkbox color=\"primary\"></bkkr-checkbox>\n<bkkr-checkbox color=\"secondary\"></bkkr-checkbox>\n<bkkr-checkbox color=\"danger\"></bkkr-checkbox>\n<bkkr-checkbox color=\"light\"></bkkr-checkbox>\n<bkkr-checkbox color=\"dark\"></bkkr-checkbox>\n```"
      },
      "props": [
        {
          "name": "checked",
          "type": "boolean",
          "mutable": true,
          "attr": "checked",
          "reflectToAttr": false,
          "docs": "If `true`, the checkbox is selected.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the checkbox.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "indeterminate",
          "type": "boolean",
          "mutable": true,
          "attr": "indeterminate",
          "reflectToAttr": false,
          "docs": "If `true`, the checkbox will visually appear as indeterminate.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "string",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`.",
          "docsTags": [],
          "default": "'on'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checkbox loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "CheckboxChangeEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checked property has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checkbox has focus.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color"
        },
        {
          "name": "--border-color-activated",
          "annotation": "prop",
          "docs": "Border color when pressed"
        },
        {
          "name": "--border-color-focused",
          "annotation": "prop",
          "docs": "Border color when focused"
        },
        {
          "name": "--border-color-hover",
          "annotation": "prop",
          "docs": "Border color on hover"
        },
        {
          "name": "--border-color-selected",
          "annotation": "prop",
          "docs": "Color of the checkbox checkmark when checked"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Stroke width of the checkbox checkmark"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "container",
          "docs": "The container for the checkbox mark."
        },
        {
          "name": "mark",
          "docs": "The checkmark used to indicate the checked state."
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/col/col.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-col",
      "readme": "# bkkr-col\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "order",
          "type": "string | undefined",
          "mutable": false,
          "attr": "order",
          "reflectToAttr": false,
          "docs": "The order of the column, in terms of how many columns it should take up out of the total\navailable.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "orderLg",
          "type": "string | undefined",
          "mutable": false,
          "attr": "order-lg",
          "reflectToAttr": false,
          "docs": "The order of the column for lg screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "orderMd",
          "type": "string | undefined",
          "mutable": false,
          "attr": "order-md",
          "reflectToAttr": false,
          "docs": "The order of the column for md screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "orderSm",
          "type": "string | undefined",
          "mutable": false,
          "attr": "order-sm",
          "reflectToAttr": false,
          "docs": "The order of the column for sm screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "orderXl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "order-xl",
          "reflectToAttr": false,
          "docs": "The order of the column for xl screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "orderXs",
          "type": "string | undefined",
          "mutable": false,
          "attr": "order-xs",
          "reflectToAttr": false,
          "docs": "The order of the column for xs screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "orderXxl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "order-xxl",
          "reflectToAttr": false,
          "docs": "The order of the column for xxl screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "size",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeLg",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-lg",
          "reflectToAttr": false,
          "docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeMd",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-md",
          "reflectToAttr": false,
          "docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeSm",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-sm",
          "reflectToAttr": false,
          "docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xl",
          "reflectToAttr": false,
          "docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXs",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xs",
          "reflectToAttr": false,
          "docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXxl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xxl",
          "reflectToAttr": false,
          "docs": "The size of the column for xxl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "resize",
          "target": "window",
          "capture": false,
          "passive": true
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/container/container.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-container",
      "readme": "# bkkr-container\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-content>\n    <bkkr-container>\n        <h1>Main Content</h1>\n    </bkkr-container>\n</bkkr-content>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-content>\n    <bkkr-container>\n        <h1>Main Content</h1>\n    </bkkr-container>\n</bkkr-content>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "fluid",
          "type": "boolean",
          "mutable": false,
          "attr": "fluid",
          "reflectToAttr": false,
          "docs": "If `true`, the container get breakpoint related max widths.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Max width of container content"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/content/content.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-content",
      "readme": "# bkkr-content\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Content is placed in the scrollable area if provided without a slot."
        },
        {
          "name": "slot",
          "text": "fixed - Should be used for fixed content that should not scroll."
        },
        {
          "name": "part",
          "text": "background - The background of the content."
        },
        {
          "name": "part",
          "text": "scroll - The scrollable container of the content."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-content\n  [scrollEvents]=\"true\"\n  (bkkrScrollStart)=\"logScrollStart()\"\n  (bkkrScroll)=\"logScrolling($event)\"\n  (bkkrScrollEnd)=\"logScrollEnd()\">\n    <h1>Main Content</h1>\n\n    <div slot=\"fixed\">\n      <h1>Fixed Content</h1>\n    </div>\n</bkkr-content>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-content>\n  <h1>Main Content</h1>\n\n  <div slot=\"fixed\">\n    <h1>Fixed Content</h1>\n  </div>\n</bkkr-content>\n\n<script>\n  var content = document.querySelector('bkkr-content');\n  content.scrollEvents = true;\n\n  content.addEventListener('bkkrScrollStart', () => console.log('scroll start'));\n\n  content.addEventListener('bkkrScroll', (ev) => console.log('scroll', ev.detail));\n\n  content.addEventListener('bkkrScrollEnd', () => console.log('scroll end'));\n</script>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "fullscreen",
          "type": "boolean",
          "mutable": false,
          "attr": "fullscreen",
          "reflectToAttr": false,
          "docs": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scrollEvents",
          "type": "boolean",
          "mutable": false,
          "attr": "scroll-events",
          "reflectToAttr": false,
          "docs": "Because of performance reasons, bkkrScroll events are disabled by default, in order to enable them\nand start listening from (bkkrScroll), set this property to `true`.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scrollX",
          "type": "boolean",
          "mutable": false,
          "attr": "scroll-x",
          "reflectToAttr": false,
          "docs": "If you want to enable the content scrolling in the X axis, set this property to `true`.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scrollY",
          "type": "boolean",
          "mutable": false,
          "attr": "scroll-y",
          "reflectToAttr": false,
          "docs": "If you want to disable the content scrolling in the Y axis, set this property to `false`.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getScrollElement",
          "returns": {
            "type": "Promise<HTMLElement>",
            "docs": ""
          },
          "signature": "getScrollElement() => Promise<HTMLElement>",
          "parameters": [],
          "docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `bkkr-content`:\n\ni.e. Using scrollToPoint()` to scroll the content into a certain point.",
          "docsTags": []
        },
        {
          "name": "scrollByPoint",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
          "parameters": [],
          "docs": "Scroll by a specified X/Y distance in the component.",
          "docsTags": [
            {
              "name": "param",
              "text": "x The amount to scroll by on the horizontal axis."
            },
            {
              "name": "param",
              "text": "y The amount to scroll by on the vertical axis."
            },
            {
              "name": "param",
              "text": "duration The amount of time to take scrolling by that amount."
            }
          ]
        },
        {
          "name": "scrollToBottom",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "scrollToBottom(duration?: number) => Promise<void>",
          "parameters": [],
          "docs": "Scroll to the bottom of the component.",
          "docsTags": [
            {
              "name": "param",
              "text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
            }
          ]
        },
        {
          "name": "scrollToPoint",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
          "parameters": [],
          "docs": "Scroll to a specified X/Y location in the component.",
          "docsTags": [
            {
              "name": "param",
              "text": "x The point to scroll to on the horizontal axis."
            },
            {
              "name": "param",
              "text": "y The point to scroll to on the vertical axis."
            },
            {
              "name": "param",
              "text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
            }
          ]
        },
        {
          "name": "scrollToTop",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "scrollToTop(duration?: number) => Promise<void>",
          "parameters": [],
          "docs": "Scroll to the top of the component.",
          "docsTags": [
            {
              "name": "param",
              "text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
            }
          ]
        }
      ],
      "events": [
        {
          "event": "bkkrScroll",
          "detail": "ScrollDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted while scrolling. This event is disabled by default.\nLook at the property: `scrollEvents`",
          "docsTags": []
        },
        {
          "event": "bkkrScrollEnd",
          "detail": "ScrollBaseDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the scroll has ended.",
          "docsTags": []
        },
        {
          "event": "bkkrScrollStart",
          "detail": "ScrollBaseDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the scroll has started.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "appload",
          "target": "window",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color"
        },
        {
          "name": "--offset-bottom",
          "annotation": "prop",
          "docs": "Bottom offset"
        },
        {
          "name": "--offset-top",
          "annotation": "prop",
          "docs": "Top offset"
        },
        {
          "name": "--overflow",
          "annotation": "prop",
          "docs": "Overflow"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        },
        {
          "name": "--scrollbar-gutter",
          "annotation": "prop",
          "docs": "Scrollbar gutter mode"
        }
      ],
      "slots": [
        {
          "name": "",
          "docs": "Content is placed in the scrollable area if provided without a slot."
        },
        {
          "name": "fixed",
          "docs": "Should be used for fixed content that should not scroll."
        }
      ],
      "parts": [
        {
          "name": "background",
          "docs": "The background of the content."
        },
        {
          "name": "scroll",
          "docs": "The scrollable container of the content."
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/datetime/datetime.tsx",
      "encapsulation": "scoped",
      "tag": "bkkr-datetime",
      "readme": "# bkkr-datetime\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "icon - The select icon container."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-datetime></bkkr-datetime>\n\n<!-- Datetime with value -->\n<bkkr-datetime value=\"1990-02-19\"></bkkr-datetime>\n\n<!-- Datetime with placeholder -->\n<bkkr-datetime placeholder=\"Enter datetime\"></bkkr-datetime>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-datetime></bkkr-datetime>\n\n<!-- Datetime with value -->\n<bkkr-datetime value=\"1990-02-19\"></bkkr-datetime>\n\n<!-- Datetime with placeholder -->\n<bkkr-datetime placeholder=\"Enter datetime\"></bkkr-datetime>\n```"
      },
      "props": [
        {
          "name": "autofocus",
          "type": "boolean",
          "mutable": false,
          "attr": "autofocus",
          "reflectToAttr": false,
          "docs": "This Boolean attribute lets you specify that a form control should have datetime focus when the page loads.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "dayNames",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "day-names",
          "reflectToAttr": false,
          "docs": "Full day of the week names. This can be used to provide\nlocale names for each day in the week. Defaults to English.",
          "docsTags": [],
          "default": "DAY_NAMES",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "dayShortNames",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "day-short-names",
          "reflectToAttr": false,
          "docs": "Short abbreviated day of the week names. This can be used to provide\nlocale names for each day in the week. Defaults to English.\nDefaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`",
          "docsTags": [],
          "default": "DAY_SHORT_NAMES",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the datetime.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "displayFormat",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "display-format",
          "reflectToAttr": false,
          "docs": "The display format of the date and time as text that shows\nwithin the item. When the `pickerFormat` input is not used, then the\n`displayFormat` is used for both display the formatted text, and determining\nthe datetime picker's columns. See the `pickerFormat` input description for\nmore info. Defaults to `DD.MM.YYYY`.",
          "docsTags": [],
          "default": "DEFAULT_DATE_FORMAT",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "enterkeyhint",
          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
          "mutable": false,
          "attr": "enterkeyhint",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "done",
              "type": "string"
            },
            {
              "value": "enter",
              "type": "string"
            },
            {
              "value": "go",
              "type": "string"
            },
            {
              "value": "next",
              "type": "string"
            },
            {
              "value": "previous",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "send",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputmode",
          "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
          "mutable": false,
          "attr": "inputmode",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "decimal",
              "type": "string"
            },
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "value": "numeric",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "text",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "interfaceOptions",
          "type": "any",
          "mutable": false,
          "attr": "interface-options",
          "reflectToAttr": false,
          "docs": "Any additional options that the `alert`, `drawer` or `popover` interface\ncan take. See the [bkkr-alert docs](../alert) and the\n[bkkr-popover docs](../popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.",
          "docsTags": [],
          "default": "{}",
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "max",
          "type": "string | undefined",
          "mutable": true,
          "attr": "max",
          "reflectToAttr": false,
          "docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "min",
          "type": "string | undefined",
          "mutable": true,
          "attr": "min",
          "reflectToAttr": false,
          "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "monthNames",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "month-names",
          "reflectToAttr": false,
          "docs": "Full names for each month name. This can be used to provide\nlocale month names. Defaults to English.",
          "docsTags": [],
          "default": "MONTH_SHORT_NAMES",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "monthShortNames",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "month-short-names",
          "reflectToAttr": false,
          "docs": "Short abbreviated names for each month name. This can be used to provide\nlocale month names. Defaults to English.",
          "docsTags": [],
          "default": "MONTH_SHORT_NAMES",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "picker",
          "type": "boolean",
          "mutable": false,
          "attr": "picker",
          "reflectToAttr": false,
          "docs": "If `true`, the user can open a datepicker interface.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "placeholder",
          "type": "string | undefined",
          "mutable": false,
          "attr": "placeholder",
          "reflectToAttr": false,
          "docs": "Instructional text that shows before the datetime has a value.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "readonly",
          "type": "boolean",
          "mutable": false,
          "attr": "readonly",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot modify the value.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "required",
          "type": "boolean",
          "mutable": false,
          "attr": "required",
          "reflectToAttr": false,
          "docs": "If `true`, the user must fill in a value before submitting a form.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "null | string | undefined",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the datetime as a valid ISO 8601 datetime string.",
          "docsTags": [],
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getDatetimeElement",
          "returns": {
            "type": "Promise<HTMLInputElement>",
            "docs": ""
          },
          "signature": "getDatetimeElement() => Promise<HTMLInputElement>",
          "parameters": [],
          "docs": "Returns the native `<datetime>` element used under the hood.",
          "docsTags": []
        },
        {
          "name": "open",
          "returns": {
            "type": "Promise<any>",
            "docs": ""
          },
          "signature": "open(event?: UIEvent) => Promise<any>",
          "parameters": [],
          "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `bkkr-select`.",
          "docsTags": [
            {
              "name": "param",
              "text": "event The user interface event that called the open."
            }
          ]
        },
        {
          "name": "setFocus",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "setFocus() => Promise<void>",
          "parameters": [],
          "docs": "Sets focus on the native `datetime` in `bkkr-datetime`. Use this method instead of the global\n`datetime.focus()`.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "FocusEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the datetime loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrCancel",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the selection is cancelled.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "DatetimeChangeEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "FocusEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the datetime has focus.",
          "docsTags": []
        },
        {
          "event": "bkkrInput",
          "detail": "KeyboardEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when a keyboard datetime occurred.",
          "docsTags": []
        },
        {
          "event": "bkkrOpen",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the selection is opened.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the datetime"
        },
        {
          "name": "--background-active",
          "annotation": "prop",
          "docs": "Background of the datetime button when pressed."
        },
        {
          "name": "--background-active-opacity",
          "annotation": "prop",
          "docs": "Opacity of the datetime button when pressed"
        },
        {
          "name": "--background-focus",
          "annotation": "prop",
          "docs": "Background of the datetime button when focused with the tab key"
        },
        {
          "name": "--background-focus-opacity",
          "annotation": "prop",
          "docs": "Opacity of the datetime button when focused with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the datetime button on hover"
        },
        {
          "name": "--background-hover-opacity",
          "annotation": "prop",
          "docs": "Opacity of the datetime button of the background on hover"
        },
        {
          "name": "--background-opacity",
          "annotation": "prop",
          "docs": "Background opacity of the datetime button"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the datetime button"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the datetime text"
        },
        {
          "name": "--color-active",
          "annotation": "prop",
          "docs": "Text color of the datetime button when pressed"
        },
        {
          "name": "--color-focus",
          "annotation": "prop",
          "docs": "Text color of the datetime button when focused with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Text color of the datetime button when hover"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the datetime"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the datetime"
        },
        {
          "name": "--placeholder-color",
          "annotation": "prop",
          "docs": "Color of the datetime placeholder text"
        },
        {
          "name": "--placeholder-font-style",
          "annotation": "prop",
          "docs": "Font style of the datetime placeholder text"
        },
        {
          "name": "--placeholder-font-weight",
          "annotation": "prop",
          "docs": "Font weight of the datetime placeholder text"
        },
        {
          "name": "--placeholder-opacity",
          "annotation": "prop",
          "docs": "Opacity of the datetime placeholder text"
        },
        {
          "name": "--placeholder-transition-delay",
          "annotation": "prop",
          "docs": "Transition delay of the datetime placeholder text"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "icon",
          "docs": "The select icon container."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-datetime": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/drawer/drawer.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-drawer",
      "readme": "# bkkr-drawer\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "= Content is placed inside of the `.drawer-content` element."
        },
        {
          "name": "part",
          "text": "backdrop - The `bkkr-backdrop` element."
        },
        {
          "name": "part",
          "text": "content - The wrapper element for the default slot."
        }
      ],
      "usage": {
        "angular": "```typescript\nimport { Component } from '@angular/core';\nimport { DrawerController } from '@bkkr/angular';\nimport { DrawerPage } from '../drawer/drawer.page';\n\n@Component({\n  selector: 'drawer-example',\n  templateUrl: 'drawer-example.html',\n  styleUrls: ['./drawer-example.css']\n})\nexport class DrawerExample {\n  constructor(public drawerController: DrawerController) {\n\n  }\n\n  async presentDrawer() {\n    const drawer = await this.drawerController.create({\n      component: DrawerPage,\n      cssClass: 'my-custom-class'\n    });\n    return await drawer.present();\n  }\n}\n```",
        "javascript": "```javascript\ncustomElements.define('drawer-page', class extends HTMLElement {\n  connectedCallback() {\n    this.innerHTML = `\n<bkkr-header>\n  <bkkr-toolbar>\n    <bkkr-title>Drawer Header</bkkr-title>\n    <bkkr-buttons slot=\"primary\">\n      <bkkr-button onClick=\"dismissDrawer()\">\n        <bkkr-icon slot=\"icon-only\" name=\"close\"></bkkr-icon>\n      </bkkr-button>\n    </bkkr-buttons>\n  </bkkr-toolbar>\n</bkkr-header>\n<bkkr-content class=\"bkkr-padding\">\n  Drawer Content\n</bkkr-content>`;\n  }\n});\n\nfunction presentDrawer() {\n  // create the drawer with the `drawer-page` component\n  const drawerElement = document.createElement('bkkr-drawer');\n  drawerElement.component = 'drawer-page';\n  drawerElement.cssClass = 'my-custom-class';\n\n  // present the drawer\n  document.body.appendChild(drawerElement);\n  return drawerElement.present();\n}\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the drawer will animate.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "backdropDismiss",
          "type": "boolean",
          "mutable": false,
          "attr": "backdrop-dismiss",
          "reflectToAttr": false,
          "docs": "If `true`, the drawer will be dismissed when the backdrop is clicked.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "canDismiss",
          "type": "(() => Promise<boolean>) | boolean | undefined",
          "mutable": false,
          "attr": "can-dismiss",
          "reflectToAttr": false,
          "docs": "Determines whether or not a drawer can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the drawer will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the drawer will not close when trying to dismiss.",
          "docsTags": [],
          "values": [
            {
              "type": "(() => Promise<boolean>)"
            },
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "closeButton",
          "type": "boolean",
          "mutable": false,
          "attr": "close-button",
          "reflectToAttr": false,
          "docs": "If `true`, the drawer will have a close button on large screens.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "closeIcon",
          "type": "string",
          "mutable": false,
          "attr": "close-icon",
          "reflectToAttr": false,
          "docs": "The icon to use when `closeButton` is set to `true`.",
          "docsTags": [],
          "default": "'xmark'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "duration",
          "type": "number",
          "mutable": false,
          "attr": "duration",
          "reflectToAttr": false,
          "docs": "How many milliseconds to wait before hiding the drawer. By default, it won't disappear.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enterAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the drawer is presented.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "handle",
          "type": "boolean",
          "mutable": false,
          "attr": "handle",
          "reflectToAttr": false,
          "docs": "If `true`, the drawer will have a drag handle.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "htmlAttributes",
          "type": "HTMLAttributes<HTMLElement> | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Additional attributes to pass to the drawer.",
          "docsTags": [],
          "values": [
            {
              "type": "HTMLAttributes<HTMLElement>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "isOpen",
          "type": "boolean",
          "mutable": false,
          "attr": "is-open",
          "reflectToAttr": false,
          "docs": "If `true`, the drawer will open. If `false`, the drawer will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the drawerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe drawer dismisses. You will need to do that in your code.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "keepContentsMounted",
          "type": "boolean",
          "mutable": false,
          "attr": "keep-contents-mounted",
          "reflectToAttr": false,
          "docs": "If `true`, the component passed into `bkkr-drawer` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "keyboardClose",
          "type": "boolean",
          "mutable": false,
          "attr": "keyboard-close",
          "reflectToAttr": false,
          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "leaveAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the drawer is dismissed.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "presentingElement",
          "type": "HTMLElement | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "The element that presented the drawer. This is used for card presentation effects\nand for stacking multiple drawers on top of each other",
          "docsTags": [],
          "default": "document.querySelector('bkkr-router-outlet') || document.querySelector('bkkr-root') || document.body",
          "values": [
            {
              "type": "HTMLElement"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "showBackdrop",
          "type": "boolean",
          "mutable": false,
          "attr": "show-backdrop",
          "reflectToAttr": false,
          "docs": "If `true`, a backdrop will be displayed behind the drawer.\nThis property controls whether or not the backdrop\ndarkens the screen when the drawer is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "swipeToClose",
          "type": "boolean",
          "mutable": false,
          "attr": "swipe-to-close",
          "reflectToAttr": false,
          "docs": "If `true`, the drawer can be swiped to dismiss.",
          "docsTags": [
            {
              "name": "deprecated",
              "text": "- To prevent drawers from dismissing, use canDismiss instead."
            }
          ],
          "default": "true",
          "deprecation": "- To prevent drawers from dismissing, use canDismiss instead.",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "trigger",
          "type": "string | undefined",
          "mutable": false,
          "attr": "trigger",
          "reflectToAttr": false,
          "docs": "An ID corresponding to the trigger element that\ncauses the drawer to open when clicked.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "dismiss",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
          "parameters": [],
          "docs": "Dismiss the drawer overlay after it has been presented.",
          "docsTags": [
            {
              "name": "param",
              "text": "data Any data to emit in the dismiss events."
            },
            {
              "name": "param",
              "text": "role The role of the element that is dismissing the drawer. For example, 'cancel' or 'backdrop'."
            }
          ]
        },
        {
          "name": "onDidDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the drawer did dismiss.",
          "docsTags": []
        },
        {
          "name": "onWillDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the drawer will dismiss.",
          "docsTags": []
        },
        {
          "name": "present",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "present() => Promise<void>",
          "parameters": [],
          "docs": "Present the drawer overlay after it has been created.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrDrawerDidDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the drawer has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrDrawerDidPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the drawer has presented.",
          "docsTags": []
        },
        {
          "event": "bkkrDrawerWillDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the drawer has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrDrawerWillPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the drawer has presented.",
          "docsTags": []
        },
        {
          "event": "didDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the drawer has dismissed.\nShorthand for bkkrDrawerDidDismiss.",
          "docsTags": []
        },
        {
          "event": "didPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the drawer has presented.\nShorthand for bkkrDrawerWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the drawer has dismissed.\nShorthand for bkkrDrawerWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the drawer has presented.\nShorthand for bkkrDrawerWillPresent.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--backdrop-opacity",
          "annotation": "prop",
          "docs": "Opacity of the backdrop"
        },
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the drawer content"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color of the drawer content"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the drawer content"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style of the drawer content"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width of the drawer content"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the drawer"
        },
        {
          "name": "--max-height",
          "annotation": "prop",
          "docs": "Maximum height of the drawer"
        },
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Maximum width of the drawer"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the drawer"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Minimum width of the drawer"
        },
        {
          "name": "--width",
          "annotation": "prop",
          "docs": "Width of the drawer"
        }
      ],
      "slots": [
        {
          "name": "= Content is placed inside of the `.drawer-content` element.",
          "docs": ""
        }
      ],
      "parts": [
        {
          "name": "backdrop",
          "docs": "The `bkkr-backdrop` element."
        },
        {
          "name": "content",
          "docs": "The wrapper element for the default slot."
        }
      ],
      "dependents": [
        "bkkr-select"
      ],
      "dependencies": [
        "bkkr-backdrop",
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-drawer": [
          "bkkr-backdrop",
          "bkkr-icon"
        ],
        "bkkr-select": [
          "bkkr-drawer"
        ]
      }
    },
    {
      "filePath": "./src/components/fab/fab.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-fab",
      "readme": "# bkkr-fab\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-content>\n    <!-- Default bottom right -->\n    <bkkr-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n        <bkkr-fab-button color=\"primary\">\n            <bkkr-icon name=\"plus\"></bkkr-icon>\n        </bkkr-fab-button>\n    </bkkr-fab>\n</bkkr-content>\n```",
        "javascript": "```html\n<bkkr-content>\n    <!-- Default bottom right -->\n    <bkkr-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n        <bkkr-fab-button color=\"primary\">\n            <bkkr-icon name=\"plus\"></bkkr-icon>\n        </bkkr-fab-button>\n    </bkkr-fab>\n</bkkr-content>\n```"
      },
      "props": [
        {
          "name": "edge",
          "type": "boolean",
          "mutable": false,
          "attr": "edge",
          "reflectToAttr": false,
          "docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "horizontal",
          "type": "\"center\" | \"end\" | \"start\" | undefined",
          "mutable": false,
          "attr": "horizontal",
          "reflectToAttr": false,
          "docs": "Where to align the fab horizontally in the viewport.",
          "docsTags": [],
          "values": [
            {
              "value": "center",
              "type": "string"
            },
            {
              "value": "end",
              "type": "string"
            },
            {
              "value": "start",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "vertical",
          "type": "\"bottom\" | \"center\" | \"top\" | undefined",
          "mutable": false,
          "attr": "vertical",
          "reflectToAttr": false,
          "docs": "Where to align the fab vertically in the viewport.",
          "docsTags": [],
          "values": [
            {
              "value": "bottom",
              "type": "string"
            },
            {
              "value": "center",
              "type": "string"
            },
            {
              "value": "top",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/fab-button/fab-button.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-fab-button",
      "readme": "# bkkr-fab-button\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the fab button.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "download",
          "type": "string | undefined",
          "mutable": false,
          "attr": "download",
          "reflectToAttr": false,
          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rel",
          "type": "string | undefined",
          "mutable": false,
          "attr": "rel",
          "reflectToAttr": false,
          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerDirection",
          "type": "\"back\" | \"forward\" | \"root\"",
          "mutable": false,
          "attr": "router-direction",
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "docsTags": [],
          "default": "'forward'",
          "values": [
            {
              "value": "back",
              "type": "string"
            },
            {
              "value": "forward",
              "type": "string"
            },
            {
              "value": "root",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "shape",
          "type": "\"round\" | undefined",
          "mutable": false,
          "attr": "shape",
          "reflectToAttr": true,
          "docs": "The shape of the button.",
          "docsTags": [],
          "values": [
            {
              "value": "round",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "size",
          "type": "\"large\" | \"small\" | undefined",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The size of the button.",
          "docsTags": [],
          "values": [
            {
              "value": "large",
              "type": "string"
            },
            {
              "value": "small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "target",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target",
          "reflectToAttr": false,
          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"button\" | \"reset\" | \"submit\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The type of the button.",
          "docsTags": [],
          "default": "'button'",
          "values": [
            {
              "value": "button",
              "type": "string"
            },
            {
              "value": "reset",
              "type": "string"
            },
            {
              "value": "submit",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the button loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the button has focus.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the button"
        },
        {
          "name": "--background-active",
          "annotation": "prop",
          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
        },
        {
          "name": "--background-active-opacity",
          "annotation": "prop",
          "docs": "Opacity of the button background when pressed"
        },
        {
          "name": "--background-focus",
          "annotation": "prop",
          "docs": "Background of the button when focus with the tab key"
        },
        {
          "name": "--background-focus-opacity",
          "annotation": "prop",
          "docs": "Opacity of the button background when focus with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the button on hover"
        },
        {
          "name": "--background-hover-opacity",
          "annotation": "prop",
          "docs": "Opacity of the button background on hover"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color of the button"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the button"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style of the button"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width of the button"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the button"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the button"
        },
        {
          "name": "--color-active",
          "annotation": "prop",
          "docs": "Text color of the button when pressed"
        },
        {
          "name": "--color-focus",
          "annotation": "prop",
          "docs": "Text color of the button when focus with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Text color of the button on hover"
        },
        {
          "name": "--cursor",
          "annotation": "prop",
          "docs": "Cursor type"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Height of the button"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Width of the button"
        },
        {
          "name": "--overflow",
          "annotation": "prop",
          "docs": "Overflow"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the button"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the button"
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition of the button"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/footer/footer.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-footer",
      "readme": "# bkkr-footer\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-content></bkkr-content>\n\n<!-- Default -->\n<bkkr-footer>\n  <bkkr-toolbar>\n    <bkkr-title>Footer</bkkr-title>\n  </bkkr-toolbar>\n</bkkr-footer>\n```",
        "javascript": "```html\n<bkkr-content></bkkr-content>\n\n<!-- Default -->\n<bkkr-footer>\n  <bkkr-toolbar>\n    <bkkr-title>Footer</bkkr-title>\n  </bkkr-toolbar>\n</bkkr-footer>\n```"
      },
      "props": [
        {
          "name": "collapse",
          "type": "\"fade\" | undefined",
          "mutable": false,
          "attr": "collapse",
          "reflectToAttr": false,
          "docs": "Describes the scroll effect that will be applied to the footer.",
          "docsTags": [],
          "values": [
            {
              "value": "fade",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "position",
          "type": "\"fixed\" | \"floating\"",
          "mutable": false,
          "attr": "position",
          "reflectToAttr": false,
          "docs": "The position determines where and how the footer behaves.",
          "docsTags": [],
          "default": "'fixed'",
          "values": [
            {
              "value": "fixed",
              "type": "string"
            },
            {
              "value": "floating",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Color of the footer border"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Style of the footer border"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Width of the footer border"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/grid/grid.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-grid",
      "readme": "# bkkr-grid\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-content>\n    <!-- Default -->\n    <bkkr-grid size=\"6\" class=\"text-center\">\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n    </bkkr-grid>\n</bkkr-content>\n```",
        "javascript": "```html\n<bkkr-content>\n    <!-- Default -->\n    <bkkr-grid size=\"6\" class=\"text-center\">\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n        <div>item</div>\n    </bkkr-grid>\n</bkkr-content>\n```"
      },
      "props": [
        {
          "name": "size",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The number of the column.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeLg",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-lg",
          "reflectToAttr": false,
          "docs": "The number of the column for lg screens.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeMd",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-md",
          "reflectToAttr": false,
          "docs": "The number of the column for md screens.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeSm",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-sm",
          "reflectToAttr": false,
          "docs": "The number of the column for sm screens.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xl",
          "reflectToAttr": false,
          "docs": "The number of the column for xl screens.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXs",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xs",
          "reflectToAttr": false,
          "docs": "The number of the column for xs screens.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXxl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xxl",
          "reflectToAttr": false,
          "docs": "The number of the column for xxl screens.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "resize",
          "target": "window",
          "capture": false,
          "passive": true
        }
      ],
      "styles": [
        {
          "name": "--columns",
          "annotation": "prop",
          "docs": "Adjust column number"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/header/header.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-header",
      "readme": "# bkkr-header\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-header>\n  <bkkr-toolbar>\n    <bkkr-buttons slot=\"start\">\n      <bkkr-back-button></bkkr-back-button>\n    </bkkr-buttons>\n    <bkkr-title>My Navigation Bar</bkkr-title>\n  </bkkr-toolbar>\n\n  <bkkr-toolbar>\n    <bkkr-title>Subheader</bkkr-title>\n  </bkkr-toolbar>\n</bkkr-header>\n\n<!-- Header without a border -->\n<bkkr-header class=\"border-0\">\n  <bkkr-toolbar>\n    <bkkr-title>Header - No Border</bkkr-title>\n  </bkkr-toolbar>\n</bkkr-header>\n\n<bkkr-content></bkkr-content>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-header>\n  <bkkr-toolbar>\n    <bkkr-buttons slot=\"start\">\n      <bkkr-back-button></bkkr-back-button>\n    </bkkr-buttons>\n    <bkkr-title>My Navigation Bar</bkkr-title>\n  </bkkr-toolbar>\n\n  <bkkr-toolbar>\n    <bkkr-title>Subheader</bkkr-title>\n  </bkkr-toolbar>\n</bkkr-header>\n\n<!-- Header without a border -->\n<bkkr-header class=\"border-0\">\n  <bkkr-toolbar>\n    <bkkr-title>Header - No Border</bkkr-title>\n  </bkkr-toolbar>\n</bkkr-header>\n\n<bkkr-content></bkkr-content>\n```"
      },
      "props": [
        {
          "name": "collapse",
          "type": "\"fade\" | undefined",
          "mutable": false,
          "attr": "collapse",
          "reflectToAttr": false,
          "docs": "Describes the scroll effect that will be applied to the header.",
          "docsTags": [],
          "values": [
            {
              "value": "fade",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Color of the header border"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Style of the header border"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Width of the header border"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/icon/icon.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-icon",
      "readme": "\nIcons from Font Awesome:\nGet vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.\n\nhttps://fontawesome.com/\n\n\nCopyright 2021 Fonticons Inc.\n\nLicensed under [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)\n\n",
      "docs": "Icons from Font Awesome:\nGet vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.\n\nhttps://fontawesome.com/\n\n\nCopyright 2021 Fonticons Inc.\n\nLicensed under [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-icon name=\"thumbs-up\"></bkkr-icon>\n\n<!-- Small icon -->\n<bkkr-icon size=\"small\" name=\"thumbs-up\"></bkkr-icon>\n\n<!-- Large icon -->\n<bkkr-icon size=\"large\" name=\"thumbs-up\"></bkkr-icon>\n\n<!-- Colored icon -->\n<bkkr-icon color=\"primary\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"secondary\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"tertiary\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"success\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"warning\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"light\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"medium\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"dark\" name=\"thumbs-up\"></bkkr-icon>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-icon name=\"thumbs-up\"></bkkr-icon>\n\n<!-- Small icon -->\n<bkkr-icon size=\"small\" name=\"thumbs-up\"></bkkr-icon>\n\n<!-- Large icon -->\n<bkkr-icon size=\"large\" name=\"thumbs-up\"></bkkr-icon>\n\n<!-- Colored icon -->\n<bkkr-icon color=\"primary\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"secondary\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"tertiary\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"success\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"warning\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"light\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"medium\" name=\"thumbs-up\"></bkkr-icon>\n<bkkr-icon color=\"dark\" name=\"thumbs-up\"></bkkr-icon>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use for the background of the item.",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "flipRtl",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "flip-rtl",
          "reflectToAttr": false,
          "docs": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "icon",
          "type": "any",
          "mutable": false,
          "attr": "icon",
          "reflectToAttr": false,
          "docs": "A combination of both `name` and `src`. If a `src` url is detected\nit will set the `src` property. Otherwise it assumes it's a built-in named\nSVG and set the `name` property.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "lazy",
          "type": "boolean",
          "mutable": false,
          "attr": "lazy",
          "reflectToAttr": false,
          "docs": "If enabled, bkkr-icon will be loaded lazily when it's visible in the viewport.\nDefault, `false`.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string | undefined",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": true,
          "docs": "The name of icons.\nSee all icons on [Fontawesome](https://fontawesome.com/).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sanitize",
          "type": "boolean",
          "mutable": false,
          "attr": "sanitize",
          "reflectToAttr": false,
          "docs": "When set to `false`, SVG content that is HTTP fetched will not be checked\nif the response SVG content has any `<script>` elements, or any attributes\nthat start with `on`, such as `onclick`.",
          "docsTags": [
            {
              "name": "default",
              "text": "true"
            }
          ],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"large\" | \"medium\" | \"small\" | undefined",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": true,
          "docs": "The icon size.",
          "docsTags": [],
          "default": "'medium'",
          "values": [
            {
              "value": "large",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "src",
          "type": "string | undefined",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "Specifies the exact `src` of an SVG file to use.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "type",
          "type": "\"brands\" | \"solid\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The icon size.",
          "docsTags": [],
          "default": "'solid'",
          "values": [
            {
              "value": "brands",
              "type": "string"
            },
            {
              "value": "solid",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [
        "bkkr-accordion",
        "bkkr-breadcrumb",
        "bkkr-datetime",
        "bkkr-drawer",
        "bkkr-input",
        "bkkr-item",
        "bkkr-modal",
        "bkkr-paginator",
        "bkkr-reorder",
        "bkkr-searchbar",
        "bkkr-select",
        "bkkr-select-choices",
        "bkkr-toast",
        "bkkr-toggle"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "bkkr-accordion": [
          "bkkr-icon"
        ],
        "bkkr-breadcrumb": [
          "bkkr-icon"
        ],
        "bkkr-datetime": [
          "bkkr-icon"
        ],
        "bkkr-drawer": [
          "bkkr-icon"
        ],
        "bkkr-input": [
          "bkkr-icon"
        ],
        "bkkr-item": [
          "bkkr-icon"
        ],
        "bkkr-modal": [
          "bkkr-icon"
        ],
        "bkkr-paginator": [
          "bkkr-icon"
        ],
        "bkkr-reorder": [
          "bkkr-icon"
        ],
        "bkkr-searchbar": [
          "bkkr-icon"
        ],
        "bkkr-select": [
          "bkkr-icon"
        ],
        "bkkr-select-choices": [
          "bkkr-icon"
        ],
        "bkkr-toast": [
          "bkkr-icon"
        ],
        "bkkr-toggle": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/img/img.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-img",
      "readme": "# bkkr-img\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "image - The inner `img` element."
        }
      ],
      "usage": {
        "angular": "```html\n<bkkr-list>\n  <bkkr-item *ngFor=\"let item of items\">\n    <bkkr-thumbnail slot=\"start\">\n      <bkkr-img [src]=\"item.src\"></bkkr-img>\n    </bkkr-thumbnail>\n    <bkkr-label>{{item.text}}</bkkr-label>\n  </bkkr-item>\n</bkkr-list>\n```",
        "javascript": "```html\n<bkkr-list>\n  <bkkr-item>\n    <bkkr-thumbnail slot=\"start\">\n      <bkkr-img src=\"https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg\"></bkkr-img>\n    </bkkr-thumbnail>\n    <bkkr-label>Milky way</bkkr-label>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-thumbnail slot=\"start\">\n      <bkkr-img src=\"https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874__340.jpg\"></bkkr-img>\n    </bkkr-thumbnail>\n    <bkkr-label>Abstract colors</bkkr-label>\n  </bkkr-item>\n</bkkr-list>\n```"
      },
      "props": [
        {
          "name": "alt",
          "type": "string | undefined",
          "mutable": false,
          "attr": "alt",
          "reflectToAttr": false,
          "docs": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the image will appear animated.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "drag",
          "type": "boolean",
          "mutable": false,
          "attr": "drag",
          "reflectToAttr": false,
          "docs": "If true, image will draggable on supported devices.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "locked",
          "type": "boolean",
          "mutable": false,
          "attr": "locked",
          "reflectToAttr": false,
          "docs": "If true, an overlay appears above image, so context menu don't contain 'Save image' option.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "src",
          "type": "string | undefined",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "The image URL. This attribute is mandatory for the `<img>` element.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrError",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the img fails to load",
          "docsTags": []
        },
        {
          "event": "bkkrImgDidLoad",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the image has finished loading",
          "docsTags": []
        },
        {
          "event": "bkkrImgWillLoad",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the img src has been set",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--transition-duration",
          "annotation": "prop",
          "docs": "Duration of appearing animation"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "image",
          "docs": "The inner `img` element."
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/infinite-scroll/infinite-scroll.tsx",
      "encapsulation": "none",
      "tag": "bkkr-infinite-scroll",
      "readme": "# bkkr-infinite-scroll\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-content>\n    <bkkr-container class=\"mb-3\">\n        <bkkr-button (click)=\"toggleinfinite-scroll()\" expand=\"block\">\n            Toggle Infinite Scroll\n        </bkkr-button>\n    </bkkr-container>\n\n    <bkkr-infinite-scroll threshold=\"100px\" infinite=\"true\"  items=\"110\" length=\"10\" page=\"7\" (bkkrinfinite-scroll)=\"loadData($event)\">\n        <bkkr-list id=\"list\">\n        </bkkr-list>\n    </bkkr-infinite-scroll>\n</bkkr-content>\n```",
        "javascript": "```html\n<bkkr-content>\n    <bkkr-container class=\"mb-3\">\n        <bkkr-button onClick=\"toggleinfinite-scroll()\" expand=\"block\">\n            Toggle Infinite Scroll\n        </bkkr-button>\n    </bkkr-container>\n\n    <bkkr-infinite-scroll threshold=\"100px\" infinite=\"true\" id=\"infinite-scroll\" items=\"110\" length=\"10\" page=\"7\">\n        <bkkr-list id=\"list\">\n        </bkkr-list>\n    </bkkr-infinite-scroll>\n</bkkr-content>\n\n<script>\n    const infinite-scroll = document.getElementById('infinite-scroll');\n\n    function toggleinfinite-scroll() {\n      infinite-scroll.disabled = !infinite-scroll.disabled;\n    }\n\n    infinite-scroll.addEventListener('bkkrinfiniteScroll', async function () {\n      console.log('Loading data...');\n      await wait(500);\n      infinite-scroll.complete();\n      appendItems();\n\n      console.log('Done');\n    });\n</script>\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "Animate loading indication.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "buttonText",
          "type": "SafeString | string | undefined",
          "mutable": false,
          "attr": "button-text",
          "reflectToAttr": false,
          "docs": "Text to display on 'Show more' button.\n`buttonText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Bkkr>` would become\n`&lt;Bkkr&gt;`",
          "docsTags": [],
          "default": "'Show more'",
          "values": [
            {
              "type": "SafeString"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "infinite",
          "type": "boolean",
          "mutable": false,
          "attr": "infinite",
          "reflectToAttr": false,
          "docs": "Enable  infinite loading.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "items",
          "type": "number",
          "mutable": false,
          "attr": "items",
          "reflectToAttr": false,
          "docs": "Number of items.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "length",
          "type": "number",
          "mutable": false,
          "attr": "length",
          "reflectToAttr": false,
          "docs": "Length of the page.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "loadingText",
          "type": "SafeString | string | undefined",
          "mutable": false,
          "attr": "loading-text",
          "reflectToAttr": false,
          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Bkkr>` would become\n`&lt;Bkkr&gt;`",
          "docsTags": [],
          "values": [
            {
              "type": "SafeString"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "page",
          "type": "number",
          "mutable": true,
          "attr": "page",
          "reflectToAttr": true,
          "docs": "The currently displayed page.",
          "docsTags": [],
          "default": "1",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "position",
          "type": "\"bottom\" | \"top\"",
          "mutable": false,
          "attr": "position",
          "reflectToAttr": false,
          "docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.",
          "docsTags": [],
          "default": "'bottom'",
          "values": [
            {
              "value": "bottom",
              "type": "string"
            },
            {
              "value": "top",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "spinner",
          "type": "\"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
          "mutable": true,
          "attr": "spinner",
          "reflectToAttr": false,
          "docs": "An animated SVG spinner that shows while loading.",
          "docsTags": [],
          "values": [
            {
              "value": "circles",
              "type": "string"
            },
            {
              "value": "circular",
              "type": "string"
            },
            {
              "value": "crescent",
              "type": "string"
            },
            {
              "value": "dots",
              "type": "string"
            },
            {
              "value": "lines",
              "type": "string"
            },
            {
              "value": "lines-sharp",
              "type": "string"
            },
            {
              "value": "lines-sharp-small",
              "type": "string"
            },
            {
              "value": "lines-small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "threshold",
          "type": "string",
          "mutable": false,
          "attr": "threshold",
          "reflectToAttr": false,
          "docs": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page.",
          "docsTags": [],
          "default": "'15%'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "toolbar",
          "type": "boolean",
          "mutable": false,
          "attr": "toolbar",
          "reflectToAttr": false,
          "docs": "Show or hide the toolbar of pagination element.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "complete",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "complete() => Promise<void>",
          "parameters": [],
          "docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrInfinite",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the scroll reaches\nthe threshold distance, or stepper have changed. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.",
          "docsTags": []
        },
        {
          "event": "bkkrPageSizeChanged",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when page size have changed.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "bkkr-progress-bar",
        "bkkr-button",
        "bkkr-spinner"
      ],
      "dependencyGraph": {
        "bkkr-infinite-scroll": [
          "bkkr-progress-bar",
          "bkkr-button",
          "bkkr-spinner"
        ]
      }
    },
    {
      "filePath": "./src/components/input/input.tsx",
      "encapsulation": "scoped",
      "tag": "bkkr-input",
      "readme": "# bkkr-input\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-input></bkkr-input>\n\n<!-- Input with value -->\n<bkkr-input value=\"custom\"></bkkr-input>\n\n<!-- Input with placeholder -->\n<bkkr-input placeholder=\"Enter Input\"></bkkr-input>\n\n<!-- Input with clear button when there is a value -->\n<bkkr-input clear-input value=\"clear me\"></bkkr-input>\n\n<!-- Number type input -->\n<bkkr-input type=\"number\" value=\"333\"></bkkr-input>\n\n<!-- Disabled input -->\n<bkkr-input value=\"Disabled\" disabled></bkkr-input>\n\n<!-- Readonly input -->\n<bkkr-input value=\"Readonly\" readonly></bkkr-input>\n\n<!-- Inputs with labels -->\n<bkkr-item>\n  <bkkr-label>Default Label</bkkr-label>\n  <bkkr-input></bkkr-input>\n</bkkr-item>\n\n<bkkr-item>\n  <bkkr-label position=\"floating\">Floating Label</bkkr-label>\n  <bkkr-input></bkkr-input>\n</bkkr-item>\n\n<bkkr-item>\n  <bkkr-label position=\"fixed\">Fixed Label</bkkr-label>\n  <bkkr-input></bkkr-input>\n</bkkr-item>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-input></bkkr-input>\n\n<!-- Input with value -->\n<bkkr-input value=\"custom\"></bkkr-input>\n\n<!-- Input with placeholder -->\n<bkkr-input placeholder=\"Enter Input\"></bkkr-input>\n\n<!-- Input with clear button when there is a value -->\n<bkkr-input clear-input value=\"clear me\"></bkkr-input>\n\n<!-- Number type input -->\n<bkkr-input type=\"number\" value=\"333\"></bkkr-input>\n\n<!-- Disabled input -->\n<bkkr-input value=\"Disabled\" disabled></bkkr-input>\n\n<!-- Readonly input -->\n<bkkr-input value=\"Readonly\" readonly></bkkr-input>\n\n<!-- Inputs with labels -->\n<bkkr-item>\n  <bkkr-label>Default Label</bkkr-label>\n  <bkkr-input></bkkr-input>\n</bkkr-item>\n\n<bkkr-item>\n  <bkkr-label position=\"floating\">Floating Label</bkkr-label>\n  <bkkr-input></bkkr-input>\n</bkkr-item>\n\n<bkkr-item>\n  <bkkr-label position=\"fixed\">Fixed Label</bkkr-label>\n  <bkkr-input></bkkr-input>\n</bkkr-item>\n```"
      },
      "props": [
        {
          "name": "accept",
          "type": "string | undefined",
          "mutable": false,
          "attr": "accept",
          "reflectToAttr": false,
          "docs": "If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "autocapitalize",
          "type": "string",
          "mutable": false,
          "attr": "autocapitalize",
          "reflectToAttr": false,
          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
          "docsTags": [],
          "default": "'off'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "autocomplete",
          "type": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
          "mutable": false,
          "attr": "autocomplete",
          "reflectToAttr": false,
          "docs": "Indicates whether the value of the control can be automatically completed by the browser.",
          "docsTags": [],
          "default": "'off'",
          "values": [
            {
              "value": "name",
              "type": "string"
            },
            {
              "value": "on",
              "type": "string"
            },
            {
              "value": "off",
              "type": "string"
            },
            {
              "value": "honorific-prefix",
              "type": "string"
            },
            {
              "value": "given-name",
              "type": "string"
            },
            {
              "value": "additional-name",
              "type": "string"
            },
            {
              "value": "family-name",
              "type": "string"
            },
            {
              "value": "honorific-suffix",
              "type": "string"
            },
            {
              "value": "nickname",
              "type": "string"
            },
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "username",
              "type": "string"
            },
            {
              "value": "new-password",
              "type": "string"
            },
            {
              "value": "current-password",
              "type": "string"
            },
            {
              "value": "one-time-code",
              "type": "string"
            },
            {
              "value": "organization-title",
              "type": "string"
            },
            {
              "value": "organization",
              "type": "string"
            },
            {
              "value": "street-address",
              "type": "string"
            },
            {
              "value": "address-line1",
              "type": "string"
            },
            {
              "value": "address-line2",
              "type": "string"
            },
            {
              "value": "address-line3",
              "type": "string"
            },
            {
              "value": "address-level4",
              "type": "string"
            },
            {
              "value": "address-level3",
              "type": "string"
            },
            {
              "value": "address-level2",
              "type": "string"
            },
            {
              "value": "address-level1",
              "type": "string"
            },
            {
              "value": "country",
              "type": "string"
            },
            {
              "value": "country-name",
              "type": "string"
            },
            {
              "value": "postal-code",
              "type": "string"
            },
            {
              "value": "cc-name",
              "type": "string"
            },
            {
              "value": "cc-given-name",
              "type": "string"
            },
            {
              "value": "cc-additional-name",
              "type": "string"
            },
            {
              "value": "cc-family-name",
              "type": "string"
            },
            {
              "value": "cc-number",
              "type": "string"
            },
            {
              "value": "cc-exp",
              "type": "string"
            },
            {
              "value": "cc-exp-month",
              "type": "string"
            },
            {
              "value": "cc-exp-year",
              "type": "string"
            },
            {
              "value": "cc-csc",
              "type": "string"
            },
            {
              "value": "cc-type",
              "type": "string"
            },
            {
              "value": "transaction-currency",
              "type": "string"
            },
            {
              "value": "transaction-amount",
              "type": "string"
            },
            {
              "value": "language",
              "type": "string"
            },
            {
              "value": "bday",
              "type": "string"
            },
            {
              "value": "bday-day",
              "type": "string"
            },
            {
              "value": "bday-month",
              "type": "string"
            },
            {
              "value": "bday-year",
              "type": "string"
            },
            {
              "value": "sex",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "tel-country-code",
              "type": "string"
            },
            {
              "value": "tel-national",
              "type": "string"
            },
            {
              "value": "tel-area-code",
              "type": "string"
            },
            {
              "value": "tel-local",
              "type": "string"
            },
            {
              "value": "tel-extension",
              "type": "string"
            },
            {
              "value": "impp",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            },
            {
              "value": "photo",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "autocorrect",
          "type": "\"off\" | \"on\"",
          "mutable": false,
          "attr": "autocorrect",
          "reflectToAttr": false,
          "docs": "Whether auto correction should be enabled when the user is entering/editing the text value.",
          "docsTags": [],
          "default": "'off'",
          "values": [
            {
              "value": "off",
              "type": "string"
            },
            {
              "value": "on",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "autofocus",
          "type": "boolean",
          "mutable": false,
          "attr": "autofocus",
          "reflectToAttr": false,
          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "clearInput",
          "type": "boolean",
          "mutable": false,
          "attr": "clear-input",
          "reflectToAttr": false,
          "docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "clearOnEdit",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "clear-on-edit",
          "reflectToAttr": false,
          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debounce",
          "type": "number",
          "mutable": false,
          "attr": "debounce",
          "reflectToAttr": false,
          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the input.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enterkeyhint",
          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
          "mutable": false,
          "attr": "enterkeyhint",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "done",
              "type": "string"
            },
            {
              "value": "enter",
              "type": "string"
            },
            {
              "value": "go",
              "type": "string"
            },
            {
              "value": "next",
              "type": "string"
            },
            {
              "value": "previous",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "send",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputmode",
          "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
          "mutable": false,
          "attr": "inputmode",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "decimal",
              "type": "string"
            },
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "value": "numeric",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "text",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "max",
          "type": "number | string | undefined",
          "mutable": false,
          "attr": "max",
          "reflectToAttr": false,
          "docs": "The maximum value, which must not be less than its minimum (min attribute) value.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "maxlength",
          "type": "number | undefined",
          "mutable": false,
          "attr": "maxlength",
          "reflectToAttr": false,
          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "min",
          "type": "number | string | undefined",
          "mutable": false,
          "attr": "min",
          "reflectToAttr": false,
          "docs": "The minimum value, which must not be greater than its maximum (max attribute) value.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "minlength",
          "type": "number | undefined",
          "mutable": false,
          "attr": "minlength",
          "reflectToAttr": false,
          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "multiple",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "multiple",
          "reflectToAttr": false,
          "docs": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pattern",
          "type": "string | undefined",
          "mutable": false,
          "attr": "pattern",
          "reflectToAttr": false,
          "docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "placeholder",
          "type": "string | undefined",
          "mutable": false,
          "attr": "placeholder",
          "reflectToAttr": false,
          "docs": "Instructional text that shows before the input has a value.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "readonly",
          "type": "boolean",
          "mutable": false,
          "attr": "readonly",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot modify the value.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "required",
          "type": "boolean",
          "mutable": false,
          "attr": "required",
          "reflectToAttr": false,
          "docs": "If `true`, the user must fill in a value before submitting a form.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "number | undefined",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "spellcheck",
          "type": "boolean",
          "mutable": false,
          "attr": "spellcheck",
          "reflectToAttr": false,
          "docs": "If `true`, the element will have its spelling and grammar checked.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "step",
          "type": "string | undefined",
          "mutable": false,
          "attr": "step",
          "reflectToAttr": false,
          "docs": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "type",
          "type": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The type of control to display. The default type is text.",
          "docsTags": [],
          "default": "'text'",
          "values": [
            {
              "value": "date",
              "type": "string"
            },
            {
              "value": "datetime-local",
              "type": "string"
            },
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "month",
              "type": "string"
            },
            {
              "value": "number",
              "type": "string"
            },
            {
              "value": "password",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "text",
              "type": "string"
            },
            {
              "value": "time",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            },
            {
              "value": "week",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "null | number | string | undefined",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the input.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "null"
            },
            {
              "type": "number"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getInputElement",
          "returns": {
            "type": "Promise<HTMLInputElement>",
            "docs": ""
          },
          "signature": "getInputElement() => Promise<HTMLInputElement>",
          "parameters": [],
          "docs": "Returns the native `<input>` element used under the hood.",
          "docsTags": []
        },
        {
          "name": "setFocus",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "setFocus() => Promise<void>",
          "parameters": [],
          "docs": "Sets focus on the native `input` in `bkkr-input`. Use this method instead of the global\n`input.focus()`.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "FocusEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the input loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "InputChangeEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "FocusEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the input has focus.",
          "docsTags": []
        },
        {
          "event": "bkkrInput",
          "detail": "InputEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when a keyboard input occurred.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the input"
        },
        {
          "name": "--background-active",
          "annotation": "prop",
          "docs": "Background of the clear button when pressed."
        },
        {
          "name": "--background-active-opacity",
          "annotation": "prop",
          "docs": "Opacity of the clear button when pressed"
        },
        {
          "name": "--background-focus",
          "annotation": "prop",
          "docs": "Background of the clear button when focused with the tab key"
        },
        {
          "name": "--background-focus-opacity",
          "annotation": "prop",
          "docs": "Opacity of the clear button when focused with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the clear button on hover"
        },
        {
          "name": "--background-hover-opacity",
          "annotation": "prop",
          "docs": "Opacity of the clear button of the background on hover"
        },
        {
          "name": "--background-opacity",
          "annotation": "prop",
          "docs": "Background opacity of the clear button"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the clear button"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the input text"
        },
        {
          "name": "--color-active",
          "annotation": "prop",
          "docs": "Text color of the clear button when pressed"
        },
        {
          "name": "--color-focus",
          "annotation": "prop",
          "docs": "Text color of the clear button when focused with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Text color of the clear button when hover"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the input"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the input"
        },
        {
          "name": "--placeholder-color",
          "annotation": "prop",
          "docs": "Color of the input placeholder text"
        },
        {
          "name": "--placeholder-font-style",
          "annotation": "prop",
          "docs": "Font style of the input placeholder text"
        },
        {
          "name": "--placeholder-font-weight",
          "annotation": "prop",
          "docs": "Font weight of the input placeholder text"
        },
        {
          "name": "--placeholder-opacity",
          "annotation": "prop",
          "docs": "Opacity of the input placeholder text"
        },
        {
          "name": "--placeholder-transition-delay",
          "annotation": "prop",
          "docs": "Transition delay of the input placeholder text"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-input": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/item/item.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-item",
      "readme": "# bkkr-item\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Content is placed between the named slots if provided without a slot."
        },
        {
          "name": "slot",
          "text": "start - Content is placed to the left of the item text in LTR, and to the right in RTL."
        },
        {
          "name": "slot",
          "text": "end - Content is placed to the right of the item text in LTR, and to the left in RTL."
        },
        {
          "name": "part",
          "text": "native - The native HTML button, anchor or div element that wraps all child elements."
        },
        {
          "name": "part",
          "text": "detail-icon - The chevron icon for the item. Only applies when `detail=\"true\"`."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-item>\n  <bkkr-label>\n    Item\n  </bkkr-label>\n</bkkr-item>\n\n<!-- Item as a Button -->\n<bkkr-item button (click)=\"buttonClick()\">\n  <bkkr-label>\n    Button Item\n  </bkkr-label>\n</bkkr-item>\n\n<!-- Item as an Anchor -->\n<bkkr-item href=\"https://bkkr-team.github.io/bkkr-docs/\">\n  <bkkr-label>\n    Anchor Item\n  </bkkr-label>\n</bkkr-item>\n\n<bkkr-item color=\"secondary\">\n  <bkkr-label>\n    Secondary Color Item\n  </bkkr-label>\n</bkkr-item>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-item>\n  <bkkr-label>\n    Item\n  </bkkr-label>\n</bkkr-item>\n\n<!-- Item as a Button -->\n<bkkr-item button (click)=\"buttonClick()\">\n  <bkkr-label>\n    Button Item\n  </bkkr-label>\n</bkkr-item>\n\n<!-- Item as an Anchor -->\n<bkkr-item href=\"https://bkkr-team.github.io/bkkr-docs/\">\n  <bkkr-label>\n    Anchor Item\n  </bkkr-label>\n</bkkr-item>\n\n<bkkr-item color=\"secondary\">\n  <bkkr-label>\n    Secondary Color Item\n  </bkkr-label>\n</bkkr-item>\n```"
      },
      "props": [
        {
          "name": "button",
          "type": "boolean",
          "mutable": false,
          "attr": "button",
          "reflectToAttr": false,
          "docs": "If `true`, a button tag will be rendered and the item will be tappable.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "counter",
          "type": "boolean",
          "mutable": false,
          "attr": "counter",
          "reflectToAttr": false,
          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `bkkr-input` or `bkkr-textarea`.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "counterFormatter",
          "type": "((inputLength: number, maxLength: number) => string) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
          "docsTags": [],
          "values": [
            {
              "type": "((inputLength: number, maxLength: number) => string)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "detail",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "detail",
          "reflectToAttr": false,
          "docs": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "detailIcon",
          "type": "string",
          "mutable": false,
          "attr": "detail-icon",
          "reflectToAttr": false,
          "docs": "The icon to use when `detail` is set to `true`.",
          "docsTags": [],
          "default": "'chevron-right'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the item.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "download",
          "type": "string | undefined",
          "mutable": false,
          "attr": "download",
          "reflectToAttr": false,
          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "fill",
          "type": "\"outline\" | \"solid\" | undefined",
          "mutable": false,
          "attr": "fill",
          "reflectToAttr": false,
          "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border.",
          "docsTags": [],
          "values": [
            {
              "value": "outline",
              "type": "string"
            },
            {
              "value": "solid",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "lines",
          "type": "\"full\" | \"inset\" | \"none\" | undefined",
          "mutable": false,
          "attr": "lines",
          "reflectToAttr": false,
          "docs": "How the bottom border should be displayed on the item.",
          "docsTags": [],
          "values": [
            {
              "value": "full",
              "type": "string"
            },
            {
              "value": "inset",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "rel",
          "type": "string | undefined",
          "mutable": false,
          "attr": "rel",
          "reflectToAttr": false,
          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerDirection",
          "type": "\"back\" | \"forward\" | \"root\"",
          "mutable": false,
          "attr": "router-direction",
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "docsTags": [],
          "default": "'forward'",
          "values": [
            {
              "value": "back",
              "type": "string"
            },
            {
              "value": "forward",
              "type": "string"
            },
            {
              "value": "root",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "shape",
          "type": "\"round\" | undefined",
          "mutable": false,
          "attr": "shape",
          "reflectToAttr": true,
          "docs": "The shape of the item. If \"round\" it will have increased\nborder radius.",
          "docsTags": [],
          "values": [
            {
              "value": "round",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "target",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target",
          "reflectToAttr": false,
          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"button\" | \"reset\" | \"submit\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
          "docsTags": [],
          "default": "'button'",
          "values": [
            {
              "value": "button",
              "type": "string"
            },
            {
              "value": "reset",
              "type": "string"
            },
            {
              "value": "submit",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "bkkrChange",
          "capture": false,
          "passive": false
        },
        {
          "event": "bkkrColor",
          "capture": false,
          "passive": false
        },
        {
          "event": "bkkrStyle",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the item"
        },
        {
          "name": "--background-activated",
          "annotation": "prop",
          "docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple."
        },
        {
          "name": "--background-activated-opacity",
          "annotation": "prop",
          "docs": "Opacity of the item background when pressed"
        },
        {
          "name": "--background-focused",
          "annotation": "prop",
          "docs": "Background of the item when focused with the tab key"
        },
        {
          "name": "--background-focused-opacity",
          "annotation": "prop",
          "docs": "Opacity of the item background when focused with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the item on hover"
        },
        {
          "name": "--background-hover-opacity",
          "annotation": "prop",
          "docs": "Opacity of the background of the item on hover"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Color of the item border"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Radius of the item border"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Style of the item border"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Width of the item border"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the item"
        },
        {
          "name": "--color-activated",
          "annotation": "prop",
          "docs": "Color of the item when pressed"
        },
        {
          "name": "--color-focused",
          "annotation": "prop",
          "docs": "Color of the item when focused with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Color of the item on hover"
        },
        {
          "name": "--detail-icon-color",
          "annotation": "prop",
          "docs": "Color of the item detail icon"
        },
        {
          "name": "--detail-icon-font-size",
          "annotation": "prop",
          "docs": "Font size of the item detail icon"
        },
        {
          "name": "--detail-icon-opacity",
          "annotation": "prop",
          "docs": "Opacity of the item detail icon"
        },
        {
          "name": "--highlight-color-focused",
          "annotation": "prop",
          "docs": "The color of the highlight on the item when focused"
        },
        {
          "name": "--highlight-color-invalid",
          "annotation": "prop",
          "docs": "The color of the highlight on the item when invalid"
        },
        {
          "name": "--highlight-height",
          "annotation": "prop",
          "docs": "The height of the highlight on the item"
        },
        {
          "name": "--inner-border-width",
          "annotation": "prop",
          "docs": "Width of the item inner border"
        },
        {
          "name": "--inner-box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the item inner"
        },
        {
          "name": "--inner-padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the item inner"
        },
        {
          "name": "--inner-padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner"
        },
        {
          "name": "--inner-padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner"
        },
        {
          "name": "--inner-padding-top",
          "annotation": "prop",
          "docs": "Top padding of the item inner"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the item"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the item"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the item"
        },
        {
          "name": "--ripple-color",
          "annotation": "prop",
          "docs": "Color of the item ripple effect"
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition of the item"
        }
      ],
      "slots": [
        {
          "name": "",
          "docs": "Content is placed between the named slots if provided without a slot."
        },
        {
          "name": "end",
          "docs": "Content is placed to the right of the item text in LTR, and to the left in RTL."
        },
        {
          "name": "start",
          "docs": "Content is placed to the left of the item text in LTR, and to the right in RTL."
        }
      ],
      "parts": [
        {
          "name": "detail-icon",
          "docs": "The chevron icon for the item. Only applies when `detail=\"true\"`."
        },
        {
          "name": "native",
          "docs": "The native HTML button, anchor or div element that wraps all child elements."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-icon",
        "bkkr-note"
      ],
      "dependencyGraph": {
        "bkkr-item": [
          "bkkr-icon",
          "bkkr-note"
        ]
      }
    },
    {
      "filePath": "./src/components/label/label.tsx",
      "encapsulation": "scoped",
      "tag": "bkkr-label",
      "readme": "# bkkr-label\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-label>Label</bkkr-label>\n\n<!-- Label Colors -->\n<bkkr-label color=\"primary\">Primary Label</bkkr-label>\n<bkkr-label color=\"secondary\">Secondary Label</bkkr-label>\n<bkkr-label color=\"danger\">Danger Label</bkkr-label>\n<bkkr-label color=\"light\">Light Label</bkkr-label>\n<bkkr-label color=\"dark\">Dark Label</bkkr-label>\n\n<!-- Item Labels -->\n<bkkr-item>\n  <bkkr-label>Default Item</bkkr-label>\n</bkkr-item>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-label>Label</bkkr-label>\n\n<!-- Label Colors -->\n<bkkr-label color=\"primary\">Primary Label</bkkr-label>\n<bkkr-label color=\"secondary\">Secondary Label</bkkr-label>\n<bkkr-label color=\"danger\">Danger Label</bkkr-label>\n<bkkr-label color=\"light\">Light Label</bkkr-label>\n<bkkr-label color=\"dark\">Dark Label</bkkr-label>\n\n<!-- Item Labels -->\n<bkkr-item>\n  <bkkr-label>Default Item</bkkr-label>\n</bkkr-item>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "position",
          "type": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
          "mutable": false,
          "attr": "position",
          "reflectToAttr": false,
          "docs": "The position determines where and how the label behaves inside an item.",
          "docsTags": [],
          "values": [
            {
              "value": "fixed",
              "type": "string"
            },
            {
              "value": "floating",
              "type": "string"
            },
            {
              "value": "stacked",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the label"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/list/list.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-list",
      "readme": "# bkkr-list\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-list>\n  <bkkr-item *ngFor=\"let item of items\">\n    <bkkr-label>{{item.text}}</bkkr-label>\n  </bkkr-item>\n</bkkr-list>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-list>\n  <bkkr-item>\n    <bkkr-label>Pokémon Yellow</bkkr-label>\n  </bkkr-item>\n  <bkkr-item>\n    <bkkr-label>Mega Man X</bkkr-label>\n  </bkkr-item>\n  <bkkr-item>\n    <bkkr-label>The Legend of Zelda</bkkr-label>\n  </bkkr-item>\n  <bkkr-item>\n    <bkkr-label>Pac-Man</bkkr-label>\n  </bkkr-item>\n  <bkkr-item>\n    <bkkr-label>Super Mario World</bkkr-label>\n  </bkkr-item>\n</bkkr-list>\n```"
      },
      "props": [
        {
          "name": "inset",
          "type": "boolean",
          "mutable": false,
          "attr": "inset",
          "reflectToAttr": false,
          "docs": "If `true`, the list will have margin around it and rounded corners.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "lines",
          "type": "\"full\" | \"inset\" | \"none\" | undefined",
          "mutable": false,
          "attr": "lines",
          "reflectToAttr": false,
          "docs": "How the bottom border should be displayed on all items.",
          "docsTags": [],
          "values": [
            {
              "value": "full",
              "type": "string"
            },
            {
              "value": "inset",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/list-header/list-header.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-list-header",
      "readme": "# bkkr-list-header\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<bkkr-list-header>\n  <bkkr-label>List Header</bkkr-label>\n</bkkr-list-header>\n\n<!-- List Header with Button -->\n<bkkr-list-header>\n  <bkkr-label>New This Week</bkkr-label>\n  <bkkr-button>See All</bkkr-button>\n</bkkr-list-header>\n```",
        "javascript": "```html\n<!-- Default -->\n<bkkr-list-header>\n  <bkkr-label>List Header</bkkr-label>\n</bkkr-list-header>\n\n<!-- List Header with Button -->\n<bkkr-list-header>\n  <bkkr-label>New This Week</bkkr-label>\n  <bkkr-button>See All</bkkr-button>\n</bkkr-list-header>\n```"
      },
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the list header"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Color of the list header border"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Style of the list header border"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Width of the list header border"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the list header text"
        },
        {
          "name": "--inner-border-width",
          "annotation": "prop",
          "docs": "Width of the inner list header border"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/loading/loading.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-loading",
      "readme": "# bkkr-loading\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "button - Any button element that is displayed inside of the toast."
        },
        {
          "name": "part",
          "text": "container - The element that wraps all child elements."
        },
        {
          "name": "part",
          "text": "spinner - The spinner of the loading."
        }
      ],
      "usage": {
        "angular": "```typescript\nimport { Component } from '@angular/core';\nimport { LoadingController } from '@bkkr/angular';\n\n@Component({\n  selector: 'loading-example',\n  templateUrl: 'loading-example.html',\n  styleUrls: ['./loading-example.css']\n})\nexport class LoadingExample {\n  constructor(public loadingController: LoadingController) {\n\n  }\n\n  async presentLoading() {\n    const loading = await this.loadingController.create({\n      cssClass: 'my-custom-class'\n    });\n    return await loading.present();\n  }\n}\n```",
        "javascript": "```javascript\nfunction presentLoading() {\n  const loadingElement = document.createElement('bkkr-loading');\n  loadingElement.cssClass = 'my-custom-class';\n\n  // present the loading\n  document.body.appendChild(loadingElement);\n  return loadingElement.present();\n}\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the loading will animate.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "default": "'primary'",
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "cssClass",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "css-class",
          "reflectToAttr": false,
          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "enterAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the loading is presented.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "htmlAttributes",
          "type": "HTMLAttributes<HTMLElement> | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Additional attributes to pass to the loader.",
          "docsTags": [],
          "values": [
            {
              "type": "HTMLAttributes<HTMLElement>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "keyboardClose",
          "type": "boolean",
          "mutable": false,
          "attr": "keyboard-close",
          "reflectToAttr": false,
          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "leaveAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the loading is dismissed.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "position",
          "type": "\"bottom\" | \"middle\" | \"top\"",
          "mutable": false,
          "attr": "position",
          "reflectToAttr": false,
          "docs": "The position of the loading on the screen.",
          "docsTags": [],
          "default": "'top'",
          "values": [
            {
              "value": "bottom",
              "type": "string"
            },
            {
              "value": "middle",
              "type": "string"
            },
            {
              "value": "top",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "spinner",
          "type": "\"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
          "mutable": false,
          "attr": "spinner",
          "reflectToAttr": false,
          "docs": "The type of spinner being used in loader.",
          "docsTags": [],
          "values": [
            {
              "value": "circles",
              "type": "string"
            },
            {
              "value": "circular",
              "type": "string"
            },
            {
              "value": "crescent",
              "type": "string"
            },
            {
              "value": "dots",
              "type": "string"
            },
            {
              "value": "lines",
              "type": "string"
            },
            {
              "value": "lines-sharp",
              "type": "string"
            },
            {
              "value": "lines-sharp-small",
              "type": "string"
            },
            {
              "value": "lines-small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "dismiss",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
          "parameters": [],
          "docs": "Dismiss the loading overlay after it has been presented.",
          "docsTags": [
            {
              "name": "param",
              "text": "data Any data to emit in the dismiss events."
            },
            {
              "name": "param",
              "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
            }
          ]
        },
        {
          "name": "onDidDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the loading did dismiss.",
          "docsTags": []
        },
        {
          "name": "onWillDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the loading will dismiss.",
          "docsTags": []
        },
        {
          "name": "present",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "present() => Promise<void>",
          "parameters": [],
          "docs": "Present the loading overlay after it has been created.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "loadingDidDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the loading has dismissed.",
          "docsTags": []
        },
        {
          "event": "loadingDidPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the loading has presented.",
          "docsTags": []
        },
        {
          "event": "loadingWillDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the loading has dismissed.",
          "docsTags": []
        },
        {
          "event": "loadingWillPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the loading has presented.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the loading"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color of the loading"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the loading"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style of the loading"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width of the loading"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the loading"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the loading"
        },
        {
          "name": "--max-height",
          "annotation": "prop",
          "docs": "Maximum height of the loading"
        },
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Maximum width of the loading"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the loading"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Minimum width of the loading"
        },
        {
          "name": "--white-space",
          "annotation": "prop",
          "docs": "White space of the loading message"
        },
        {
          "name": "--width",
          "annotation": "prop",
          "docs": "Width of the loading"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "button",
          "docs": "Any button element that is displayed inside of the toast."
        },
        {
          "name": "container",
          "docs": "The element that wraps all child elements."
        },
        {
          "name": "spinner",
          "docs": "The spinner of the loading."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-spinner"
      ],
      "dependencyGraph": {
        "bkkr-loading": [
          "bkkr-spinner"
        ]
      }
    },
    {
      "filePath": "./src/components/menu/menu.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-menu",
      "readme": "# bkkr-menu\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "container - The container for the menu content."
        },
        {
          "name": "part",
          "text": "backdrop - The backdrop that appears over the main content when the menu is open."
        }
      ],
      "usage": {
        "angular": "```html\n<bkkr-root>\n    <bkkr-menu side=\"start\" menuId=\"first\" contentId=\"main\">\n    <bkkr-header>\n        <bkkr-toolbar color=\"primary\">\n        <bkkr-title>Start Menu</bkkr-title>\n        </bkkr-toolbar>\n    </bkkr-header>\n    <bkkr-content>\n        <bkkr-list>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        </bkkr-list>\n    </bkkr-content>\n    </bkkr-menu>\n\n    <bkkr-router-outlet id=\"main\"></bkkr-router-outlet>\n</bkkr-root>\n```",
        "javascript": "```html\n<bkkr-root>\n    <bkkr-menu side=\"start\" menu-id=\"first\" content-id=\"main\">\n    <bkkr-header>\n        <bkkr-toolbar color=\"primary\">\n        <bkkr-title>Start Menu</bkkr-title>\n        </bkkr-toolbar>\n    </bkkr-header>\n    <bkkr-content>\n        <bkkr-list>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        <bkkr-item>Menu Item</bkkr-item>\n        </bkkr-list>\n    </bkkr-content>\n    </bkkr-menu>\n\n    <div class=\"bkkr-page\" id=\"main\">\n    </div>\n</bkkr-root>\n```"
      },
      "props": [
        {
          "name": "contentId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "content-id",
          "reflectToAttr": true,
          "docs": "The content's id the menu should use.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the menu is disabled.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "fullscreen",
          "type": "boolean",
          "mutable": false,
          "attr": "fullscreen",
          "reflectToAttr": false,
          "docs": "Set `true` to display menu in fullscreen.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "maxEdgeStart",
          "type": "number",
          "mutable": false,
          "attr": "max-edge-start",
          "reflectToAttr": false,
          "docs": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered.",
          "docsTags": [],
          "default": "50",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "menuId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "menu-id",
          "reflectToAttr": true,
          "docs": "An id for the menu.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "side",
          "type": "\"end\" | \"start\"",
          "mutable": false,
          "attr": "side",
          "reflectToAttr": true,
          "docs": "Which side of the view the menu should be placed.",
          "docsTags": [],
          "default": "'start'",
          "values": [
            {
              "value": "end",
              "type": "string"
            },
            {
              "value": "start",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "swipeGesture",
          "type": "boolean",
          "mutable": false,
          "attr": "swipe-gesture",
          "reflectToAttr": false,
          "docs": "If `true`, swiping the menu is enabled.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"overlay\" | \"push\" | \"reveal\" | undefined",
          "mutable": true,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "overlay",
              "type": "string"
            },
            {
              "value": "push",
              "type": "string"
            },
            {
              "value": "reveal",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "close",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "close(animated?: boolean) => Promise<boolean>",
          "parameters": [],
          "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.",
          "docsTags": []
        },
        {
          "name": "isActive",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "isActive() => Promise<boolean>",
          "parameters": [],
          "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `bkkr-split-pane`.",
          "docsTags": []
        },
        {
          "name": "isOpen",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "isOpen() => Promise<boolean>",
          "parameters": [],
          "docs": "Returns `true` is the menu is open.",
          "docsTags": []
        },
        {
          "name": "open",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "open(animated?: boolean) => Promise<boolean>",
          "parameters": [],
          "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.",
          "docsTags": []
        },
        {
          "name": "setOpen",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
          "parameters": [],
          "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.",
          "docsTags": []
        },
        {
          "name": "toggle",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "toggle(animated?: boolean) => Promise<boolean>",
          "parameters": [],
          "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrDidClose",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the menu is closed.",
          "docsTags": []
        },
        {
          "event": "bkkrDidOpen",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the menu is open.",
          "docsTags": []
        },
        {
          "event": "bkkrWillClose",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the menu is about to be closed.",
          "docsTags": []
        },
        {
          "event": "bkkrWillOpen",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the menu is about to be opened.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "bkkrSplitPaneVisible",
          "target": "body",
          "capture": false,
          "passive": false
        },
        {
          "event": "click",
          "capture": true,
          "passive": false
        },
        {
          "event": "keydown",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [
        {
          "name": "--backdrop-opacity",
          "annotation": "prop",
          "docs": "Opacity of the backdrop"
        },
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the menu"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the menu"
        },
        {
          "name": "--max-height",
          "annotation": "prop",
          "docs": "Maximum height of the menu"
        },
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Maximum width of the menu"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the menu"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Minimum width of the menu"
        },
        {
          "name": "--overflow",
          "annotation": "prop",
          "docs": "Overflow"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding"
        },
        {
          "name": "--width",
          "annotation": "prop",
          "docs": "Width of the menu"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "backdrop",
          "docs": "The backdrop that appears over the main content when the menu is open."
        },
        {
          "name": "container",
          "docs": "The container for the menu content."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-backdrop"
      ],
      "dependencyGraph": {
        "bkkr-menu": [
          "bkkr-backdrop"
        ]
      }
    },
    {
      "filePath": "./src/components/menu-toggle/menu-toggle.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-menu-toggle",
      "readme": "# bkkr-menu-toggle\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "autoHide",
          "type": "boolean",
          "mutable": false,
          "attr": "auto-hide",
          "reflectToAttr": false,
          "docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep bkkr-menu-toggle` always visible regardless the state of the menu.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "menu",
          "type": "string | undefined",
          "mutable": false,
          "attr": "menu",
          "reflectToAttr": false,
          "docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `bkkr-menu-toggle` will toggle the\nfirst menu that is active.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "bkkrMenuChange",
          "target": "body",
          "capture": false,
          "passive": false
        },
        {
          "event": "bkkrSplitPaneVisible",
          "target": "body",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/modal/modal.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-modal",
      "readme": "# bkkr-modal\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Content is placed inside of the `.modal-content` element."
        },
        {
          "name": "part",
          "text": "backdrop - The `bkkr-backdrop` element."
        },
        {
          "name": "part",
          "text": "content - The wrapper element for the default slot."
        },
        {
          "name": "part",
          "text": "handle - The handle that is displayed at the top of the sheet modal when `handle=\"true\"`."
        }
      ],
      "usage": {
        "angular": "```typescript\nimport { Component } from '@angular/core';\nimport { ModalController } from '@bkkr/angular';\nimport { ModalPage } from '../modal/modal.page';\n\n@Component({\n  selector: 'modal-example',\n  templateUrl: 'modal-example.html',\n  styleUrls: ['./modal-example.css']\n})\nexport class ModalExample {\n  constructor(public modalController: ModalController) {\n\n  }\n\n  async presentModal() {\n    const modal = await this.modalController.create({\n      component: ModalPage,\n      cssClass: 'my-custom-class'\n    });\n    return await modal.present();\n  }\n}\n```",
        "javascript": "```javascript\ncustomElements.define('modal-page', class extends HTMLElement {\n  connectedCallback() {\n    this.innerHTML = `\n<bkkr-header>\n  <bkkr-toolbar>\n    <bkkr-title>Modal Header</bkkr-title>\n    <bkkr-buttons slot=\"primary\">\n      <bkkr-button onClick=\"dismissModal()\">\n        <bkkr-icon slot=\"icon-only\" name=\"close\"></bkkr-icon>\n      </bkkr-button>\n    </bkkr-buttons>\n  </bkkr-toolbar>\n</bkkr-header>\n<bkkr-content class=\"bkkr-padding\">\n  Modal Content\n</bkkr-content>`;\n  }\n});\n\nfunction presentModal() {\n  // create the modal with the `modal-page` component\n  const modalElement = document.createElement('bkkr-modal');\n  modalElement.component = 'modal-page';\n  modalElement.cssClass = 'my-custom-class';\n\n  // present the modal\n  document.body.appendChild(modalElement);\n  return modalElement.present();\n}\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the modal will animate.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "backdropBreakpoint",
          "type": "number",
          "mutable": false,
          "attr": "backdrop-breakpoint",
          "reflectToAttr": false,
          "docs": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "backdropDismiss",
          "type": "boolean",
          "mutable": false,
          "attr": "backdrop-dismiss",
          "reflectToAttr": false,
          "docs": "If `true`, the modal will be dismissed when the backdrop is clicked.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "breakpoints",
          "type": "number[] | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]",
          "docsTags": [],
          "values": [
            {
              "type": "number[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "canDismiss",
          "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean | undefined",
          "mutable": false,
          "attr": "can-dismiss",
          "reflectToAttr": false,
          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.",
          "docsTags": [],
          "values": [
            {
              "type": "((data?: any, role?: string"
            },
            {
              "type": "undefined) => Promise<boolean>)"
            },
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "closeButton",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "close-button",
          "reflectToAttr": false,
          "docs": "If `true`, the modal will have a close button on large screens.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "closeIcon",
          "type": "string",
          "mutable": false,
          "attr": "close-icon",
          "reflectToAttr": false,
          "docs": "The icon to use when `closeButton` is set to `true`.",
          "docsTags": [],
          "default": "'xmark'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "duration",
          "type": "number",
          "mutable": false,
          "attr": "duration",
          "reflectToAttr": false,
          "docs": "How many milliseconds to wait before hiding the drawer. By default, it won't disappear.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enterAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the modal is presented.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "gestureDirection",
          "type": "\"x\" | \"y\" | undefined",
          "mutable": false,
          "attr": "gesture-direction",
          "reflectToAttr": false,
          "docs": "Additional attributes to pass to the modal.",
          "docsTags": [],
          "values": [
            {
              "value": "x",
              "type": "string"
            },
            {
              "value": "y",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "handle",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "handle",
          "reflectToAttr": false,
          "docs": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "handleBehavior",
          "type": "\"cycle\" | \"none\" | undefined",
          "mutable": false,
          "attr": "handle-behavior",
          "reflectToAttr": false,
          "docs": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal).",
          "docsTags": [],
          "default": "'cycle'",
          "values": [
            {
              "value": "cycle",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "htmlAttributes",
          "type": "undefined | { [key: string]: any; }",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Additional attributes to pass to the modal.",
          "docsTags": [],
          "values": [
            {
              "type": "undefined"
            },
            {
              "type": "{ [key: string]: any; }"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "initialBreakpoint",
          "type": "number | undefined",
          "mutable": false,
          "attr": "initial-breakpoint",
          "reflectToAttr": false,
          "docs": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "isOpen",
          "type": "boolean",
          "mutable": false,
          "attr": "is-open",
          "reflectToAttr": false,
          "docs": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "keepContentsMounted",
          "type": "boolean",
          "mutable": false,
          "attr": "keep-contents-mounted",
          "reflectToAttr": false,
          "docs": "If `true`, the component passed into `bkkr-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "keyboardClose",
          "type": "boolean",
          "mutable": false,
          "attr": "keyboard-close",
          "reflectToAttr": false,
          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "leaveAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the modal is dismissed.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "presentingElement",
          "type": "HTMLElement | undefined",
          "mutable": true,
          "reflectToAttr": false,
          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other.",
          "docsTags": [],
          "default": "document.querySelector('bkkr-router-outlet') || document.querySelector('bkkr-root') || document.body",
          "values": [
            {
              "type": "HTMLElement"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "showBackdrop",
          "type": "boolean",
          "mutable": false,
          "attr": "show-backdrop",
          "reflectToAttr": false,
          "docs": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "swipeToClose",
          "type": "boolean",
          "mutable": false,
          "attr": "swipe-to-close",
          "reflectToAttr": false,
          "docs": "If `true`, the modal can be swiped to dismiss.",
          "docsTags": [
            {
              "name": "deprecated",
              "text": "- To prevent modals from dismissing, use canDismiss instead."
            }
          ],
          "default": "true",
          "deprecation": "- To prevent modals from dismissing, use canDismiss instead.",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "trigger",
          "type": "string | undefined",
          "mutable": false,
          "attr": "trigger",
          "reflectToAttr": false,
          "docs": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "dismiss",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
          "parameters": [],
          "docs": "Dismiss the modal overlay after it has been presented.",
          "docsTags": [
            {
              "name": "param",
              "text": "data Any data to emit in the dismiss events."
            },
            {
              "name": "param",
              "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
            }
          ]
        },
        {
          "name": "getCurrentBreakpoint",
          "returns": {
            "type": "Promise<number | undefined>",
            "docs": ""
          },
          "signature": "getCurrentBreakpoint() => Promise<number | undefined>",
          "parameters": [],
          "docs": "Returns the current breakpoint of a sheet style modal",
          "docsTags": []
        },
        {
          "name": "onDidDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the modal did dismiss.",
          "docsTags": []
        },
        {
          "name": "onWillDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the modal will dismiss.",
          "docsTags": []
        },
        {
          "name": "present",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "present() => Promise<void>",
          "parameters": [],
          "docs": "Present the modal overlay after it has been created.",
          "docsTags": []
        },
        {
          "name": "setCurrentBreakpoint",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "setCurrentBreakpoint(breakpoint: number) => Promise<void>",
          "parameters": [],
          "docs": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrBreakpointDidChange",
          "detail": "ModalBreakpointChangeEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the modal breakpoint has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrModalDidDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the modal has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrModalDidPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the modal has presented.",
          "docsTags": []
        },
        {
          "event": "bkkrModalWillDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the modal has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrModalWillPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the modal has presented.",
          "docsTags": []
        },
        {
          "event": "didDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the modal has dismissed.\nShorthand for bkkrModalDidDismiss.",
          "docsTags": []
        },
        {
          "event": "didPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the modal has presented.\nShorthand for bkkrModalWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the modal has dismissed.\nShorthand for bkkrModalWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the modal has presented.\nShorthand for bkkrModalWillPresent.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--backdrop-opacity",
          "annotation": "prop",
          "docs": "Opacity of the backdrop"
        },
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the modal content"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color of the modal content"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the modal content"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style of the modal content"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width of the modal content"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the modal"
        },
        {
          "name": "--max-height",
          "annotation": "prop",
          "docs": "Maximum height of the modal"
        },
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Maximum width of the modal"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the modal"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Minimum width of the modal"
        },
        {
          "name": "--width",
          "annotation": "prop",
          "docs": "Width of the modal"
        }
      ],
      "slots": [
        {
          "name": "",
          "docs": "Content is placed inside of the `.modal-content` element."
        }
      ],
      "parts": [
        {
          "name": "backdrop",
          "docs": "The `bkkr-backdrop` element."
        },
        {
          "name": "content",
          "docs": "The wrapper element for the default slot."
        },
        {
          "name": "handle",
          "docs": "The handle that is displayed at the top of the sheet modal when `handle=\"true\"`."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-backdrop",
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-modal": [
          "bkkr-backdrop",
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/nav/nav.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-nav",
      "readme": "# bkkr-nav\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the nav button.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "download",
          "type": "string | undefined",
          "mutable": false,
          "attr": "download",
          "reflectToAttr": false,
          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "layout",
          "type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
          "mutable": false,
          "attr": "layout",
          "reflectToAttr": false,
          "docs": "Set the layout of the text and icon in the nav bar.\nIt defaults to `'icon-top'`.",
          "docsTags": [],
          "default": "'icon-top'",
          "values": [
            {
              "value": "icon-bottom",
              "type": "string"
            },
            {
              "value": "icon-end",
              "type": "string"
            },
            {
              "value": "icon-hide",
              "type": "string"
            },
            {
              "value": "icon-start",
              "type": "string"
            },
            {
              "value": "icon-top",
              "type": "string"
            },
            {
              "value": "label-hide",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "nav",
          "type": "string | undefined",
          "mutable": false,
          "attr": "nav",
          "reflectToAttr": false,
          "docs": "A nav id for each `bkkr-tabs`. It's used internally to reference\nthe selected nav.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "rel",
          "type": "string | undefined",
          "mutable": false,
          "attr": "rel",
          "reflectToAttr": false,
          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "selected",
          "type": "boolean",
          "mutable": true,
          "attr": "selected",
          "reflectToAttr": false,
          "docs": "The selected nav component",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "target",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target",
          "reflectToAttr": false,
          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "bkkrNavBarChanged",
          "target": "window",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the nav button"
        },
        {
          "name": "--background-focused",
          "annotation": "prop",
          "docs": "Background of the nav button when focused with the tab key"
        },
        {
          "name": "--background-focused-opacity",
          "annotation": "prop",
          "docs": "Opacity of the nav button background when focused with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the nav button when hovered with cursor"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the nav button"
        },
        {
          "name": "--color-focused",
          "annotation": "prop",
          "docs": "Color of the nav button when focused with the tab key"
        },
        {
          "name": "--color-selected",
          "annotation": "prop",
          "docs": "Color of the selected nav button"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the nav button"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the nav button"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the nav button"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the nav button"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/navs/navs.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-navs",
      "readme": "# bkkr-navs\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-content>\n</bkkr-content>\n<bkkr-footer>\n    <bkkr-toolbar>\n        <bkkr-navs>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"home\"></bkkr-icon>\n            </bkkr-nav>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"compass\"></bkkr-icon>\n                <bkkr-badge>6</bkkr-badge>\n            </bkkr-nav>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"search\"></bkkr-icon>\n            </bkkr-nav>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"bell\"></bkkr-icon>\n            </bkkr-nav>\n        </bkkr-navs>\n    </bkkr-toolbar>\n</bkkr-footer>\n```",
        "javascript": "```html\n<bkkr-content>\n</bkkr-content>\n<bkkr-footer>\n    <bkkr-toolbar>\n        <bkkr-navs>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"home\"></bkkr-icon>\n            </bkkr-nav>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"compass\"></bkkr-icon>\n                <bkkr-badge>6</bkkr-badge>\n            </bkkr-nav>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"search\"></bkkr-icon>\n            </bkkr-nav>\n            <bkkr-nav href=\"#\">\n                <bkkr-icon name=\"bell\"></bkkr-icon>\n            </bkkr-nav>\n        </bkkr-navs>\n    </bkkr-toolbar>\n</bkkr-footer>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "selectedNav",
          "type": "string | undefined",
          "mutable": false,
          "attr": "selected-nav",
          "reflectToAttr": false,
          "docs": "The selected nav component",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the tab bar"
        },
        {
          "name": "--color-selected",
          "annotation": "prop",
          "docs": "Selected color of the tab bar"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/note/note.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-note",
      "readme": "# bkkr-note\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default Note -->\n<bkkr-note>Default Note</bkkr-note>\n\n<!-- Note Colors -->\n<bkkr-note color=\"primary\">Primary Note</bkkr-note>\n<bkkr-note color=\"secondary\">Secondary Note</bkkr-note>\n<bkkr-note color=\"danger\">Danger Note</bkkr-note>\n<bkkr-note color=\"light\">Light Note</bkkr-note>\n<bkkr-note color=\"dark\">Dark Note</bkkr-note>\n\n<!-- Note in item -->\n<bkkr-item>\n    <bkkr-label>Note</bkkr-label>\n    <bkkr-item type=\"text\"></bkkr-item>\n    <bkkr-note slot=\"helper\" color=\"danger\">This field is required</bkkr-note>\n</bkkr-item>\n```",
        "javascript": "```html\n<!-- Default Note -->\n<bkkr-note>Default Note</bkkr-note>\n\n<!-- Note Colors -->\n<bkkr-note color=\"primary\">Primary Note</bkkr-note>\n<bkkr-note color=\"secondary\">Secondary Note</bkkr-note>\n<bkkr-note color=\"danger\">Danger Note</bkkr-note>\n<bkkr-note color=\"light\">Light Note</bkkr-note>\n<bkkr-note color=\"dark\">Dark Note</bkkr-note>\n\n<!-- Note in item -->\n<bkkr-item>\n    <bkkr-label>Note</bkkr-label>\n    <bkkr-item type=\"text\"></bkkr-item>\n    <bkkr-note slot=\"helper\" color=\"danger\">This field is required</bkkr-note>\n</bkkr-item>\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the error note will appear animated.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the badge"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [
        "bkkr-item"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "bkkr-item": [
          "bkkr-note"
        ]
      }
    },
    {
      "filePath": "./src/components/paginator/paginator.tsx",
      "encapsulation": "none",
      "tag": "bkkr-paginator",
      "readme": "# bkkr-paginator\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-content>\n    <bkkr-container class=\"mb-3\">\n        <bkkr-button (click)=\"togglePaginator()\" expand=\"block\">\n            Toggle Infinite Scroll\n        </bkkr-button>\n    </bkkr-container>\n\n    <bkkr-paginator threshold=\"100px\" infinite=\"true\"  items=\"110\" length=\"10\" page=\"7\" (bkkrPaginator)=\"loadData($event)\">\n        <bkkr-list id=\"list\">\n        </bkkr-list>\n    </bkkr-paginator>\n</bkkr-content>\n```",
        "javascript": "```html\n<bkkr-content>\n    <bkkr-container class=\"mb-3\">\n        <bkkr-button onClick=\"togglePaginator()\" expand=\"block\">\n            Toggle Infinite Scroll\n        </bkkr-button>\n    </bkkr-container>\n\n    <bkkr-paginator threshold=\"100px\" infinite=\"true\" id=\"paginator\" items=\"110\" length=\"10\" page=\"7\">\n        <bkkr-list id=\"list\">\n        </bkkr-list>\n    </bkkr-paginator>\n</bkkr-content>\n\n<script>\n    const paginator = document.getElementById('paginator');\n\n    function togglePaginator() {\n      paginator.disabled = !paginator.disabled;\n    }\n\n    paginator.addEventListener('bkkrPaginator', async function () {\n      console.log('Loading data...');\n      await wait(500);\n      paginator.complete();\n      appendItems();\n\n      console.log('Done');\n    });\n</script>\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "Animate loading indication.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "arrowIcon",
          "type": "string | undefined",
          "mutable": false,
          "attr": "arrow-icon",
          "reflectToAttr": false,
          "docs": "Arrow icon beign used on next and previous buttons.",
          "docsTags": [],
          "default": "'chevron'",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "changeLength",
          "type": "boolean",
          "mutable": false,
          "attr": "change-length",
          "reflectToAttr": false,
          "docs": "Set true, to adjustable page size.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the paginator will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the paginator from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe paginator is no longer needed.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "items",
          "type": "number",
          "mutable": false,
          "attr": "items",
          "reflectToAttr": false,
          "docs": "Number of items.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "length",
          "type": "number",
          "mutable": false,
          "attr": "length",
          "reflectToAttr": false,
          "docs": "Length of the page.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "loadingText",
          "type": "SafeString | string | undefined",
          "mutable": false,
          "attr": "loading-text",
          "reflectToAttr": false,
          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Bkkr>` would become\n`&lt;Bkkr&gt;`",
          "docsTags": [],
          "values": [
            {
              "type": "SafeString"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "loadingType",
          "type": "\"ambient\" | \"spinner\"",
          "mutable": false,
          "attr": "loading-type",
          "reflectToAttr": false,
          "docs": "Type of loading animation",
          "docsTags": [],
          "default": "'spinner'",
          "values": [
            {
              "value": "ambient",
              "type": "string"
            },
            {
              "value": "spinner",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "page",
          "type": "number",
          "mutable": true,
          "attr": "page",
          "reflectToAttr": true,
          "docs": "The currently displayed page.",
          "docsTags": [],
          "default": "1",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerDirection",
          "type": "\"back\" | \"forward\" | \"root\"",
          "mutable": false,
          "attr": "router-direction",
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "docsTags": [],
          "default": "'forward'",
          "values": [
            {
              "value": "back",
              "type": "string"
            },
            {
              "value": "forward",
              "type": "string"
            },
            {
              "value": "root",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "spinner",
          "type": "\"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
          "mutable": false,
          "attr": "spinner",
          "reflectToAttr": false,
          "docs": "An animated SVG spinner that shows while loading.",
          "docsTags": [],
          "values": [
            {
              "value": "circles",
              "type": "string"
            },
            {
              "value": "circular",
              "type": "string"
            },
            {
              "value": "crescent",
              "type": "string"
            },
            {
              "value": "dots",
              "type": "string"
            },
            {
              "value": "lines",
              "type": "string"
            },
            {
              "value": "lines-sharp",
              "type": "string"
            },
            {
              "value": "lines-sharp-small",
              "type": "string"
            },
            {
              "value": "lines-small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "statusText",
          "type": "string",
          "mutable": false,
          "attr": "status-text",
          "reflectToAttr": false,
          "docs": "Set the the status text.",
          "docsTags": [],
          "default": "'/'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "toolbar",
          "type": "boolean",
          "mutable": false,
          "attr": "toolbar",
          "reflectToAttr": false,
          "docs": "Show or hide the toolbar of pagination element.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "complete",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "complete() => Promise<void>",
          "parameters": [],
          "docs": "Call `complete()` within the `bkkrPaginator` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the paginator's state from `loading`\nto `enabled`.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrPageSizeChanged",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when page size have changed.",
          "docsTags": []
        },
        {
          "event": "bkkrPaginator",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the stepper have changed. From within your paginator handler,\nyou must call the paginator's `complete()` method when\nyour async operation has completed.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "bkkr-spinner",
        "bkkr-select",
        "bkkr-select-option",
        "bkkr-button",
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-paginator": [
          "bkkr-spinner",
          "bkkr-select",
          "bkkr-select-option",
          "bkkr-button",
          "bkkr-icon"
        ],
        "bkkr-select": [
          "bkkr-select-choices",
          "bkkr-popover",
          "bkkr-drawer",
          "bkkr-alert",
          "bkkr-spinner",
          "bkkr-icon"
        ],
        "bkkr-select-choices": [
          "bkkr-icon"
        ],
        "bkkr-popover": [
          "bkkr-backdrop"
        ],
        "bkkr-drawer": [
          "bkkr-backdrop",
          "bkkr-icon"
        ],
        "bkkr-alert": [
          "bkkr-backdrop"
        ]
      }
    },
    {
      "filePath": "./src/components/popover/popover.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-popover",
      "readme": "# bkkr-popover\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Content is placed inside of the `.popover-content` element."
        },
        {
          "name": "part",
          "text": "backdrop - The `bkkr-backdrop` element."
        },
        {
          "name": "part",
          "text": "arrow - The arrow that points to the reference element. Only applies on `ios` mode."
        },
        {
          "name": "part",
          "text": "content - The wrapper element for the default slot."
        }
      ],
      "usage": {
        "angular": "```typescript\nimport { Component } from '@angular/core';\nimport { PopoverController } from '@bkkr/angular';\nimport { PopoverPage } from '../popover/popover.page';\n\n@Component({\n  selector: 'popover-example',\n  templateUrl: 'popover-example.html',\n  styleUrls: ['./popover-example.css']\n})\nexport class PopoverExample {\n  constructor(public popoverController: PopoverController) {\n\n  }\n\n  async presentPopover() {\n    const popover = await this.popoverController.create({\n      component: PopoverPage,\n      event: ev,\n      cssClass: 'my-custom-class'\n    });\n    return await popover.present();\n  }\n}\n```",
        "javascript": "```javascript\ncustomElements.define('popover-page', class extends HTMLElement {\n  connectedCallback() {\n    this.innerHTML = `\n<bkkr-header>\n  <bkkr-toolbar>\n    <bkkr-title>Popover Header</bkkr-title>\n    <bkkr-buttons slot=\"primary\">\n      <bkkr-button onClick=\"dismissPopover()\">\n        <bkkr-icon slot=\"icon-only\" name=\"close\"></bkkr-icon>\n      </bkkr-button>\n    </bkkr-buttons>\n  </bkkr-toolbar>\n</bkkr-header>\n<bkkr-content class=\"bkkr-padding\">\n  Popover Content\n</bkkr-content>`;\n  }\n});\n\nfunction presentPopover() {\n  // create the popover with the `popover-page` component\n  const popoverElement = document.createElement('bkkr-popover');\n  popoverElement.component = 'popover-page';\n  popoverElement.cssClass = 'my-custom-class';\n\n  // present the popover\n  document.body.appendChild(popoverElement);\n  return popoverElement.present();\n}\n```"
      },
      "props": [
        {
          "name": "alignment",
          "type": "\"center\" | \"end\" | \"start\" | undefined",
          "mutable": false,
          "attr": "alignment",
          "reflectToAttr": false,
          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'`.",
          "docsTags": [],
          "default": "'start'",
          "values": [
            {
              "value": "center",
              "type": "string"
            },
            {
              "value": "end",
              "type": "string"
            },
            {
              "value": "start",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the popover will animate.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "arrow",
          "type": "boolean",
          "mutable": false,
          "attr": "arrow",
          "reflectToAttr": false,
          "docs": "If `true`, the popover will display an arrow that points at the\n`reference`.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "backdropDismiss",
          "type": "boolean",
          "mutable": false,
          "attr": "backdrop-dismiss",
          "reflectToAttr": false,
          "docs": "If `true`, the popover will be dismissed when the backdrop is clicked.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "component",
          "type": "Function | HTMLElement | null | string | undefined",
          "mutable": false,
          "attr": "component",
          "reflectToAttr": false,
          "docs": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `bkkr-popover`.",
          "docsTags": [],
          "values": [
            {
              "type": "Function"
            },
            {
              "type": "HTMLElement"
            },
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "componentProps",
          "type": "undefined | { [key: string]: any; }",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component.",
          "docsTags": [],
          "values": [
            {
              "type": "undefined"
            },
            {
              "type": "{ [key: string]: any; }"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "dismissOnSelect",
          "type": "boolean",
          "mutable": false,
          "attr": "dismiss-on-select",
          "reflectToAttr": false,
          "docs": "If `true`, the popover will be automatically\ndismissed when the content has been clicked.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enterAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the popover is presented.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "event",
          "type": "any",
          "mutable": false,
          "attr": "event",
          "reflectToAttr": false,
          "docs": "The event to pass to the popover animation.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "htmlAttributes",
          "type": "HTMLAttributes<HTMLElement> | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Additional attributes to pass to the popover.",
          "docsTags": [],
          "values": [
            {
              "type": "HTMLAttributes<HTMLElement>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "isOpen",
          "type": "boolean",
          "mutable": false,
          "attr": "is-open",
          "reflectToAttr": false,
          "docs": "If `true`, the popover will open. If `false`, the popover will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the popoverController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe popover dismisses. You will need to do that in your code.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "keepContentsMounted",
          "type": "boolean",
          "mutable": false,
          "attr": "keep-contents-mounted",
          "reflectToAttr": false,
          "docs": "If `true`, the component passed into `bkkr-popover` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "keyboardClose",
          "type": "boolean",
          "mutable": false,
          "attr": "keyboard-close",
          "reflectToAttr": false,
          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "leaveAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the popover is dismissed.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "reference",
          "type": "\"event\" | \"trigger\"",
          "mutable": false,
          "attr": "reference",
          "reflectToAttr": false,
          "docs": "Describes what to position the popover relative to.\nIf `'trigger'`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `'event'`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
          "docsTags": [],
          "default": "'trigger'",
          "values": [
            {
              "value": "event",
              "type": "string"
            },
            {
              "value": "trigger",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "showBackdrop",
          "type": "boolean",
          "mutable": false,
          "attr": "show-backdrop",
          "reflectToAttr": false,
          "docs": "If `true`, a backdrop will be displayed behind the popover.\nThis property controls whether or not the backdrop\ndarkens the screen when the popover is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "side",
          "type": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
          "mutable": false,
          "attr": "side",
          "reflectToAttr": false,
          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.",
          "docsTags": [],
          "default": "'bottom'",
          "values": [
            {
              "value": "bottom",
              "type": "string"
            },
            {
              "value": "end",
              "type": "string"
            },
            {
              "value": "left",
              "type": "string"
            },
            {
              "value": "right",
              "type": "string"
            },
            {
              "value": "start",
              "type": "string"
            },
            {
              "value": "top",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"auto\" | \"cover\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "Describes how to calculate the popover width.\nIf `'cover'`, the popover width will match the width of the trigger.\nIf `'auto'`, the popover width will be determined by the content in\nthe popover.",
          "docsTags": [],
          "default": "'auto'",
          "values": [
            {
              "value": "auto",
              "type": "string"
            },
            {
              "value": "cover",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "trigger",
          "type": "string | undefined",
          "mutable": false,
          "attr": "trigger",
          "reflectToAttr": false,
          "docs": "An ID corresponding to the trigger element that\ncauses the popover to open. Use the `trigger-action`\nproperty to customize the interaction that results in\nthe popover opening.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "triggerAction",
          "type": "\"click\" | \"context-menu\" | \"hover\"",
          "mutable": false,
          "attr": "trigger-action",
          "reflectToAttr": false,
          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
          "docsTags": [],
          "default": "'click'",
          "values": [
            {
              "value": "click",
              "type": "string"
            },
            {
              "value": "context-menu",
              "type": "string"
            },
            {
              "value": "hover",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "dismiss",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
          "parameters": [],
          "docs": "Dismiss the popover overlay after it has been presented.",
          "docsTags": [
            {
              "name": "param",
              "text": "data Any data to emit in the dismiss events."
            },
            {
              "name": "param",
              "text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
            },
            {
              "name": "param",
              "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
            }
          ]
        },
        {
          "name": "onDidDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the popover did dismiss.",
          "docsTags": []
        },
        {
          "name": "onWillDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the popover will dismiss.",
          "docsTags": []
        },
        {
          "name": "present",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
          "parameters": [],
          "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrPopoverDidDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the popover has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrPopoverDidPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the popover has presented.",
          "docsTags": []
        },
        {
          "event": "bkkrPopoverWillDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the popover has dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrPopoverWillPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the popover has presented.",
          "docsTags": []
        },
        {
          "event": "didDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the popover has dismissed.\nShorthand for bkkrPopoverDidDismiss.",
          "docsTags": []
        },
        {
          "event": "didPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the popover has presented.\nShorthand for bkkrPopoverWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the popover has dismissed.\nShorthand for bkkrPopoverWillDismiss.",
          "docsTags": []
        },
        {
          "event": "willPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the popover has presented.\nShorthand for bkkrPopoverWillPresent.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the popover"
        },
        {
          "name": "--bkkr-backdrop-opacity",
          "annotation": "prop",
          "docs": "Opacity of the backdrop"
        },
        {
          "name": "--border",
          "annotation": "prop",
          "docs": "Border of the popover"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the popover"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the popover"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the popover"
        },
        {
          "name": "--max-height",
          "annotation": "prop",
          "docs": "Maximum height of the popover"
        },
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Maximum width of the popover"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the popover"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Minimum width of the popover"
        },
        {
          "name": "--width",
          "annotation": "prop",
          "docs": "Width of the popover"
        }
      ],
      "slots": [
        {
          "name": "",
          "docs": "Content is placed inside of the `.popover-content` element."
        }
      ],
      "parts": [
        {
          "name": "arrow",
          "docs": "The arrow that points to the reference element. Only applies on `ios` mode."
        },
        {
          "name": "backdrop",
          "docs": "The `bkkr-backdrop` element."
        },
        {
          "name": "content",
          "docs": "The wrapper element for the default slot."
        }
      ],
      "dependents": [
        "bkkr-select"
      ],
      "dependencies": [
        "bkkr-backdrop"
      ],
      "dependencyGraph": {
        "bkkr-popover": [
          "bkkr-backdrop"
        ],
        "bkkr-select": [
          "bkkr-popover"
        ]
      }
    },
    {
      "filePath": "./src/components/progress-bar/progress-bar.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-progress-bar",
      "readme": "# bkkr-progress-bar\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default Progressbar -->\n<bkkr-progress-bar></bkkr-progress-bar>\n\n<!-- Default Progressbar with 50 percent -->\n<bkkr-progress-bar [value]=\"0.5\"></bkkr-progress-bar>\n\n<!-- Colorize Progressbar -->\n<bkkr-progress-bar color=\"primary\" [value]=\"0.5\"></bkkr-progress-bar>\n<bkkr-progress-bar color=\"secondary\" [value]=\"0.5\"></bkkr-progress-bar>\n\n<!-- Other types -->\n<bkkr-progress-bar [value]=\"0.25\" [buffer]=\"0.5\"></bkkr-progress-bar>\n<bkkr-progress-bar type=\"indeterminate\"></bkkr-progress-bar>\n<bkkr-progress-bar type=\"indeterminate\" reversed=\"true\"></bkkr-progress-bar>\n```",
        "javascript": "```html\n<!-- Default Progressbar -->\n<bkkr-progress-bar></bkkr-progress-bar>\n\n<!-- Default Progressbar with 50 percent -->\n<bkkr-progress-bar value=\"0.5\"></bkkr-progress-bar>\n\n<!-- Colorize Progressbar -->\n<bkkr-progress-bar color=\"primary\" value=\"0.5\"></bkkr-progress-bar>\n<bkkr-progress-bar color=\"secondary\" value=\"0.5\"></bkkr-progress-bar>\n\n<!-- Other types -->\n<bkkr-progress-bar value=\"0.25\" buffer=\"0.5\"></bkkr-progress-bar>\n<bkkr-progress-bar type=\"indeterminate\"></bkkr-progress-bar>\n<bkkr-progress-bar type=\"indeterminate\" reversed=\"true\"></bkkr-progress-bar>\n```"
      },
      "props": [
        {
          "name": "buffer",
          "type": "number",
          "mutable": false,
          "attr": "buffer",
          "reflectToAttr": false,
          "docs": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1].",
          "docsTags": [],
          "default": "1",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "reversed",
          "type": "boolean",
          "mutable": false,
          "attr": "reversed",
          "reflectToAttr": false,
          "docs": "If true, reverse the progress bar direction.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"determinate\" | \"indeterminate\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).",
          "docsTags": [],
          "default": "'determinate'",
          "values": [
            {
              "value": "determinate",
              "type": "string"
            },
            {
              "value": "indeterminate",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "number",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the bkkr-progress-bar itself."
        },
        {
          "name": "--buffer-background",
          "annotation": "prop",
          "docs": "Color of the buffer bar"
        },
        {
          "name": "--progress-background",
          "annotation": "prop",
          "docs": "Color of the progress bar"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [
        "bkkr-infinite-scroll"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "bkkr-infinite-scroll": [
          "bkkr-progress-bar"
        ]
      }
    },
    {
      "filePath": "./src/components/radio/radio.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-radio",
      "readme": "# bkkr-radio\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "container - The container for the radio mark."
        },
        {
          "name": "part",
          "text": "mark - The checkmark or dot used to indicate the checked state."
        }
      ],
      "usage": {
        "angular": "```html\n<bkkr-list>\n  <bkkr-radio-group value=\"biff\">\n    <bkkr-list-header>\n      <bkkr-label>Name</bkkr-label>\n    </bkkr-list-header>\n\n    <bkkr-item>\n      <bkkr-label>Biff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"biff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Griff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"griff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Buford</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"buford\"></bkkr-radio>\n    </bkkr-item>\n  </bkkr-radio-group>\n</bkkr-list>\n```",
        "javascript": "```html\n<bkkr-list>\n  <bkkr-radio-group value=\"biff\">\n    <bkkr-list-header>\n      <bkkr-label>Name</bkkr-label>\n    </bkkr-list-header>\n\n    <bkkr-item>\n      <bkkr-label>Biff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"biff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Griff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"griff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Buford</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"buford\"></bkkr-radio>\n    </bkkr-item>\n  </bkkr-radio-group>\n</bkkr-list>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the radio.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "the value of the radio.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the radio button loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the radio button has focus.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Color of the radio"
        },
        {
          "name": "--background-checked",
          "annotation": "prop",
          "docs": "Color of the checked radio"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the radio"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "container",
          "docs": "The container for the radio mark."
        },
        {
          "name": "mark",
          "docs": "The checkmark or dot used to indicate the checked state."
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/radio-group/radio-group.tsx",
      "encapsulation": "none",
      "tag": "bkkr-radio-group",
      "readme": "# bkkr-radio-group\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-list>\n  <bkkr-radio-group value=\"biff\">\n    <bkkr-list-header>\n      <bkkr-label>Name</bkkr-label>\n    </bkkr-list-header>\n\n    <bkkr-item>\n      <bkkr-label>Biff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"biff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Griff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"griff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Buford</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"buford\"></bkkr-radio>\n    </bkkr-item>\n  </bkkr-radio-group>\n</bkkr-list>\n```",
        "javascript": "```html\n<bkkr-list>\n  <bkkr-radio-group value=\"biff\">\n    <bkkr-list-header>\n      <bkkr-label>Name</bkkr-label>\n    </bkkr-list-header>\n\n    <bkkr-item>\n      <bkkr-label>Biff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"biff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Griff</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"griff\"></bkkr-radio>\n    </bkkr-item>\n\n    <bkkr-item>\n      <bkkr-label>Buford</bkkr-label>\n      <bkkr-radio slot=\"start\" value=\"buford\"></bkkr-radio>\n    </bkkr-item>\n  </bkkr-radio-group>\n</bkkr-list>\n```"
      },
      "props": [
        {
          "name": "allowEmptySelection",
          "type": "boolean",
          "mutable": false,
          "attr": "allow-empty-selection",
          "reflectToAttr": false,
          "docs": "If `false`, the radios cannot be deselected.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "the value of the radio group.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrChange",
          "detail": "RadioGroupChangeEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value has changed.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "keydown",
          "target": "document",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/range/range.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-range",
      "readme": "# bkkr-range\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "slot",
          "text": "start - Content is placed to the left of the range slider in LTR, and to the right in RTL."
        },
        {
          "name": "slot",
          "text": "end - Content is placed to the right of the range slider in LTR, and to the left in RTL."
        },
        {
          "name": "part",
          "text": "tick - An inactive tick mark."
        },
        {
          "name": "part",
          "text": "tick-active - An active tick mark."
        },
        {
          "name": "part",
          "text": "pin - The counter that appears above a knob."
        },
        {
          "name": "part",
          "text": "knob - The handle that is used to drag the range."
        },
        {
          "name": "part",
          "text": "bar - The inactive part of the bar."
        },
        {
          "name": "part",
          "text": "bar-active - The active part of the bar."
        }
      ],
      "usage": {
        "angular": "```html\n<bkkr-list>\n  <bkkr-item>\n    <bkkr-range color=\"danger\" [pin]=\"true\"></bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range [min]=\"-200\" [max]=\"200\" color=\"secondary\">\n      <bkkr-label slot=\"start\">-200</bkkr-label>\n      <bkkr-label slot=\"end\">200</bkkr-label>\n    </bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range [min]=\"20\" [max]=\"80\" [step]=\"2\">\n      <bkkr-icon size=\"small\" slot=\"start\" name=\"sunny\"></bkkr-icon>\n      <bkkr-icon slot=\"end\" name=\"sunny\"></bkkr-icon>\n    </bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range [min]=\"1000\" [max]=\"2000\" [step]=\"100\" [snaps]=\"true\" color=\"secondary\"></bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range [min]=\"1000\" [max]=\"2000\" [step]=\"100\" [snaps]=\"true\" [ticks]=\"false\" color=\"secondary\"></bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range [dualKnobs]=\"true\" [min]=\"21\" [max]=\"72\" [step]=\"3\" [snaps]=\"true\"></bkkr-range>\n  </bkkr-item>\n</bkkr-list>\n```",
        "javascript": "```html\n<bkkr-list>\n  <bkkr-item>\n    <bkkr-range color=\"danger\" pin=\"true\"></bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range min=\"-200\" max=\"200\" color=\"secondary\">\n      <bkkr-label slot=\"start\">-200</bkkr-label>\n      <bkkr-label slot=\"end\">200</bkkr-label>\n    </bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range min=\"20\" max=\"80\" step=\"2\">\n      <bkkr-icon size=\"small\" slot=\"start\" name=\"sunny\"></bkkr-icon>\n      <bkkr-icon slot=\"end\" name=\"sunny\"></bkkr-icon>\n    </bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" color=\"secondary\"></bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" ticks=\"false\" color=\"secondary\"></bkkr-range>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-range dualKnobs=\"true\" min=\"21\" max=\"72\" step=\"3\" snaps=\"true\"></bkkr-range>\n  </bkkr-item>\n</bkkr-list>\n```"
      },
      "props": [
        {
          "name": "activeBarStart",
          "type": "number | undefined",
          "mutable": true,
          "attr": "active-bar-start",
          "reflectToAttr": false,
          "docs": "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\").\nValid values are greater than or equal to the min value and less than or equal to the max value.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debounce",
          "type": "number",
          "mutable": false,
          "attr": "debounce",
          "reflectToAttr": false,
          "docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the range.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "dualKnobs",
          "type": "boolean",
          "mutable": false,
          "attr": "dual-knobs",
          "reflectToAttr": false,
          "docs": "Show two knobs.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "max",
          "type": "number",
          "mutable": false,
          "attr": "max",
          "reflectToAttr": false,
          "docs": "Maximum integer value of the range.",
          "docsTags": [],
          "default": "100",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "min",
          "type": "number",
          "mutable": false,
          "attr": "min",
          "reflectToAttr": false,
          "docs": "Minimum integer value of the range.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pin",
          "type": "boolean",
          "mutable": false,
          "attr": "pin",
          "reflectToAttr": false,
          "docs": "If `true`, a pin with integer value is shown when the knob\nis pressed.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pinFormatter",
          "type": "(value: number) => string | number",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.",
          "docsTags": [],
          "default": "(value: number): number => Math.round(value)",
          "values": [
            {
              "type": "(value: number) => string"
            },
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "snaps",
          "type": "boolean",
          "mutable": false,
          "attr": "snaps",
          "reflectToAttr": false,
          "docs": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "step",
          "type": "number",
          "mutable": false,
          "attr": "step",
          "reflectToAttr": false,
          "docs": "Specifies the value granularity.",
          "docsTags": [],
          "default": "1",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "ticks",
          "type": "boolean",
          "mutable": false,
          "attr": "ticks",
          "reflectToAttr": false,
          "docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "number | { lower: number; upper: number; }",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "the value of the range.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            },
            {
              "type": "{ lower: number; upper: number; }"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the range loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "RangeChangeEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value property has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the range has focus.",
          "docsTags": []
        },
        {
          "event": "bkkrKnobMoveEnd",
          "detail": "RangeKnobMoveEndEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the user finishes moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
          "docsTags": []
        },
        {
          "event": "bkkrKnobMoveStart",
          "detail": "RangeKnobMoveStartEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the user starts moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--bar-background",
          "annotation": "prop",
          "docs": "Background of the range bar"
        },
        {
          "name": "--bar-background-active",
          "annotation": "prop",
          "docs": "Background of the active range bar"
        },
        {
          "name": "--bar-border-radius",
          "annotation": "prop",
          "docs": "Border radius of the range bar"
        },
        {
          "name": "--bar-height",
          "annotation": "prop",
          "docs": "Height of the range bar"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the range"
        },
        {
          "name": "--knob-background",
          "annotation": "prop",
          "docs": "Background of the range knob"
        },
        {
          "name": "--knob-border-radius",
          "annotation": "prop",
          "docs": "Border radius of the range knob"
        },
        {
          "name": "--knob-box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the range knob"
        },
        {
          "name": "--knob-size",
          "annotation": "prop",
          "docs": "Size of the range knob"
        },
        {
          "name": "--pin-background",
          "annotation": "prop",
          "docs": "Background of the range pin"
        },
        {
          "name": "--pin-color",
          "annotation": "prop",
          "docs": "Color of the range pin"
        }
      ],
      "slots": [
        {
          "name": "end",
          "docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL."
        },
        {
          "name": "start",
          "docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL."
        }
      ],
      "parts": [
        {
          "name": "bar",
          "docs": "The inactive part of the bar."
        },
        {
          "name": "bar-active",
          "docs": "The active part of the bar."
        },
        {
          "name": "knob",
          "docs": "The handle that is used to drag the range."
        },
        {
          "name": "pin",
          "docs": "The counter that appears above a knob."
        },
        {
          "name": "tick",
          "docs": "An inactive tick mark."
        },
        {
          "name": "tick-active",
          "docs": "An active tick mark."
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/reorder/reorder.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-reorder",
      "readme": "# bkkr-reorder\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "icon - The icon of the reorder handle (uses bkkr-icon)."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<bkkr-reorder-group disabled=\"false\">\n  <!-- Default reorder icon, end aligned items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 1\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 2\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Default reorder icon, start aligned items -->\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 3\n    </bkkr-label>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 4\n    </bkkr-label>\n  </bkkr-item>\n\n  <!-- Custom reorder icon end items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 5\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 6\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Items wrapped in a reorder, entire item can be dragged -->\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 7\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 8\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n</bkkr-reorder-group>\n```",
        "javascript": "```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<bkkr-reorder-group disabled=\"false\">\n  <!-- Default reorder icon, end aligned items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 1\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 2\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Default reorder icon, start aligned items -->\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 3\n    </bkkr-label>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 4\n    </bkkr-label>\n  </bkkr-item>\n\n  <!-- Custom reorder icon end items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 5\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 6\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Items wrapped in a reorder, entire item can be dragged -->\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 7\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 8\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n</bkkr-reorder-group>\n```"
      },
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "click",
          "capture": true,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [
        {
          "name": "icon",
          "docs": "The icon of the reorder handle (uses bkkr-icon)."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-reorder": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/reorder-group/reorder-group.tsx",
      "encapsulation": "none",
      "tag": "bkkr-reorder-group",
      "readme": "# bkkr-reorder-group\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<bkkr-reorder-group disabled=\"false\">\n  <!-- Default reorder icon, end aligned items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 1\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 2\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Default reorder icon, start aligned items -->\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 3\n    </bkkr-label>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 4\n    </bkkr-label>\n  </bkkr-item>\n\n  <!-- Custom reorder icon end items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 5\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 6\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Items wrapped in a reorder, entire item can be dragged -->\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 7\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 8\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n</bkkr-reorder-group>\n```",
        "javascript": "```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<bkkr-reorder-group disabled=\"false\">\n  <!-- Default reorder icon, end aligned items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 1\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 2\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\"></bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Default reorder icon, start aligned items -->\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 3\n    </bkkr-label>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-reorder slot=\"start\"></bkkr-reorder>\n    <bkkr-label>\n      Item 4\n    </bkkr-label>\n  </bkkr-item>\n\n  <!-- Custom reorder icon end items -->\n  <bkkr-item>\n    <bkkr-label>\n      Item 5\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <bkkr-item>\n    <bkkr-label>\n      Item 6\n    </bkkr-label>\n    <bkkr-reorder slot=\"end\">\n      <bkkr-icon name=\"pizza\"></bkkr-icon>\n    </bkkr-reorder>\n  </bkkr-item>\n\n  <!-- Items wrapped in a reorder, entire item can be dragged -->\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 7\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n\n  <bkkr-reorder>\n    <bkkr-item>\n      <bkkr-label>\n        Item 8\n      </bkkr-label>\n    </bkkr-item>\n  </bkkr-reorder>\n</bkkr-reorder-group>\n```"
      },
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the reorder will be hidden.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "complete",
          "returns": {
            "type": "Promise<any>",
            "docs": ""
          },
          "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
          "parameters": [],
          "docs": "Completes the reorder operation. Must be called by the `bkkrItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
          "docsTags": [
            {
              "name": "param",
              "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
            }
          ]
        }
      ],
      "events": [
        {
          "event": "bkkrItemReorder",
          "detail": "ItemReorderEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/root/root.tsx",
      "encapsulation": "none",
      "tag": "bkkr-root",
      "readme": "\nRoot is a container element for an Bkkr application. There should only be one `<bkkr-root>` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `<bkkr-root>` when they are presented.\n",
      "docs": "Root is a container element for an Bkkr application. There should only be one `<bkkr-root>` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `<bkkr-root>` when they are presented.",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/route/route.tsx",
      "encapsulation": "none",
      "tag": "bkkr-route",
      "readme": "# bkkr-route\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "javascript": "```html\n<bkkr-router>\n  <bkkr-route url=\"/home\" component=\"page-home\"></bkkr-route>\n  <bkkr-route url=\"/dashboard\" component=\"page-dashboard\"></bkkr-route>\n  <bkkr-route url=\"/new-message\" component=\"page-new-message\"></bkkr-route>\n  <bkkr-route url=\"/login\" component=\"page-login\"></bkkr-route>\n</bkkr-router>\n```"
      },
      "props": [
        {
          "name": "beforeEnter",
          "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
          "docsTags": [],
          "values": [
            {
              "type": "(() => NavigationHookResult"
            },
            {
              "type": "Promise<NavigationHookResult>)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "beforeLeave",
          "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
          "docsTags": [],
          "values": [
            {
              "type": "(() => NavigationHookResult"
            },
            {
              "type": "Promise<NavigationHookResult>)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "component",
          "type": "string",
          "mutable": false,
          "attr": "component",
          "reflectToAttr": false,
          "docs": "Name of the component to load/select in the navigation outlet (`bkkr-tabs`, `bkkr-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `bkkr-tabs` it actually refers to the name of the `bkkr-tab` to select.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "componentProps",
          "type": "undefined | { [key: string]: any; }",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "undefined"
            },
            {
              "type": "{ [key: string]: any; }"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "url",
          "type": "string",
          "mutable": false,
          "attr": "url",
          "reflectToAttr": false,
          "docs": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrRouteDataChanged",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Used internally by `bkkr-router` to know when this route did change.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/route-redirect/route-redirect.tsx",
      "encapsulation": "none",
      "tag": "bkkr-route-redirect",
      "readme": "# bkkr-route-redirect\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "javascript": "```html\n<!-- Redirects when the user navigates to `/admin` but\nwill NOT redirect if the user navigates to `/admin/posts` -->\n<bkkr-route-redirect from=\"/admin\" to=\"/login\"></bkkr-route-redirect>\n\n<!-- By adding the wilcard character (*), the redirect will match\nany subpath of admin -->\n<bkkr-route-redirect from=\"/admin/*\" to=\"/login\"></bkkr-route-redirect>\n```"
      },
      "props": [
        {
          "name": "from",
          "type": "string",
          "mutable": false,
          "attr": "from",
          "reflectToAttr": false,
          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "to",
          "type": "null | string | undefined",
          "mutable": false,
          "attr": "to",
          "reflectToAttr": false,
          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `bkkr-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`bkkr-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of bkkr-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.",
          "docsTags": [],
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": true
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrRouteRedirectChanged",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`bkkr-router` captures this event in order to update his internal registry of router rules.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/router/router.tsx",
      "encapsulation": "none",
      "tag": "bkkr-router",
      "readme": "# bkkr-router\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "javascript": "```html\n<bkkr-router>\n  <bkkr-route component=\"page-tabs\">\n    <bkkr-route url=\"/schedule\" component=\"tab-schedule\">\n      <bkkr-route component=\"page-schedule\"></bkkr-route>\n      <bkkr-route url=\"/session/:sessionId\" component=\"page-session\"></bkkr-route>\n    </bkkr-route>\n\n    <bkkr-route url=\"/speakers\" component=\"tab-speaker\">\n      <bkkr-route component=\"page-speaker-list\"></bkkr-route>\n      <bkkr-route url=\"/session/:sessionId\" component=\"page-session\"></bkkr-route>\n      <bkkr-route url=\"/:speakerId\" component=\"page-speaker-detail\"></bkkr-route>\n    </bkkr-route>\n\n    <bkkr-route url=\"/map\" component=\"page-map\"></bkkr-route>\n    <bkkr-route url=\"/about\" component=\"page-about\"></bkkr-route>\n  </bkkr-route>\n\n  <bkkr-route url=\"/tutorial\" component=\"page-tutorial\"></bkkr-route>\n  <bkkr-route url=\"/login\" component=\"page-login\"></bkkr-route>\n  <bkkr-route url=\"/account\" component=\"page-account\"></bkkr-route>\n  <bkkr-route url=\"/signup\" component=\"page-signup\"></bkkr-route>\n  <bkkr-route url=\"/support\" component=\"page-support\"></bkkr-route>\n</bkkr-router>\n```"
      },
      "props": [
        {
          "name": "root",
          "type": "string",
          "mutable": false,
          "attr": "root",
          "reflectToAttr": false,
          "docs": "By default `bkkr-router` will match the routes at the root path (\"/\").\nThat can be changed when",
          "docsTags": [],
          "default": "'/'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "useHash",
          "type": "boolean",
          "mutable": false,
          "attr": "use-hash",
          "reflectToAttr": false,
          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "back",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "back() => Promise<void>",
          "parameters": [],
          "docs": "Go back to previous page in the window.history.",
          "docsTags": []
        },
        {
          "name": "push",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
          "parameters": [],
          "docs": "Navigate to the specified path.",
          "docsTags": [
            {
              "name": "param",
              "text": "path The path to navigate to."
            },
            {
              "name": "param",
              "text": "direction The direction of the animation. Defaults to `\"forward\"`."
            }
          ]
        }
      ],
      "events": [
        {
          "event": "bkkrRouteDidChange",
          "detail": "RouterEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the route had changed",
          "docsTags": []
        },
        {
          "event": "bkkrRouteWillChange",
          "detail": "RouterEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Event emitted when the route is about to change",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "popstate",
          "target": "window",
          "capture": false,
          "passive": false
        },
        {
          "event": "bkkrBackButton",
          "target": "document",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/router-link/router-link.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-router-link",
      "readme": "# bkkr-router-link\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "href",
          "type": "string | undefined",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rel",
          "type": "string | undefined",
          "mutable": false,
          "attr": "rel",
          "reflectToAttr": false,
          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "routerDirection",
          "type": "\"back\" | \"forward\" | \"root\"",
          "mutable": false,
          "attr": "router-direction",
          "reflectToAttr": false,
          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "docsTags": [],
          "default": "'forward'",
          "values": [
            {
              "value": "back",
              "type": "string"
            },
            {
              "value": "forward",
              "type": "string"
            },
            {
              "value": "root",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "target",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target",
          "reflectToAttr": false,
          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the router link"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the router link"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/router-outlet/router-outlet.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-router-outlet",
      "readme": "# bkkr-router-outlet\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the router-outlet should animate the transition of components.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "animation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "This property allows to create custom transition using AnimationBuilder functions.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "nested",
          "type": "boolean",
          "mutable": false,
          "attr": "nested",
          "reflectToAttr": false,
          "docs": "Set `true`, if the router-outlet is placed inside an another router-outlet.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/row/row.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-row",
      "readme": "# bkkr-row\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-row>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n</bkkr-row>\n\n<bkkr-row>\n    <bkkr-col [size]=\"6\">\n      bkkr-col [size=\"6\"]\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n</bkkr-row>\n```",
        "javascript": "```html\n<bkkr-row>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n</bkkr-row>\n\n<bkkr-row>\n    <bkkr-col size=\"6\">\n      bkkr-col [size=\"6\"]\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n    <bkkr-col>\n      bkkr-col\n    </bkkr-col>\n</bkkr-row>\n```"
      },
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--gutter-x",
          "annotation": "prop",
          "docs": "Horizontal space between columns"
        },
        {
          "name": "--gutter-y",
          "annotation": "prop",
          "docs": "Vertical space between rows"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/searchbar/searchbar.tsx",
      "encapsulation": "scoped",
      "tag": "bkkr-searchbar",
      "readme": "# bkkr-searchbar\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default Searchbar -->\n<bkkr-searchbar></bkkr-searchbar>\n\n<!-- Searchbar with cancel button always shown -->\n<bkkr-searchbar showCancelButton=\"always\"></bkkr-searchbar>\n```",
        "javascript": "```html\n<!-- Default Searchbar -->\n<bkkr-searchbar></bkkr-searchbar>\n\n<!-- Searchbar with cancel button always shown -->\n<bkkr-searchbar showCancelButton=\"always\"></bkkr-searchbar>\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, enable searchbar animation.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "autocomplete",
          "type": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
          "mutable": false,
          "attr": "autocomplete",
          "reflectToAttr": false,
          "docs": "Set the input's autocomplete property.",
          "docsTags": [],
          "default": "'off'",
          "values": [
            {
              "value": "name",
              "type": "string"
            },
            {
              "value": "on",
              "type": "string"
            },
            {
              "value": "off",
              "type": "string"
            },
            {
              "value": "honorific-prefix",
              "type": "string"
            },
            {
              "value": "given-name",
              "type": "string"
            },
            {
              "value": "additional-name",
              "type": "string"
            },
            {
              "value": "family-name",
              "type": "string"
            },
            {
              "value": "honorific-suffix",
              "type": "string"
            },
            {
              "value": "nickname",
              "type": "string"
            },
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "username",
              "type": "string"
            },
            {
              "value": "new-password",
              "type": "string"
            },
            {
              "value": "current-password",
              "type": "string"
            },
            {
              "value": "one-time-code",
              "type": "string"
            },
            {
              "value": "organization-title",
              "type": "string"
            },
            {
              "value": "organization",
              "type": "string"
            },
            {
              "value": "street-address",
              "type": "string"
            },
            {
              "value": "address-line1",
              "type": "string"
            },
            {
              "value": "address-line2",
              "type": "string"
            },
            {
              "value": "address-line3",
              "type": "string"
            },
            {
              "value": "address-level4",
              "type": "string"
            },
            {
              "value": "address-level3",
              "type": "string"
            },
            {
              "value": "address-level2",
              "type": "string"
            },
            {
              "value": "address-level1",
              "type": "string"
            },
            {
              "value": "country",
              "type": "string"
            },
            {
              "value": "country-name",
              "type": "string"
            },
            {
              "value": "postal-code",
              "type": "string"
            },
            {
              "value": "cc-name",
              "type": "string"
            },
            {
              "value": "cc-given-name",
              "type": "string"
            },
            {
              "value": "cc-additional-name",
              "type": "string"
            },
            {
              "value": "cc-family-name",
              "type": "string"
            },
            {
              "value": "cc-number",
              "type": "string"
            },
            {
              "value": "cc-exp",
              "type": "string"
            },
            {
              "value": "cc-exp-month",
              "type": "string"
            },
            {
              "value": "cc-exp-year",
              "type": "string"
            },
            {
              "value": "cc-csc",
              "type": "string"
            },
            {
              "value": "cc-type",
              "type": "string"
            },
            {
              "value": "transaction-currency",
              "type": "string"
            },
            {
              "value": "transaction-amount",
              "type": "string"
            },
            {
              "value": "language",
              "type": "string"
            },
            {
              "value": "bday",
              "type": "string"
            },
            {
              "value": "bday-day",
              "type": "string"
            },
            {
              "value": "bday-month",
              "type": "string"
            },
            {
              "value": "bday-year",
              "type": "string"
            },
            {
              "value": "sex",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "tel-country-code",
              "type": "string"
            },
            {
              "value": "tel-national",
              "type": "string"
            },
            {
              "value": "tel-area-code",
              "type": "string"
            },
            {
              "value": "tel-local",
              "type": "string"
            },
            {
              "value": "tel-extension",
              "type": "string"
            },
            {
              "value": "impp",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            },
            {
              "value": "photo",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "autocorrect",
          "type": "\"off\" | \"on\"",
          "mutable": false,
          "attr": "autocorrect",
          "reflectToAttr": false,
          "docs": "Set the input's autocorrect property.",
          "docsTags": [],
          "default": "'off'",
          "values": [
            {
              "value": "off",
              "type": "string"
            },
            {
              "value": "on",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "cancelButtonText",
          "type": "string",
          "mutable": false,
          "attr": "cancel-button-text",
          "reflectToAttr": false,
          "docs": "Set the the cancel button text.",
          "docsTags": [],
          "default": "'Cancel'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debounce",
          "type": "number",
          "mutable": false,
          "attr": "debounce",
          "reflectToAttr": false,
          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `bkkrChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
          "docsTags": [],
          "default": "250",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the input.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enterkeyhint",
          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
          "mutable": false,
          "attr": "enterkeyhint",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "done",
              "type": "string"
            },
            {
              "value": "enter",
              "type": "string"
            },
            {
              "value": "go",
              "type": "string"
            },
            {
              "value": "next",
              "type": "string"
            },
            {
              "value": "previous",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "send",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputmode",
          "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
          "mutable": false,
          "attr": "inputmode",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "decimal",
              "type": "string"
            },
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "value": "numeric",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "text",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "placeholder",
          "type": "string",
          "mutable": false,
          "attr": "placeholder",
          "reflectToAttr": false,
          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Bkkr>` would become\n`&lt;Bkkr&gt;`",
          "docsTags": [],
          "default": "'Search'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "searchIcon",
          "type": "string | undefined",
          "mutable": false,
          "attr": "search-icon",
          "reflectToAttr": false,
          "docs": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\n`ios` mode and `\"search-sharp\"` in `md` mode.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "showCancelButton",
          "type": "\"always\" | \"focus\" | \"never\"",
          "mutable": false,
          "attr": "show-cancel-button",
          "reflectToAttr": false,
          "docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.",
          "docsTags": [],
          "default": "'never'",
          "values": [
            {
              "value": "always",
              "type": "string"
            },
            {
              "value": "focus",
              "type": "string"
            },
            {
              "value": "never",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "spellcheck",
          "type": "boolean",
          "mutable": false,
          "attr": "spellcheck",
          "reflectToAttr": false,
          "docs": "If `true`, enable spellcheck on the input.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "Set the type of the input.",
          "docsTags": [],
          "default": "'search'",
          "values": [
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "number",
              "type": "string"
            },
            {
              "value": "password",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "text",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "null | string | undefined",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "the value of the searchbar.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getInputElement",
          "returns": {
            "type": "Promise<HTMLInputElement>",
            "docs": ""
          },
          "signature": "getInputElement() => Promise<HTMLInputElement>",
          "parameters": [],
          "docs": "Returns the native `<input>` element used under the hood.",
          "docsTags": []
        },
        {
          "name": "setFocus",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "setFocus() => Promise<void>",
          "parameters": [],
          "docs": "Sets focus on the specified `bkkr-searchbar`. Use this method instead of the global\n`input.focus()`.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the input loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrCancel",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the cancel button is clicked.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "SearchbarChangeEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrClear",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the clear input button is clicked.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the input has focus.",
          "docsTags": []
        },
        {
          "event": "bkkrInput",
          "detail": "KeyboardEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when a keyboard input occurred.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the searchbar input"
        },
        {
          "name": "--background-active",
          "annotation": "prop",
          "docs": "Background of the activated searchbar input"
        },
        {
          "name": "--background-focus",
          "annotation": "prop",
          "docs": "Background of the focused searchbar input"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the hovered searchbar input"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the searchbar input"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the searchbar input"
        },
        {
          "name": "--cancel-button-color",
          "annotation": "prop",
          "docs": "Color of the searchbar cancel button"
        },
        {
          "name": "--clear-button-color",
          "annotation": "prop",
          "docs": "Color of the searchbar clear button"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the searchbar text"
        },
        {
          "name": "--icon-color",
          "annotation": "prop",
          "docs": "Color of the searchbar icon"
        },
        {
          "name": "--placeholder-color",
          "annotation": "prop",
          "docs": "Color of the searchbar placeholder"
        },
        {
          "name": "--placeholder-font-style",
          "annotation": "prop",
          "docs": "Font style of the searchbar placeholder"
        },
        {
          "name": "--placeholder-font-weight",
          "annotation": "prop",
          "docs": "Font weight of the searchbar placeholder"
        },
        {
          "name": "--placeholder-opacity",
          "annotation": "prop",
          "docs": "Opacity of the searchbar placeholder"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-searchbar": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/segment/segment.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-segment",
      "readme": "# bkkr-segment\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default Segment -->\n<bkkr-segment (ionChange)=\"segmentChanged($event)\">\n  <bkkr-segment-button value=\"friends\">\n    <bkkr-label>Friends</bkkr-label>\n  </bkkr-segment-button>\n  <bkkr-segment-button value=\"enemies\">\n    <bkkr-label>Enemies</bkkr-label>\n  </bkkr-segment-button>\n</bkkr-segment>\n```",
        "javascript": "```html\n<!-- Default Segment -->\n<bkkr-segment>\n  <bkkr-segment-button value=\"friends\">\n    <bkkr-label>Friends</bkkr-label>\n  </bkkr-segment-button>\n  <bkkr-segment-button value=\"enemies\">\n    <bkkr-label>Enemies</bkkr-label>\n  </bkkr-segment-button>\n</bkkr-segment>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the segment.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scrollable",
          "type": "boolean",
          "mutable": false,
          "attr": "scrollable",
          "reflectToAttr": false,
          "docs": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "selectOnFocus",
          "type": "boolean",
          "mutable": false,
          "attr": "select-on-focus",
          "reflectToAttr": false,
          "docs": "If `true`, navigating to an `bkkr-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `bkkr-segment-button` element.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "swipeGesture",
          "type": "boolean",
          "mutable": false,
          "attr": "swipe-gesture",
          "reflectToAttr": false,
          "docs": "If `true`, users will be able to swipe between segment buttons to activate them.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "the value of the segment.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrChange",
          "detail": "SegmentChangeEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `bkkr-segment`.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "keydown",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the segment button"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/segment-button/segment-button.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-segment-button",
      "readme": "# bkkr-segment-button\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "native - The native HTML button element that wraps all child elements."
        },
        {
          "name": "part",
          "text": "indicator - The indicator displayed on the checked segment button."
        },
        {
          "name": "part",
          "text": "indicator-background - The background element for the indicator displayed on the checked segment button."
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the segment button.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"button\" | \"reset\" | \"submit\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The type of the button.",
          "docsTags": [],
          "default": "'button'",
          "values": [
            {
              "value": "button",
              "type": "string"
            },
            {
              "value": "reset",
              "type": "string"
            },
            {
              "value": "submit",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the segment button.",
          "docsTags": [],
          "default": "'bkkr-sb-' + ids++",
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the segment button"
        },
        {
          "name": "--background-checked",
          "annotation": "prop",
          "docs": "Background of the checked segment button"
        },
        {
          "name": "--background-focused",
          "annotation": "prop",
          "docs": "Background of the segment button when focused with the tab key"
        },
        {
          "name": "--background-focused-opacity",
          "annotation": "prop",
          "docs": "Opacity of the segment button background when focused with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the segment button on hover"
        },
        {
          "name": "--background-hover-opacity",
          "annotation": "prop",
          "docs": "Opacity of the segment button background on hover"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Color of the segment button border"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Radius of the segment button border"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Style of the segment button border"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Width of the segment button border"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the segment button"
        },
        {
          "name": "--color-checked",
          "annotation": "prop",
          "docs": "Color of the checked segment button"
        },
        {
          "name": "--color-focused",
          "annotation": "prop",
          "docs": "Color of the segment button when focused with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Color of the segment button on hover"
        },
        {
          "name": "--indicator-box-shadow",
          "annotation": "prop",
          "docs": "Box shadow on the indicator for the checked segment button"
        },
        {
          "name": "--indicator-color",
          "annotation": "prop",
          "docs": "Color of the indicator for the checked segment button"
        },
        {
          "name": "--indicator-height",
          "annotation": "prop",
          "docs": "Height of the indicator for the checked segment button"
        },
        {
          "name": "--indicator-transform",
          "annotation": "prop",
          "docs": "Transform of the indicator for the checked segment button"
        },
        {
          "name": "--indicator-transition",
          "annotation": "prop",
          "docs": "Transition of the indicator for the checked segment button"
        },
        {
          "name": "--margin-bottom",
          "annotation": "prop",
          "docs": "Bottom margin of the segment button"
        },
        {
          "name": "--margin-end",
          "annotation": "prop",
          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button"
        },
        {
          "name": "--margin-start",
          "annotation": "prop",
          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button"
        },
        {
          "name": "--margin-top",
          "annotation": "prop",
          "docs": "Top margin of the segment button"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the segment button"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the segment button"
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition of the segment button"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "indicator",
          "docs": "The indicator displayed on the checked segment button."
        },
        {
          "name": "indicator-background",
          "docs": "The background element for the indicator displayed on the checked segment button."
        },
        {
          "name": "native",
          "docs": "The native HTML button element that wraps all child elements."
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/select/select.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-select",
      "readme": "# bkkr-select\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "placeholder - The text displayed in the select when there is no value."
        },
        {
          "name": "part",
          "text": "text - The displayed value of the select."
        },
        {
          "name": "part",
          "text": "icon - The select icon container."
        }
      ],
      "usage": {
        "angular": "```html\n<bkkr-item>\n    <bkkr-label>Gender</bkkr-label>\n    <bkkr-select placeholder=\"Select One\">\n      <bkkr-select-option value=\"f\">Female</bkkr-select-option>\n      <bkkr-select-option value=\"m\">Male</bkkr-select-option>\n    </bkkr-select>\n  </bkkr-item>\n```",
        "javascript": "```html\n<bkkr-item>\n    <bkkr-label>Gender</bkkr-label>\n    <bkkr-select placeholder=\"Select One\">\n      <bkkr-select-option value=\"f\">Female</bkkr-select-option>\n      <bkkr-select-option value=\"m\">Male</bkkr-select-option>\n    </bkkr-select>\n  </bkkr-item>\n```"
      },
      "props": [
        {
          "name": "cancelText",
          "type": "string",
          "mutable": false,
          "attr": "cancel-text",
          "reflectToAttr": false,
          "docs": "The text to display on the cancel button.",
          "docsTags": [],
          "default": "'Cancel'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "compareWith",
          "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
          "mutable": false,
          "attr": "compare-with",
          "reflectToAttr": false,
          "docs": "A property name or function used to compare object values",
          "docsTags": [],
          "values": [
            {
              "type": "((currentValue: any, compareValue: any) => boolean)"
            },
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "deselect",
          "type": "boolean",
          "mutable": false,
          "attr": "deselect",
          "reflectToAttr": false,
          "docs": "If true, the value can't be deselectable.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": true,
          "docs": "If `true`, the user cannot interact with the input.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "interface",
          "type": "\"alert\" | \"drawer\" | \"none\" | \"popover\"",
          "mutable": false,
          "attr": "interface",
          "reflectToAttr": false,
          "docs": "The interface the select should use: `drawer`, `popover` or `alert`.",
          "docsTags": [],
          "default": "'popover'",
          "values": [
            {
              "value": "alert",
              "type": "string"
            },
            {
              "value": "drawer",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "value": "popover",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "interfaceOptions",
          "type": "any",
          "mutable": false,
          "attr": "interface-options",
          "reflectToAttr": false,
          "docs": "Any additional options that the `alert`, `drawer` or `popover` interface\ncan take. See the [bkkr-alert docs](../alert) and the\n[bkkr-popover docs](../popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.",
          "docsTags": [],
          "default": "{}",
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "multiple",
          "type": "boolean",
          "mutable": false,
          "attr": "multiple",
          "reflectToAttr": false,
          "docs": "If `true`, the select can accept multiple values.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "okText",
          "type": "string",
          "mutable": false,
          "attr": "ok-text",
          "reflectToAttr": false,
          "docs": "The text to display on the ok button.",
          "docsTags": [],
          "default": "'OK'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "placeholder",
          "type": "string | undefined",
          "mutable": false,
          "attr": "placeholder",
          "reflectToAttr": false,
          "docs": "The text to display when the select is empty.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "search",
          "type": "boolean",
          "mutable": false,
          "attr": "search",
          "reflectToAttr": false,
          "docs": "If true, a searchbar appears. This is not supported on 'alert' interface.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "selectedText",
          "type": "null | string | undefined",
          "mutable": false,
          "attr": "selected-text",
          "reflectToAttr": false,
          "docs": "The text to display instead of the selected option's value.",
          "docsTags": [],
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "spinner",
          "type": "\"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
          "mutable": false,
          "attr": "spinner",
          "reflectToAttr": false,
          "docs": "An animated SVG spinner that shows while loading.",
          "docsTags": [],
          "values": [
            {
              "value": "circles",
              "type": "string"
            },
            {
              "value": "circular",
              "type": "string"
            },
            {
              "value": "crescent",
              "type": "string"
            },
            {
              "value": "dots",
              "type": "string"
            },
            {
              "value": "lines",
              "type": "string"
            },
            {
              "value": "lines-sharp",
              "type": "string"
            },
            {
              "value": "lines-sharp-small",
              "type": "string"
            },
            {
              "value": "lines-small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "toggleIcon",
          "type": "boolean",
          "mutable": false,
          "attr": "toggle-icon",
          "reflectToAttr": false,
          "docs": "If `true`, a toggle icon will display.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "the value of the select.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "open",
          "returns": {
            "type": "Promise<any>",
            "docs": ""
          },
          "signature": "open(event?: UIEvent) => Promise<any>",
          "parameters": [],
          "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `bkkr-select`.",
          "docsTags": [
            {
              "name": "param",
              "text": "event The user interface event that called the open."
            }
          ]
        }
      ],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the select loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrCancel",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the selection is cancelled.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "SelectChangeEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrDismiss",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the overlay is dismissed.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the select has focus.",
          "docsTags": []
        },
        {
          "event": "bkkrOpen",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the selection is opened.",
          "docsTags": []
        },
        {
          "event": "bkkrSearch",
          "detail": "SelectChangeEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the user types in a searchbar.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the select button"
        },
        {
          "name": "--background-active",
          "annotation": "prop",
          "docs": "Background of the select button when pressed."
        },
        {
          "name": "--background-active-opacity",
          "annotation": "prop",
          "docs": "Opacity of the select button when pressed"
        },
        {
          "name": "--background-focus",
          "annotation": "prop",
          "docs": "Background of the select button when focused with the tab key"
        },
        {
          "name": "--background-focus-opacity",
          "annotation": "prop",
          "docs": "Opacity of the select button when focused with the tab key"
        },
        {
          "name": "--background-hover",
          "annotation": "prop",
          "docs": "Background of the select button on hover"
        },
        {
          "name": "--background-hover-opacity",
          "annotation": "prop",
          "docs": "Opacity of the select button of the background on hover"
        },
        {
          "name": "--background-opacity",
          "annotation": "prop",
          "docs": "Background opacity of the select button"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the select button"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the select button"
        },
        {
          "name": "--color-active",
          "annotation": "prop",
          "docs": "Text color of the select button when pressed"
        },
        {
          "name": "--color-focus",
          "annotation": "prop",
          "docs": "Text color of the select button when focused with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Text color of the select button when hover"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the select"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the select"
        },
        {
          "name": "--placeholder-color",
          "annotation": "prop",
          "docs": "Color of the select placeholder text"
        },
        {
          "name": "--placeholder-opacity",
          "annotation": "prop",
          "docs": "Opacity of the select placeholder text"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "icon",
          "docs": "The select icon container."
        },
        {
          "name": "placeholder",
          "docs": "The text displayed in the select when there is no value."
        },
        {
          "name": "text",
          "docs": "The displayed value of the select."
        }
      ],
      "dependents": [
        "bkkr-paginator"
      ],
      "dependencies": [
        "bkkr-select-choices",
        "bkkr-popover",
        "bkkr-drawer",
        "bkkr-alert",
        "bkkr-spinner",
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-select": [
          "bkkr-select-choices",
          "bkkr-popover",
          "bkkr-drawer",
          "bkkr-alert",
          "bkkr-spinner",
          "bkkr-icon"
        ],
        "bkkr-select-choices": [
          "bkkr-icon"
        ],
        "bkkr-popover": [
          "bkkr-backdrop"
        ],
        "bkkr-drawer": [
          "bkkr-backdrop",
          "bkkr-icon"
        ],
        "bkkr-alert": [
          "bkkr-backdrop"
        ],
        "bkkr-paginator": [
          "bkkr-select"
        ]
      }
    },
    {
      "filePath": "./src/components/select-option/select-option.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-select-option",
      "readme": "# bkkr-select-option\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the select option.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The text value of the option.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [
        "bkkr-paginator"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "bkkr-paginator": [
          "bkkr-select-option"
        ]
      }
    },
    {
      "filePath": "./src/components/shape/shape.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-shape",
      "readme": "# bkkr-shape\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-list>\n    <!-- Default shape -->\n    <bkkr-item>\n        <bkkr-shape></bkkr-shape>\n    </bkkr-item>\n\n    <!-- Shape with color-->\n    <bkkr-item>\n        <bkkr-shape shape=\"circle\" color=\"primary\"></bkkr-shape>\n    </bkkr-item>\n\n    <!-- Shape with image -->\n    <bkkr-item>\n        <bkkr-shape>\n            <bkkr-img src=\"https://randomuser.me/api/portraits/women/59.jpg\" alt=\"cat\"></bkkr-img>\n        </bkkr-shape>\n    </bkkr-item>\n</bkkr-list>\n```",
        "javascript": "```html\n<bkkr-list>\n    <!-- Default shape -->\n    <bkkr-item>\n        <bkkr-shape></bkkr-shape>\n    </bkkr-item>\n\n    <!-- Shape with color-->\n    <bkkr-item>\n        <bkkr-shape shape=\"circle\" color=\"primary\"></bkkr-shape>\n    </bkkr-item>\n\n    <!-- Shape with image -->\n    <bkkr-item>\n        <bkkr-shape>\n            <bkkr-img src=\"https://randomuser.me/api/portraits/women/59.jpg\" alt=\"cat\"></bkkr-img>\n        </bkkr-shape>\n    </bkkr-item>\n</bkkr-list>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "shape",
          "type": "\"circle\" | \"octagon\" | \"parallel\" | \"rombus\" | \"square\" | \"triange\"",
          "mutable": false,
          "attr": "shape",
          "reflectToAttr": false,
          "docs": "If `true`, the skeleton text will animate.",
          "docsTags": [],
          "default": "'square'",
          "values": [
            {
              "value": "circle",
              "type": "string"
            },
            {
              "value": "octagon",
              "type": "string"
            },
            {
              "value": "parallel",
              "type": "string"
            },
            {
              "value": "rombus",
              "type": "string"
            },
            {
              "value": "square",
              "type": "string"
            },
            {
              "value": "triange",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The size of the shape, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"`",
          "docsTags": [],
          "default": "'125'",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeLg",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-lg",
          "reflectToAttr": false,
          "docs": "The size of the shape for lg screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeMd",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-md",
          "reflectToAttr": false,
          "docs": "The size of the shape for md screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeSm",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-sm",
          "reflectToAttr": false,
          "docs": "The size of the shape for sm screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xl",
          "reflectToAttr": false,
          "docs": "The size of the shape for xl screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXs",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xs",
          "reflectToAttr": false,
          "docs": "The size of the shape for xs screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXxl",
          "type": "string | undefined",
          "mutable": false,
          "attr": "size-xxl",
          "reflectToAttr": false,
          "docs": "The size of the shape for xxl screens, in terms of how many columns it should take up out\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "resize",
          "target": "window",
          "capture": false,
          "passive": true
        }
      ],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the badge"
        },
        {
          "name": "--background-opacity",
          "annotation": "prop",
          "docs": "Opacity of background color"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of shape"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the badge"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/skeleton/skeleton.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-skeleton",
      "readme": "# bkkr-skeleton\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<div *ngIf=\"!data\">\n    <bkkr-skeleton-text animated style=\"width: 60%\"></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated style=\"width: 88%\"></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated style=\"width: 70%\"></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated style=\"width: 60%\"></bkkr-skeleton-text>\n</div>\n```",
        "javascript": "```html\n<div id=\"skeleton\">\n    <bkkr-skeleton-text animated style=\"width: 60%\"></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated style=\"width: 88%\"></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated style=\"width: 70%\"></bkkr-skeleton-text>\n    <bkkr-skeleton-text animated style=\"width: 60%\"></bkkr-skeleton-text>\n</div>\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the skeleton text will animate.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Text color"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/slide/slide.tsx",
      "encapsulation": "none",
      "tag": "bkkr-slide",
      "readme": "\nThe Slide component is a child component of [Slides](../slides). The template\nshould be written as `bkkr-slide`. Any slide content should be written\nin this component and it should be used in conjunction with [Slides](../slides).\n\nSee the [Slides API Docs](../slides) for more usage information.\n",
      "docs": "The Slide component is a child component of [Slides](../slides). The template\nshould be written as `bkkr-slide`. Any slide content should be written\nin this component and it should be used in conjunction with [Slides](../slides).\n\nSee the [Slides API Docs](../slides) for more usage information.",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/slides/slides.tsx",
      "encapsulation": "none",
      "tag": "bkkr-slides",
      "readme": "\nAdopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\n\nCopyright 2016 Vladimir Kharlampidi The iDangero.us\n\nLicensed under [MIT](https://opensource.org/licenses/MIT)\n",
      "docs": "Adopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\n\nCopyright 2016 Vladimir Kharlampidi The iDangero.us\n\nLicensed under [MIT](https://opensource.org/licenses/MIT)",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-slides pager=\"true\">\n    <bkkr-slide>\n      <h1>Slide 1</h1>\n    </bkkr-slide>\n\n    <bkkr-slide>\n      <h1>Slide 2</h1>\n    </bkkr-slide>\n\n    <bkkr-slide>\n      <h1>Slide 3</h1>\n    </bkkr-slide>\n</bkkr-slides>\n```",
        "javascript": "```html\n<bkkr-slides pager=\"true\">\n    <bkkr-slide>\n      <h1>Slide 1</h1>\n    </bkkr-slide>\n\n    <bkkr-slide>\n      <h1>Slide 2</h1>\n    </bkkr-slide>\n\n    <bkkr-slide>\n      <h1>Slide 3</h1>\n    </bkkr-slide>\n</bkkr-slides>\n```"
      },
      "props": [
        {
          "name": "options",
          "type": "SwiperOptions",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Options to pass to the swiper instance.\nSee http://idangero.us/swiper/api/ for valid options",
          "docsTags": [],
          "default": "{}",
          "values": [
            {
              "type": "SwiperOptions"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pager",
          "type": "boolean",
          "mutable": false,
          "attr": "pager",
          "reflectToAttr": false,
          "docs": "If `true`, show the pagination.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scrollbar",
          "type": "boolean",
          "mutable": false,
          "attr": "scrollbar",
          "reflectToAttr": false,
          "docs": "If `true`, show the scrollbar.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getActiveIndex",
          "returns": {
            "type": "Promise<number>",
            "docs": ""
          },
          "signature": "getActiveIndex() => Promise<number>",
          "parameters": [],
          "docs": "Get the index of the active slide.",
          "docsTags": []
        },
        {
          "name": "getPreviousIndex",
          "returns": {
            "type": "Promise<number>",
            "docs": ""
          },
          "signature": "getPreviousIndex() => Promise<number>",
          "parameters": [],
          "docs": "Get the index of the previous slide.",
          "docsTags": []
        },
        {
          "name": "getSwiper",
          "returns": {
            "type": "Promise<any>",
            "docs": ""
          },
          "signature": "getSwiper() => Promise<any>",
          "parameters": [],
          "docs": "Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://idangero.us/swiper/api/ for all API options.",
          "docsTags": []
        },
        {
          "name": "isBeginning",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "isBeginning() => Promise<boolean>",
          "parameters": [],
          "docs": "Get whether or not the current slide is the first slide.",
          "docsTags": []
        },
        {
          "name": "isEnd",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "isEnd() => Promise<boolean>",
          "parameters": [],
          "docs": "Get whether or not the current slide is the last slide.",
          "docsTags": []
        },
        {
          "name": "length",
          "returns": {
            "type": "Promise<number>",
            "docs": ""
          },
          "signature": "length() => Promise<number>",
          "parameters": [],
          "docs": "Get the total number of slides.",
          "docsTags": []
        },
        {
          "name": "lockSwipeToNext",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "lockSwipeToNext(lock: boolean) => Promise<void>",
          "parameters": [],
          "docs": "Lock or unlock the ability to slide to the next slide.",
          "docsTags": [
            {
              "name": "param",
              "text": "lock If `true`, disable swiping to the next slide."
            }
          ]
        },
        {
          "name": "lockSwipeToPrev",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "lockSwipeToPrev(lock: boolean) => Promise<void>",
          "parameters": [],
          "docs": "Lock or unlock the ability to slide to the previous slide.",
          "docsTags": [
            {
              "name": "param",
              "text": "lock If `true`, disable swiping to the previous slide."
            }
          ]
        },
        {
          "name": "lockSwipes",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "lockSwipes(lock: boolean) => Promise<void>",
          "parameters": [],
          "docs": "Lock or unlock the ability to slide to the next or previous slide.",
          "docsTags": [
            {
              "name": "param",
              "text": "lock If `true`, disable swiping to the next and previous slide."
            }
          ]
        },
        {
          "name": "slideNext",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>",
          "parameters": [],
          "docs": "Transition to the next slide.",
          "docsTags": [
            {
              "name": "param",
              "text": "speed The transition duration (in ms)."
            },
            {
              "name": "param",
              "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
            }
          ]
        },
        {
          "name": "slidePrev",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>",
          "parameters": [],
          "docs": "Transition to the previous slide.",
          "docsTags": [
            {
              "name": "param",
              "text": "speed The transition duration (in ms)."
            },
            {
              "name": "param",
              "text": "runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events."
            }
          ]
        },
        {
          "name": "slideTo",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
          "parameters": [],
          "docs": "Transition to the specified slide.",
          "docsTags": [
            {
              "name": "param",
              "text": "index The index of the slide to transition to."
            },
            {
              "name": "param",
              "text": "speed The transition duration (in ms)."
            },
            {
              "name": "param",
              "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
            }
          ]
        },
        {
          "name": "startAutoplay",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "startAutoplay() => Promise<void>",
          "parameters": [],
          "docs": "Start auto play.",
          "docsTags": []
        },
        {
          "name": "stopAutoplay",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "stopAutoplay() => Promise<void>",
          "parameters": [],
          "docs": "Stop auto play.",
          "docsTags": []
        },
        {
          "name": "update",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "update() => Promise<void>",
          "parameters": [],
          "docs": "Update the underlying slider implementation. Call this if you've added or removed\nchild slides.",
          "docsTags": []
        },
        {
          "name": "updateAutoHeight",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "updateAutoHeight(speed?: number) => Promise<void>",
          "parameters": [],
          "docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.",
          "docsTags": [
            {
              "name": "param",
              "text": "speed The transition duration (in ms)."
            }
          ]
        }
      ],
      "events": [
        {
          "event": "bkkrSlideDidChange",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the active slide has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideDoubleTap",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the user double taps on the slide's container.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideDrag",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the slider is actively being moved.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideNextEnd",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the next slide has ended.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideNextStart",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the next slide has started.",
          "docsTags": []
        },
        {
          "event": "bkkrSlidePrevEnd",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the previous slide has ended.",
          "docsTags": []
        },
        {
          "event": "bkkrSlidePrevStart",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the previous slide has started.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideReachEnd",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the slider is at the last slide.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideReachStart",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the slider is at its initial position.",
          "docsTags": []
        },
        {
          "event": "bkkrSlidesDidLoad",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after Swiper initialization",
          "docsTags": []
        },
        {
          "event": "bkkrSlideTap",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the user taps/clicks on the slide's container.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideTouchEnd",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the user releases the touch.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideTouchStart",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the user first touches the slider.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideTransitionEnd",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the slide transition has ended.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideTransitionStart",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the slide transition has started.",
          "docsTags": []
        },
        {
          "event": "bkkrSlideWillChange",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the active slide has changed.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--bullet-background",
          "annotation": "prop",
          "docs": "Background of the pagination bullets"
        },
        {
          "name": "--bullet-background-active",
          "annotation": "prop",
          "docs": "Background of the active pagination bullet"
        },
        {
          "name": "--progress-bar-background",
          "annotation": "prop",
          "docs": "Background of the pagination progress-bar"
        },
        {
          "name": "--progress-bar-background-active",
          "annotation": "prop",
          "docs": "Background of the active pagination progress-bar"
        },
        {
          "name": "--scroll-bar-background",
          "annotation": "prop",
          "docs": "Background of the pagination scroll-bar"
        },
        {
          "name": "--scroll-bar-background-active",
          "annotation": "prop",
          "docs": "Background of the active pagination scroll-bar"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/spinner/spinner.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-spinner",
      "readme": "# bkkr-spinner\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default Spinner -->\n<bkkr-spinner></bkkr-spinner>\n\n<!-- Lines -->\n<bkkr-spinner name=\"lines\"></bkkr-spinner>\n\n<!-- Lines Small -->\n<bkkr-spinner name=\"lines-small\"></bkkr-spinner>\n\n<!-- Dots -->\n<bkkr-spinner name=\"dots\"></bkkr-spinner>\n\n<!-- Bubbles -->\n<bkkr-spinner name=\"bubbles\"></bkkr-spinner>\n\n<!-- Circles -->\n<bkkr-spinner name=\"circles\"></bkkr-spinner>\n\n<!-- Crescent -->\n<bkkr-spinner name=\"crescent\"></bkkr-spinner>\n\n<!-- Paused Default Spinner -->\n<bkkr-spinner paused></bkkr-spinner>\n```",
        "javascript": "```html\n<!-- Default Spinner -->\n<bkkr-spinner></bkkr-spinner>\n\n<!-- Lines -->\n<bkkr-spinner name=\"lines\"></bkkr-spinner>\n\n<!-- Lines Small -->\n<bkkr-spinner name=\"lines-small\"></bkkr-spinner>\n\n<!-- Dots -->\n<bkkr-spinner name=\"dots\"></bkkr-spinner>\n\n<!-- Bubbles -->\n<bkkr-spinner name=\"bubbles\"></bkkr-spinner>\n\n<!-- Circles -->\n<bkkr-spinner name=\"circles\"></bkkr-spinner>\n\n<!-- Crescent -->\n<bkkr-spinner name=\"crescent\"></bkkr-spinner>\n\n<!-- Paused Default Spinner -->\n<bkkr-spinner paused></bkkr-spinner>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "duration",
          "type": "number | undefined",
          "mutable": false,
          "attr": "duration",
          "reflectToAttr": false,
          "docs": "Duration of the spinner animation in milliseconds. The default varies based on the spinner.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "paused",
          "type": "boolean",
          "mutable": false,
          "attr": "paused",
          "reflectToAttr": false,
          "docs": "If `true`, the spinner's animation will be paused.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The type of the SVG spinner to use. If a type is not provided, the platform's default\nspinner will be used.",
          "docsTags": [],
          "values": [
            {
              "value": "circles",
              "type": "string"
            },
            {
              "value": "circular",
              "type": "string"
            },
            {
              "value": "crescent",
              "type": "string"
            },
            {
              "value": "dots",
              "type": "string"
            },
            {
              "value": "lines",
              "type": "string"
            },
            {
              "value": "lines-sharp",
              "type": "string"
            },
            {
              "value": "lines-sharp-small",
              "type": "string"
            },
            {
              "value": "lines-small",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the spinner"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [
        "bkkr-infinite-scroll",
        "bkkr-loading",
        "bkkr-paginator",
        "bkkr-select"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "bkkr-infinite-scroll": [
          "bkkr-spinner"
        ],
        "bkkr-loading": [
          "bkkr-spinner"
        ],
        "bkkr-paginator": [
          "bkkr-spinner"
        ],
        "bkkr-select": [
          "bkkr-spinner"
        ]
      }
    },
    {
      "filePath": "./src/components/split-pane/split-pane.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-split-pane",
      "readme": "# bkkr-split-pane\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-split-pane contentId=\"main\">\n  <!--  the side menu  -->\n  <bkkr-menu contentId=\"main\">\n    <bkkr-header>\n      <bkkr-toolbar>\n        <bkkr-title>Menu</bkkr-title>\n      </bkkr-toolbar>\n    </bkkr-header>\n  </bkkr-menu>\n\n  <!-- the main content -->\n  <bkkr-router-outlet id=\"main\"></bkkr-router-outlet>\n</bkkr-split-pane>\n```",
        "javascript": "```html\n<bkkr-split-pane content-id=\"main\">\n  <!--  the side menu  -->\n  <bkkr-menu content-id=\"main\">\n    <bkkr-header>\n      <bkkr-toolbar>\n        <bkkr-title>Menu</bkkr-title>\n      </bkkr-toolbar>\n    </bkkr-header>\n  </bkkr-menu>\n\n  <!-- the main content -->\n  <bkkr-content id=\"main\">\n    <h1>Hello</h1>\n  </bkkr-content>\n</bkkr-split-pane>\n```"
      },
      "props": [
        {
          "name": "contentId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "content-id",
          "reflectToAttr": true,
          "docs": "The content `id` of the split-pane's main content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the split pane will be hidden.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "when",
          "type": "boolean | string",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression.",
          "docsTags": [],
          "default": "QUERY['lg']",
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrSplitPaneVisible",
          "detail": "{ visible: boolean; }",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Expression to be called when the split-pane visibility has changed",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--border",
          "annotation": "prop",
          "docs": "Border between panes"
        },
        {
          "name": "--side-max-width",
          "annotation": "prop",
          "docs": "Maximum width of the side pane. Does not apply when split pane is collapsed."
        },
        {
          "name": "--side-min-width",
          "annotation": "prop",
          "docs": "Minimum width of the side pane. Does not apply when split pane is collapsed."
        },
        {
          "name": "--side-width",
          "annotation": "prop",
          "docs": "Width of the side pane. Does not apply when split pane is collapsed."
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/tab/tab.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-tab",
      "readme": "\nThe tab component is a child component of tabs. Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.\n",
      "docs": "The tab component is a child component of tabs. Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "component",
          "type": "Function | HTMLElement | null | string | undefined",
          "mutable": false,
          "attr": "component",
          "reflectToAttr": false,
          "docs": "The component to display inside of the tab.",
          "docsTags": [],
          "values": [
            {
              "type": "Function"
            },
            {
              "type": "HTMLElement"
            },
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "tab",
          "type": "string",
          "mutable": false,
          "attr": "tab",
          "reflectToAttr": false,
          "docs": "A tab id must be provided for each `bkkr-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        }
      ],
      "methods": [
        {
          "name": "setActive",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "setActive() => Promise<void>",
          "parameters": [],
          "docs": "Set the active component for the tab",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/tabs/tabs.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-tabs",
      "readme": "# bkkr-tabs\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-tabs>\n    <bkkr-footer position=\"floating\" slot=\"bottom\">\n        <bkkr-toolbar>\n            <bkkr-navs>\n                <bkkr-nav nav=\"tab-schedule\">\n                    <bkkr-icon name=\"calendar\"></bkkr-icon>\n                     <bkkr-label>Schedule</bkkr-label>\n                </bkkr-nav>\n\n                <bkkr-nav nav=\"tab-speaker\">\n                        bkkr-icon name=\"user\"></bkkr-icon>\n                    <bkkr-label>Speakers</bkkr-label>\n                </bkkr-nav>\n\n                <bkkr-nav nav=\"tab-map\">\n                    <bkkr-icon name=\"map\"></bkkr-icon>\n                    <bkkr-label>Map</bkkr-label>\n                </bkkr-nav>\n\n                <bkkr-nav nav=\"tab-about\">\n                    <bkkr-icon name=\"info\"></bkkr-icon>\n                    <bkkr-label>About</bkkr-label>\n                </bkkr-nav>\n            </bkkr-navs>\n        </bkkr-toolbar>\n    </bkkr-footer>\n</bkkr-tabs>\n```",
        "javascript": "```html\n<bkkr-tabs>\n    <bkkr-tab tab=\"tab-schedule\">\n        <bkkr-content>\n            <p>tab-schedule</p>\n        </bkkr-content>\n    </bkkr-tab>\n\n    <bkkr-tab tab=\"tab-speaker\">\n        <bkkr-content>\n          \t<p>tab-speaker</p>\n        </bkkr-content>\n    </bkkr-tab>\n\n    <bkkr-tab tab=\"tab-map\">\n        <bkkr-content>\n          \t<p>tab-map</p>\n        </bkkr-content>\n    </bkkr-tab>\n\n    <bkkr-tab tab=\"tab-about\">\n        <bkkr-content>\n          \t<p>tab-about</p>\n        </bkkr-content>\n    </bkkr-tab>\n\n    <bkkr-footer position=\"floating\" slot=\"bottom\">\n        <bkkr-toolbar>\n            <bkkr-navs>\n                <bkkr-nav nav=\"tab-schedule\">\n                    <bkkr-icon name=\"calendar\"></bkkr-icon>\n                     <bkkr-label>Schedule</bkkr-label>\n                </bkkr-nav>\n\n                <bkkr-nav nav=\"tab-speaker\">\n                        bkkr-icon name=\"user\"></bkkr-icon>\n                    <bkkr-label>Speakers</bkkr-label>\n                </bkkr-nav>\n\n                <bkkr-nav nav=\"tab-map\">\n                    <bkkr-icon name=\"map\"></bkkr-icon>\n                    <bkkr-label>Map</bkkr-label>\n                </bkkr-nav>\n\n                <bkkr-nav nav=\"tab-about\">\n                    <bkkr-icon name=\"info\"></bkkr-icon>\n                    <bkkr-label>About</bkkr-label>\n                </bkkr-nav>\n            </bkkr-navs>\n        </bkkr-toolbar>\n    </bkkr-footer>\n</bkkr-tabs>\n```"
      },
      "props": [],
      "methods": [
        {
          "name": "getSelected",
          "returns": {
            "type": "Promise<string | undefined>",
            "docs": ""
          },
          "signature": "getSelected() => Promise<string | undefined>",
          "parameters": [],
          "docs": "Get the currently selected tab.",
          "docsTags": []
        },
        {
          "name": "getTab",
          "returns": {
            "type": "Promise<HTMLBkkrTabElement | undefined>",
            "docs": ""
          },
          "signature": "getTab(tab: string | HTMLBkkrTabElement) => Promise<HTMLBkkrTabElement | undefined>",
          "parameters": [],
          "docs": "Get a specific tab by the value of its `tab` property or an element reference.",
          "docsTags": [
            {
              "name": "param",
              "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
            }
          ]
        },
        {
          "name": "select",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "select(tab: string | HTMLBkkrTabElement) => Promise<boolean>",
          "parameters": [],
          "docs": "Select a tab by the value of its `tab` property or an element reference.",
          "docsTags": [
            {
              "name": "param",
              "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
            }
          ]
        }
      ],
      "events": [
        {
          "event": "bkkrTabsDidChange",
          "detail": "{ tab: string; }",
          "bubbles": false,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the navigation has finished transitioning to a new component.",
          "docsTags": []
        },
        {
          "event": "bkkrTabsWillChange",
          "detail": "{ tab: string; }",
          "bubbles": false,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the navigation is about to transition to a new component.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/textarea/textarea.tsx",
      "encapsulation": "scoped",
      "tag": "bkkr-textarea",
      "readme": "# bkkr-textarea\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default textarea -->\n<bkkr-textarea></bkkr-textarea>\n\n<!-- Textarea in an item with a placeholder -->\n<bkkr-item>\n  <bkkr-textarea placeholder=\"Enter more information here...\"></bkkr-textarea>\n</bkkr-item>\n\n<!-- Textarea in an item with a floating label -->\n<bkkr-item>\n  <bkkr-label position=\"floating\">Description</bkkr-label>\n  <bkkr-textarea></bkkr-textarea>\n</bkkr-item>\n```",
        "javascript": "```html\n<!-- Default textarea -->\n<bkkr-textarea></bkkr-textarea>\n\n<!-- Textarea in an item with a placeholder -->\n<bkkr-item>\n  <bkkr-textarea placeholder=\"Enter more information here...\"></bkkr-textarea>\n</bkkr-item>\n\n<!-- Textarea in an item with a floating label -->\n<bkkr-item>\n  <bkkr-label position=\"floating\">Description</bkkr-label>\n  <bkkr-textarea></bkkr-textarea>\n</bkkr-item>\n```"
      },
      "props": [
        {
          "name": "autoGrow",
          "type": "boolean",
          "mutable": false,
          "attr": "auto-grow",
          "reflectToAttr": true,
          "docs": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "autocapitalize",
          "type": "string",
          "mutable": false,
          "attr": "autocapitalize",
          "reflectToAttr": false,
          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.",
          "docsTags": [],
          "default": "'none'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "autofocus",
          "type": "boolean",
          "mutable": false,
          "attr": "autofocus",
          "reflectToAttr": false,
          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "clearOnEdit",
          "type": "boolean",
          "mutable": false,
          "attr": "clear-on-edit",
          "reflectToAttr": false,
          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "cols",
          "type": "number | undefined",
          "mutable": false,
          "attr": "cols",
          "reflectToAttr": false,
          "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debounce",
          "type": "number",
          "mutable": false,
          "attr": "debounce",
          "reflectToAttr": false,
          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the textarea.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enterkeyhint",
          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
          "mutable": false,
          "attr": "enterkeyhint",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "done",
              "type": "string"
            },
            {
              "value": "enter",
              "type": "string"
            },
            {
              "value": "go",
              "type": "string"
            },
            {
              "value": "next",
              "type": "string"
            },
            {
              "value": "previous",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "send",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputmode",
          "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
          "mutable": false,
          "attr": "inputmode",
          "reflectToAttr": false,
          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "docsTags": [],
          "values": [
            {
              "value": "decimal",
              "type": "string"
            },
            {
              "value": "email",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "value": "numeric",
              "type": "string"
            },
            {
              "value": "search",
              "type": "string"
            },
            {
              "value": "tel",
              "type": "string"
            },
            {
              "value": "text",
              "type": "string"
            },
            {
              "value": "url",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "maxlength",
          "type": "number | undefined",
          "mutable": false,
          "attr": "maxlength",
          "reflectToAttr": false,
          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "minlength",
          "type": "number | undefined",
          "mutable": false,
          "attr": "minlength",
          "reflectToAttr": false,
          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "placeholder",
          "type": "string | undefined",
          "mutable": false,
          "attr": "placeholder",
          "reflectToAttr": false,
          "docs": "Instructional text that shows before the input has a value.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "readonly",
          "type": "boolean",
          "mutable": false,
          "attr": "readonly",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot modify the value.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "required",
          "type": "boolean",
          "mutable": false,
          "attr": "required",
          "reflectToAttr": false,
          "docs": "If `true`, the user must fill in a value before submitting a form.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rows",
          "type": "number | undefined",
          "mutable": false,
          "attr": "rows",
          "reflectToAttr": false,
          "docs": "The number of visible text lines for the control.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "spellcheck",
          "type": "boolean",
          "mutable": false,
          "attr": "spellcheck",
          "reflectToAttr": false,
          "docs": "If `true`, the element will have its spelling and grammar checked.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "null | string | undefined",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the textarea.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "wrap",
          "type": "\"hard\" | \"off\" | \"soft\" | undefined",
          "mutable": false,
          "attr": "wrap",
          "reflectToAttr": false,
          "docs": "Indicates how the control wraps text.",
          "docsTags": [],
          "values": [
            {
              "value": "hard",
              "type": "string"
            },
            {
              "value": "off",
              "type": "string"
            },
            {
              "value": "soft",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getInputElement",
          "returns": {
            "type": "Promise<HTMLTextAreaElement>",
            "docs": ""
          },
          "signature": "getInputElement() => Promise<HTMLTextAreaElement>",
          "parameters": [],
          "docs": "Returns the native `<textarea>` element used under the hood.",
          "docsTags": []
        },
        {
          "name": "setFocus",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "setFocus() => Promise<void>",
          "parameters": [],
          "docs": "Sets focus on the native `textarea` in `bkkr-textarea`. Use this method instead of the global\n`textarea.focus()`.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "FocusEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the input loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "TextareaChangeEventDetail",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the input value has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "FocusEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the input has focus.",
          "docsTags": []
        },
        {
          "event": "bkkrInput",
          "detail": "InputEvent",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when a keyboard input occurred.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the textarea"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the textarea text"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the textarea"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the textarea"
        },
        {
          "name": "--placeholder-color",
          "annotation": "prop",
          "docs": "Color of the textarea placeholder text"
        },
        {
          "name": "--placeholder-font-style",
          "annotation": "prop",
          "docs": "Font style of the textarea placeholder text"
        },
        {
          "name": "--placeholder-font-weight",
          "annotation": "prop",
          "docs": "Font weight of the textarea placeholder text"
        },
        {
          "name": "--placeholder-opacity",
          "annotation": "prop",
          "docs": "Opacity of the textarea placeholder text"
        },
        {
          "name": "--placeholder-transition-delay",
          "annotation": "prop",
          "docs": "Transition delay of the textarea placeholder text"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/thumbnail/thumbnail.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-thumbnail",
      "readme": "# bkkr-thumbnail\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-thumbnail>\n  <bkkr-img src=\"https://randomuser.me/api/portraits/women/59.jpg\" alt=\"user\"></bkkr-img>\n</bkkr-thumbnail>\n```",
        "javascript": "```html\n<bkkr-thumbnail>\n  <bkkr-img src=\"https://randomuser.me/api/portraits/women/59.jpg\" alt=\"user\"></bkkr-img>\n</bkkr-thumbnail>\n```"
      },
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the thumbnail.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Background of the badge"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Shadow"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the badge"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the badge"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/toast/toast.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-toast",
      "readme": "# bkkr-toast\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "button - Any button element that is displayed inside of the toast."
        },
        {
          "name": "part",
          "text": "container - The element that wraps all child elements."
        },
        {
          "name": "part",
          "text": "header - The header text of the toast."
        },
        {
          "name": "part",
          "text": "message - The body text of the toast."
        }
      ],
      "usage": {
        "angular": "```typescript\nimport { Component } from '@angular/core';\nimport { ToastController } from '@bkkr/angular';\n\n@Component({\n  selector: 'toast-example',\n  templateUrl: 'toast-example.html',\n  styleUrls: ['./toast-example.css']\n})\nexport class ToastExample {\n  constructor(public toastController: ToastController) {\n\n  }\n\n  async presentToast() {\n    const toast = await this.toastController.create({\n      message: 'Your settings have been saved.',\n      duration: 2000\n    });\n    return await toast.present();\n  }\n}\n```",
        "javascript": "```javascript\nfunction presentToast() {\n  const toast = document.createElement('bkkr-toast');\n  toast.message = 'Your settings have been saved.';\n  toast.duration = 2000;\n\n  // present the toast\n  document.body.appendChild(toast);\n  return toast.present();\n}\n```"
      },
      "props": [
        {
          "name": "animated",
          "type": "boolean",
          "mutable": false,
          "attr": "animated",
          "reflectToAttr": false,
          "docs": "If `true`, the toast will animate.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "buttons",
          "type": "(string | ToastButton)[] | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "An array of buttons for the toast.",
          "docsTags": [],
          "values": [
            {
              "type": "(string"
            },
            {
              "type": "ToastButton)[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "cssClass",
          "type": "string | string[] | undefined",
          "mutable": false,
          "attr": "css-class",
          "reflectToAttr": false,
          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "string[]"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "duration",
          "type": "number",
          "mutable": false,
          "attr": "duration",
          "reflectToAttr": false,
          "docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.",
          "docsTags": [],
          "default": "config.getNumber('toastDuration', 0)",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enterAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the toast is presented.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "header",
          "type": "string | undefined",
          "mutable": false,
          "attr": "header",
          "reflectToAttr": false,
          "docs": "Header to be shown in the toast.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "htmlAttributes",
          "type": "HTMLAttributes<HTMLElement> | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Additional attributes to pass to the toast.",
          "docsTags": [],
          "values": [
            {
              "type": "HTMLAttributes<HTMLElement>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "keyboardClose",
          "type": "boolean",
          "mutable": false,
          "attr": "keyboard-close",
          "reflectToAttr": false,
          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "leaveAnimation",
          "type": "((baseEl: any, opts?: any) => Animation) | undefined",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Animation to use when the toast is dismissed.",
          "docsTags": [],
          "values": [
            {
              "type": "((baseEl: any, opts?: any) => Animation)"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "message",
          "type": "SafeString | string | undefined",
          "mutable": false,
          "attr": "message",
          "reflectToAttr": false,
          "docs": "Message to be shown in the toast.",
          "docsTags": [],
          "values": [
            {
              "type": "SafeString"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "position",
          "type": "\"bottom\" | \"middle\" | \"top\"",
          "mutable": false,
          "attr": "position",
          "reflectToAttr": false,
          "docs": "The position of the toast on the screen.",
          "docsTags": [],
          "default": "'top'",
          "values": [
            {
              "value": "bottom",
              "type": "string"
            },
            {
              "value": "middle",
              "type": "string"
            },
            {
              "value": "top",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "swipeToClose",
          "type": "boolean",
          "mutable": false,
          "attr": "swipe-to-close",
          "reflectToAttr": false,
          "docs": "If `true`, the modal can be swiped to dismiss.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "dismiss",
          "returns": {
            "type": "Promise<boolean>",
            "docs": ""
          },
          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
          "parameters": [],
          "docs": "Dismiss the toast overlay after it has been presented.",
          "docsTags": [
            {
              "name": "param",
              "text": "data Any data to emit in the dismiss events."
            },
            {
              "name": "param",
              "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
            }
          ]
        },
        {
          "name": "onDidDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the toast did dismiss.",
          "docsTags": []
        },
        {
          "name": "onWillDismiss",
          "returns": {
            "type": "Promise<OverlayEventDetail<T>>",
            "docs": ""
          },
          "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
          "parameters": [],
          "docs": "Returns a promise that resolves when the toast will dismiss.",
          "docsTags": []
        },
        {
          "name": "present",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "present() => Promise<void>",
          "parameters": [],
          "docs": "Present the toast overlay after it has been created.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "toastDidDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the toast has dismissed.",
          "docsTags": []
        },
        {
          "event": "toastDidPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted after the toast has presented.",
          "docsTags": []
        },
        {
          "event": "toastWillDismiss",
          "detail": "OverlayEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the toast has dismissed.",
          "docsTags": []
        },
        {
          "event": "toastWillPresent",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted before the toast has presented.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the toast"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color of the toast"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the toast"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style of the toast"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width of the toast"
        },
        {
          "name": "--box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the toast"
        },
        {
          "name": "--button-color",
          "annotation": "prop",
          "docs": "Color of the button text"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Color of the toast text"
        },
        {
          "name": "--end",
          "annotation": "prop",
          "docs": "Position from the right if direction is left-to-right, and from the left if direction is right-to-left"
        },
        {
          "name": "--height",
          "annotation": "prop",
          "docs": "Height of the toast"
        },
        {
          "name": "--max-height",
          "annotation": "prop",
          "docs": "Maximum height of the toast"
        },
        {
          "name": "--max-width",
          "annotation": "prop",
          "docs": "Maximum width of the toast"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height of the toast"
        },
        {
          "name": "--min-width",
          "annotation": "prop",
          "docs": "Minimum width of the toast"
        },
        {
          "name": "--start",
          "annotation": "prop",
          "docs": "Position from the left if direction is left-to-right, and from the right if direction is right-to-left"
        },
        {
          "name": "--white-space",
          "annotation": "prop",
          "docs": "White space of the toast message"
        },
        {
          "name": "--width",
          "annotation": "prop",
          "docs": "Width of the toast"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "button",
          "docs": "Any button element that is displayed inside of the toast."
        },
        {
          "name": "container",
          "docs": "The element that wraps all child elements."
        },
        {
          "name": "header",
          "docs": "The header text of the toast."
        },
        {
          "name": "message",
          "docs": "The body text of the toast."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-toast": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/toggle/toggle.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-toggle",
      "readme": "# bkkr-toggle\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "track - The background track of the toggle."
        },
        {
          "name": "part",
          "text": "handle - The toggle handle, or knob, used to change the checked state."
        }
      ],
      "usage": {
        "angular": "```html\n<!-- Default Toggle -->\n<bkkr-toggle></bkkr-toggle>\n\n<!-- Disabled Toggle -->\n<bkkr-toggle disabled></bkkr-toggle>\n\n<!-- Checked Toggle -->\n<bkkr-toggle checked></bkkr-toggle>\n\n<!-- Toggle Colors -->\n<bkkr-toggle color=\"primary\"></bkkr-toggle>\n<bkkr-toggle color=\"secondary\"></bkkr-toggle>\n<bkkr-toggle color=\"danger\"></bkkr-toggle>\n<bkkr-toggle color=\"light\"></bkkr-toggle>\n<bkkr-toggle color=\"dark\"></bkkr-toggle>\n\n```",
        "javascript": "```html\n<!-- Default Toggle -->\n<bkkr-toggle></bkkr-toggle>\n\n<!-- Disabled Toggle -->\n<bkkr-toggle disabled></bkkr-toggle>\n\n<!-- Checked Toggle -->\n<bkkr-toggle checked></bkkr-toggle>\n\n<!-- Toggle Colors -->\n<bkkr-toggle color=\"primary\"></bkkr-toggle>\n<bkkr-toggle color=\"secondary\"></bkkr-toggle>\n<bkkr-toggle color=\"danger\"></bkkr-toggle>\n<bkkr-toggle color=\"light\"></bkkr-toggle>\n<bkkr-toggle color=\"dark\"></bkkr-toggle>\n\n```"
      },
      "props": [
        {
          "name": "checked",
          "type": "boolean",
          "mutable": true,
          "attr": "checked",
          "reflectToAttr": false,
          "docs": "If `true`, the toggle is selected.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the toggle.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "enableOnOffLabels",
          "type": "boolean | undefined",
          "mutable": false,
          "attr": "enable-on-off-labels",
          "reflectToAttr": false,
          "docs": "Enables the on/off accessibility switch labels within the toggle.",
          "docsTags": [],
          "default": "config.get('toggleOnOffLabels')",
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The name of the control, which is submitted with the form data.",
          "docsTags": [],
          "default": "this.inputId",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "null | string | undefined",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`.",
          "docsTags": [],
          "default": "'on'",
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "bkkrBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the toggle loses focus.",
          "docsTags": []
        },
        {
          "event": "bkkrChange",
          "detail": "ToggleChangeEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the value property has changed.",
          "docsTags": []
        },
        {
          "event": "bkkrFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the toggle has focus.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the toggle"
        },
        {
          "name": "--background-checked",
          "annotation": "prop",
          "docs": "Background of the toggle when checked"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the toggle track"
        },
        {
          "name": "--handle-background",
          "annotation": "prop",
          "docs": "Background of the toggle handle"
        },
        {
          "name": "--handle-background-checked",
          "annotation": "prop",
          "docs": "Background of the toggle handle when checked"
        },
        {
          "name": "--handle-border-radius",
          "annotation": "prop",
          "docs": "Border radius of the toggle handle"
        },
        {
          "name": "--handle-box-shadow",
          "annotation": "prop",
          "docs": "Box shadow of the toggle handle"
        },
        {
          "name": "--handle-height",
          "annotation": "prop",
          "docs": "Height of the toggle handle"
        },
        {
          "name": "--handle-max-height",
          "annotation": "prop",
          "docs": "Maximum height of the toggle handle"
        },
        {
          "name": "--handle-spacing",
          "annotation": "prop",
          "docs": "Horizontal spacing around the toggle handle"
        },
        {
          "name": "--handle-transition",
          "annotation": "prop",
          "docs": "Transition of the toggle handle"
        },
        {
          "name": "--handle-width",
          "annotation": "prop",
          "docs": "Width of the toggle handle"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "handle",
          "docs": "The toggle handle, or knob, used to change the checked state."
        },
        {
          "name": "track",
          "docs": "The background track of the toggle."
        }
      ],
      "dependents": [],
      "dependencies": [
        "bkkr-icon"
      ],
      "dependencyGraph": {
        "bkkr-toggle": [
          "bkkr-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/toolbar/toolbar.tsx",
      "encapsulation": "shadow",
      "tag": "bkkr-toolbar",
      "readme": "# bkkr-toolbar\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<bkkr-toolbar>\n  <p class=\"text-center text-bold mb-0\">Toolbar</p>\n</bkkr-toolbar>\n\n<bkkr-toolbar>\n    <bkkr-toolbar>\n        <bkkr-button slot=\"start\" color=\"dark\">\n            <bkkr-icon slot=\"icon-only\" name=\"arrow-left\"></bkkr-icon>\n        </bkkr-button>\n        <p class=\"text-center text-bold mb-0\">\n            Toolbar\n        </p>\n        <bkkr-button slot=\"end\" color=\"dark\">\n            <bkkr-icon slot=\"icon-only\" name=\"trash\"></bkkr-icon>\n        </bkkr-button>\n    </bkkr-toolbar>\n</bkkr-toolbar>\n```",
        "javascript": "```html\n<bkkr-toolbar>\n  <p class=\"text-center text-bold mb-0\">Toolbar</p>\n</bkkr-toolbar>\n\n<bkkr-toolbar>\n    <bkkr-toolbar>\n        <bkkr-button slot=\"start\" color=\"dark\">\n            <bkkr-icon slot=\"icon-only\" name=\"arrow-left\"></bkkr-icon>\n        </bkkr-button>\n        <p class=\"text-center text-bold mb-0\">\n            Toolbar\n        </p>\n        <bkkr-button slot=\"end\" color=\"dark\">\n            <bkkr-icon slot=\"icon-only\" name=\"trash\"></bkkr-icon>\n        </bkkr-button>\n    </bkkr-toolbar>\n</bkkr-toolbar>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "medium",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "tertiary",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            },
            {
              "type": "string & Record<never, never>"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the badge"
        },
        {
          "name": "--color",
          "annotation": "prop",
          "docs": "Text color of the badge"
        },
        {
          "name": "--min-height",
          "annotation": "prop",
          "docs": "Minimum height"
        },
        {
          "name": "--padding-bottom",
          "annotation": "prop",
          "docs": "Bottom padding of the badge"
        },
        {
          "name": "--padding-end",
          "annotation": "prop",
          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge"
        },
        {
          "name": "--padding-start",
          "annotation": "prop",
          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge"
        },
        {
          "name": "--padding-top",
          "annotation": "prop",
          "docs": "Top padding of the badge"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    }
  ]
}