@stories-js/core/dist/docs.json

Stories web components to build stories

{
  "timestamp": "2022-04-08T16:14:20",
  "compiler": {
    "name": "@stencil/core",
    "version": "2.14.2",
    "typescriptVersion": "4.5.4"
  },
  "components": [
    {
      "filePath": "./src/addons/addon-actions/addon-actions.tsx",
      "encapsulation": "shadow",
      "tag": "stories-addon-actions",
      "readme": "# stories-addon-actions\n\nThe stories-addon-actions displays a panel with data received by event handler (callback) arguments in your stories.\n\n",
      "docs": "The stories-addon-actions displays a panel with data received by event handler (callback) arguments in your stories.",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [
        {
          "name": "storyContextChanged",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "storyContextChanged(story: StoryComponent, context: StoryContext) => Promise<void>",
          "parameters": [],
          "docs": "",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/addons/addon-controls/addon-controls.tsx",
      "encapsulation": "shadow",
      "tag": "stories-addon-controls",
      "readme": "# stories-addon-controls\n\nThe stories-addon-controls helps you interact with components via changing arguments.\n",
      "docs": "The stories-addon-controls helps you interact with components via changing arguments.",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [
        {
          "name": "storyContextChanged",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "storyContextChanged(story: StoryComponent, context: StoryContext) => Promise<void>",
          "parameters": [],
          "docs": "",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/addons/addons/addons.tsx",
      "encapsulation": "shadow",
      "tag": "stories-addons",
      "readme": "# stories-addons\n\nThe stories-addons is a wrapping component implemented for helping in addons management.\n",
      "docs": "The stories-addons is a wrapping component implemented for helping in addons management.",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [
        {
          "name": "findAddon",
          "returns": {
            "type": "Promise<Addon>",
            "docs": ""
          },
          "signature": "findAddon(id: string) => Promise<Addon>",
          "parameters": [],
          "docs": "",
          "docsTags": []
        },
        {
          "name": "registerAddon",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "registerAddon(addon: Addon) => Promise<void>",
          "parameters": [],
          "docs": "",
          "docsTags": []
        },
        {
          "name": "storyContextChanged",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "storyContextChanged(story: StoryComponent, context: StoryContext) => Promise<void>",
          "parameters": [],
          "docs": "",
          "docsTags": []
        },
        {
          "name": "unregisterAddon",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "unregisterAddon(addon: Addon) => Promise<void>",
          "parameters": [],
          "docs": "",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/app/app.tsx",
      "encapsulation": "shadow",
      "tag": "stories-app",
      "readme": "# stories-app\n\nThe stories-app is a main Stories Framework's application.\n",
      "docs": "The stories-app is a main Stories Framework's application.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "modules",
          "type": "StoryModule[]",
          "mutable": false,
          "reflectToAttr": false,
          "docs": "Story Modules",
          "docsTags": [],
          "default": "[]",
          "values": [
            {
              "type": "StoryModule[]"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "store",
          "type": "StoriesState & NotificationsState & LayoutState & AddonsState",
          "mutable": true,
          "reflectToAttr": false,
          "docs": "Story Modules",
          "docsTags": [],
          "default": "state",
          "values": [
            {
              "type": "StoriesState & NotificationsState & LayoutState & AddonsState"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "storyChange",
          "detail": "{ storyId: string; kinds: string[]; storyName: string; storyFn: StoryFn<AnyFramework, Args>; component?: any; subcomponents?: Record<string, any>; decorators?: DecoratorFunction<AnyFramework, Args>[]; args: Partial<Args>; argTypes: Partial<ArgTypes<Args>>; parameters?: Parameters; }",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "",
          "docsTags": []
        },
        {
          "event": "storyContextChange",
          "detail": "{ component?: any; subcomponents?: Record<string, any>; } & StoryUpdate<Args>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "hashchange",
          "target": "window",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/badge/badge.tsx",
      "encapsulation": "shadow",
      "tag": "stories-badge",
      "readme": "# stories-badge\n\nThe stories-badge is inline block element uses for notification of how many items associated with another element.\n",
      "docs": "The stories-badge is inline block element uses for notification of how many items associated with another element.",
      "docsTags": [],
      "usage": {
        "angular": "```html\n<!-- Default -->\n<stories-badge>99</stories-badge>\n\n<!-- Colors -->\n<stories-badge color=\"primary\">11</stories-badge>\n<stories-badge color=\"secondary\">22</stories-badge>\n<stories-badge color=\"tertiary\">33</stories-badge>\n<stories-badge color=\"success\">44</stories-badge>\n<stories-badge color=\"warning\">55</stories-badge>\n<stories-badge color=\"danger\">66</stories-badge>\n<stories-badge color=\"light\">77</stories-badge>\n<stories-badge color=\"medium\">88</stories-badge>\n<stories-badge color=\"dark\">99</stories-badge>\n\n<!-- Button with badge on left and right -->\n<stories-button>\n  <stories-badge slot=\"start\">11</stories-badge>\n  <stories-label>My Button</stories-label>\n  <stories-badge slot=\"end\">22</stories-badge>\n</stories-item>\n```",
        "javascript": "```html\n<!-- Default -->\n<stories-badge>99</stories-badge>\n\n<!-- Colors -->\n<stories-badge color=\"primary\">11</stories-badge>\n<stories-badge color=\"secondary\">22</stories-badge>\n<stories-badge color=\"tertiary\">33</stories-badge>\n<stories-badge color=\"success\">44</stories-badge>\n<stories-badge color=\"warning\">55</stories-badge>\n<stories-badge color=\"danger\">66</stories-badge>\n<stories-badge color=\"light\">77</stories-badge>\n<stories-badge color=\"medium\">88</stories-badge>\n<stories-badge color=\"dark\">99</stories-badge>\n\n<!-- Button with badge on left and right -->\n<stories-button>\n  <stories-badge slot=\"start\">11</stories-badge>\n  <stories-label>My Button</stories-label>\n  <stories-badge slot=\"end\">22</stories-badge>\n</stories-item>\n```",
        "react": "```tsx\nimport React from 'react';\nimport { StoriesBadge, StoriesButton, StoriesLabel } from '@stories-js/react';\n\nexport const BadgeExample: React.FC = () => (\n  <div>\n    {/*-- Default --*/}\n    <StoriesBadge>99</StoriesBadge>\n\n    {/*-- Colors --*/}\n    <StoriesBadge color=\"primary\">11</StoriesBadge>\n    <StoriesBadge color=\"secondary\">22</StoriesBadge>\n    <StoriesBadge color=\"tertiary\">33</StoriesBadge>\n    <StoriesBadge color=\"success\">44</StoriesBadge>\n    <StoriesBadge color=\"warning\">55</StoriesBadge>\n    <StoriesBadge color=\"danger\">66</StoriesBadge>\n    <StoriesBadge color=\"light\">77</StoriesBadge>\n    <StoriesBadge color=\"medium\">88</StoriesBadge>\n    <StoriesBadge color=\"dark\">99</StoriesBadge>\n\n    {/*-- Button with badge on left and right --*/}\n    <StoriesButton>\n      <StoriesBadge slot=\"start\">11</StoriesBadge>\n      <StoriesLabel>My Button</StoriesLabel>\n      <StoriesBadge slot=\"end\">22</StoriesBadge>\n    </StoriesButton>\n  </fiv>\n);\n```\n",
        "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'badge-example',\n  styleUrl: 'badge-example.css'\n})\nexport class BadgeExample {\n  render() {\n    return [\n      // Default\n      <stories-badge>99</stories-badge>,\n\n      // Colors\n      <stories-badge color=\"primary\">11</stories-badge>,\n      <stories-badge color=\"secondary\">22</stories-badge>,\n      <stories-badge color=\"tertiary\">33</stories-badge>,\n      <stories-badge color=\"success\">44</stories-badge>,\n      <stories-badge color=\"warning\">55</stories-badge>,\n      <stories-badge color=\"danger\">66</stories-badge>,\n      <stories-badge color=\"light\">77</stories-badge>,\n      <stories-badge color=\"medium\">88</stories-badge>,\n      <stories-badge color=\"dark\">99</stories-badge>,\n\n      // Button with badge on left and right\n      <stories-button>\n        <stories-badge slot=\"start\">11</stories-badge>\n        <stories-label>My Button</stories-label>\n        <stories-badge slot=\"end\">22</stories-badge>\n      </stories-button>\n    ];\n  }\n}\n```",
        "vue": "```html\n<template>\n  <!-- Default -->\n  <stories-badge>99</stories-badge>\n\n  <!-- Colors -->\n  <stories-badge color=\"primary\">11</stories-badge>\n  <stories-badge color=\"secondary\">22</stories-badge>\n  <stories-badge color=\"tertiary\">33</stories-badge>\n  <stories-badge color=\"success\">44</stories-badge>\n  <stories-badge color=\"warning\">55</stories-badge>\n  <stories-badge color=\"danger\">66</stories-badge>\n  <stories-badge color=\"light\">77</stories-badge>\n  <stories-badge color=\"medium\">88</stories-badge>\n  <stories-badge color=\"dark\">99</stories-badge>\n\n  <!-- Button with badge on left and right -->\n  <stories-button>\n    <stories-badge slot=\"start\">11</stories-badge>\n    <stories-label>My Button</stories-label>\n    <stories-badge slot=\"end\">22</stories-badge>\n  </stories-button>\n</template>\n\n<script>\nimport { StoriesBadge, StoriesButton, StoriesLabel } from '@stories-js/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  components: { StoriesBadge, StoriesButton, StoriesLabel }\n});\n</script>\n```"
      },
      "props": [
        {
          "name": "color",
          "type": "string",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": true,
          "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": [
            {
              "type": "string"
            }
          ],
          "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/button/button.tsx",
      "encapsulation": "shadow",
      "tag": "stories-button",
      "readme": "# stories-button\n\nThe stories-button is an styled HTML button element displays text, icons, or both.\n",
      "docs": "The stories-button is an styled HTML button element displays text, icons, or both.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "buttonType",
          "type": "string",
          "mutable": true,
          "attr": "button-type",
          "reflectToAttr": false,
          "docs": "The type of button.",
          "docsTags": [],
          "default": "'button'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "string",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": true,
          "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": [
            {
              "type": "string"
            }
          ],
          "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": "expand",
          "type": "\"block\" | \"full\"",
          "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"
            },
            {
              "value": "full",
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "fill",
          "type": "\"clear\" | \"default\" | \"outline\" | \"solid\"",
          "mutable": true,
          "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"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "href",
          "type": "string",
          "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"
            }
          ],
          "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\"",
          "mutable": false,
          "attr": "shape",
          "reflectToAttr": true,
          "docs": "The button shape.",
          "docsTags": [],
          "values": [
            {
              "value": "round",
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "size",
          "type": "\"default\" | \"large\" | \"small\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": true,
          "docs": "The button size.",
          "docsTags": [],
          "values": [
            {
              "value": "default",
              "type": "string"
            },
            {
              "value": "large",
              "type": "string"
            },
            {
              "value": "small",
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "strong",
          "type": "boolean",
          "mutable": false,
          "attr": "strong",
          "reflectToAttr": false,
          "docs": "If `true`, activates a button with a heavier font weight.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "target",
          "type": "string",
          "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"
            }
          ],
          "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": "storiesBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the button loses focus.",
          "docsTags": []
        },
        {
          "event": "storiesClick",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the button click.",
          "docsTags": []
        },
        {
          "event": "storiesFocus",
          "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-activated",
          "annotation": "prop",
          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
        },
        {
          "name": "--background-activated-opacity",
          "annotation": "prop",
          "docs": "Opacity of the button when pressed"
        },
        {
          "name": "--background-focused",
          "annotation": "prop",
          "docs": "Background of the button when focused with the tab key"
        },
        {
          "name": "--background-focused-opacity",
          "annotation": "prop",
          "docs": "Opacity of the button when focused 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 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-activated",
          "annotation": "prop",
          "docs": "Text color of the button when pressed"
        },
        {
          "name": "--color-focused",
          "annotation": "prop",
          "docs": "Text color of the button when focused with the tab key"
        },
        {
          "name": "--color-hover",
          "annotation": "prop",
          "docs": "Text color of the button when hover"
        },
        {
          "name": "--opacity",
          "annotation": "prop",
          "docs": "Opacity of the button"
        },
        {
          "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": "--ripple-color",
          "annotation": "prop",
          "docs": "Color of the button ripple effect"
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition of the button"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/buttons/buttons.tsx",
      "encapsulation": "shadow",
      "tag": "stories-buttons",
      "readme": "# stories-buttons\n\nThe stories-buttons is an wrapping container for another buttons.\n",
      "docs": "The stories-buttons is an wrapping container for another buttons.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "collapse",
          "type": "boolean",
          "mutable": false,
          "attr": "collapse",
          "reflectToAttr": false,
          "docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/checkbox/checkbox.tsx",
      "encapsulation": "shadow",
      "tag": "stories-checkbox",
      "readme": "# stories-checkbox\n\nThe stories-checkbox is a styled HTML checkboxed input element.\n",
      "docs": "The stories-checkbox is a styled HTML checkboxed input element.",
      "docsTags": [],
      "usage": {},
      "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": "string",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": true,
          "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": [
            {
              "type": "string"
            }
          ],
          "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": "any",
          "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": "any"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "storiesBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checkbox loses focus.",
          "docsTags": []
        },
        {
          "event": "storiesChange",
          "detail": "CheckboxChangeEventDetail<any>",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checked property has changed.",
          "docsTags": []
        },
        {
          "event": "storiesFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checkbox has focus.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--background",
          "annotation": "prop",
          "docs": "Background of the checkbox icon"
        },
        {
          "name": "--background-checked",
          "annotation": "prop",
          "docs": "Background of the checkbox icon when checked"
        },
        {
          "name": "--border-color",
          "annotation": "prop",
          "docs": "Border color of the checkbox icon"
        },
        {
          "name": "--border-color-checked",
          "annotation": "prop",
          "docs": "Border color of the checkbox icon when checked"
        },
        {
          "name": "--border-radius",
          "annotation": "prop",
          "docs": "Border radius of the checkbox icon"
        },
        {
          "name": "--border-style",
          "annotation": "prop",
          "docs": "Border style of the checkbox icon"
        },
        {
          "name": "--border-width",
          "annotation": "prop",
          "docs": "Border width of the checkbox icon"
        },
        {
          "name": "--checkmark-color",
          "annotation": "prop",
          "docs": "Color of the checkbox checkmark when checked"
        },
        {
          "name": "--checkmark-width",
          "annotation": "prop",
          "docs": "Stroke width of the checkbox checkmark"
        },
        {
          "name": "--size",
          "annotation": "prop",
          "docs": "Size of the checkbox icon"
        },
        {
          "name": "--transition",
          "annotation": "prop",
          "docs": "Transition of the checkbox icon"
        }
      ],
      "slots": [],
      "parts": [
        {
          "name": "container",
          "docs": ""
        },
        {
          "name": "mark",
          "docs": ""
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/col/col.tsx",
      "encapsulation": "shadow",
      "tag": "stories-col",
      "readme": "# stories-col\n\nThe stories-col is a container for content within a grid. You put it inside of a row and it always expand to fill the space of a row.\n",
      "docs": "The stories-col is a container for content within a grid. You put it inside of a row and it always expand to fill the space of a row.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "offset",
          "type": "string",
          "mutable": false,
          "attr": "offset",
          "reflectToAttr": false,
          "docs": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "offsetLg",
          "type": "string",
          "mutable": false,
          "attr": "offset-lg",
          "reflectToAttr": false,
          "docs": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "offsetMd",
          "type": "string",
          "mutable": false,
          "attr": "offset-md",
          "reflectToAttr": false,
          "docs": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "offsetSm",
          "type": "string",
          "mutable": false,
          "attr": "offset-sm",
          "reflectToAttr": false,
          "docs": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "offsetXl",
          "type": "string",
          "mutable": false,
          "attr": "offset-xl",
          "reflectToAttr": false,
          "docs": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "offsetXs",
          "type": "string",
          "mutable": false,
          "attr": "offset-xs",
          "reflectToAttr": false,
          "docs": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pull",
          "type": "string",
          "mutable": false,
          "attr": "pull",
          "reflectToAttr": false,
          "docs": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pullLg",
          "type": "string",
          "mutable": false,
          "attr": "pull-lg",
          "reflectToAttr": false,
          "docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pullMd",
          "type": "string",
          "mutable": false,
          "attr": "pull-md",
          "reflectToAttr": false,
          "docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pullSm",
          "type": "string",
          "mutable": false,
          "attr": "pull-sm",
          "reflectToAttr": false,
          "docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pullXl",
          "type": "string",
          "mutable": false,
          "attr": "pull-xl",
          "reflectToAttr": false,
          "docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pullXs",
          "type": "string",
          "mutable": false,
          "attr": "pull-xs",
          "reflectToAttr": false,
          "docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "push",
          "type": "string",
          "mutable": false,
          "attr": "push",
          "reflectToAttr": false,
          "docs": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pushLg",
          "type": "string",
          "mutable": false,
          "attr": "push-lg",
          "reflectToAttr": false,
          "docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pushMd",
          "type": "string",
          "mutable": false,
          "attr": "push-md",
          "reflectToAttr": false,
          "docs": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pushSm",
          "type": "string",
          "mutable": false,
          "attr": "push-sm",
          "reflectToAttr": false,
          "docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pushXl",
          "type": "string",
          "mutable": false,
          "attr": "push-xl",
          "reflectToAttr": false,
          "docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "pushXs",
          "type": "string",
          "mutable": false,
          "attr": "push-xs",
          "reflectToAttr": false,
          "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "size",
          "type": "string",
          "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"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeLg",
          "type": "string",
          "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"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeMd",
          "type": "string",
          "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"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeSm",
          "type": "string",
          "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"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXl",
          "type": "string",
          "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"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "sizeXs",
          "type": "string",
          "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"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "resize",
          "target": "window",
          "capture": false,
          "passive": true
        }
      ],
      "styles": [
        {
          "name": "--stories-grid-column-padding",
          "annotation": "prop",
          "docs": "Padding for the Column"
        },
        {
          "name": "--stories-grid-column-padding-lg",
          "annotation": "prop",
          "docs": "Padding for the Column on lg screens and up"
        },
        {
          "name": "--stories-grid-column-padding-md",
          "annotation": "prop",
          "docs": "Padding for the Column on md screens and up"
        },
        {
          "name": "--stories-grid-column-padding-sm",
          "annotation": "prop",
          "docs": "Padding for the Column on sm screens and up"
        },
        {
          "name": "--stories-grid-column-padding-xl",
          "annotation": "prop",
          "docs": "Padding for the Column on xl screens and up"
        },
        {
          "name": "--stories-grid-column-padding-xs",
          "annotation": "prop",
          "docs": "Padding for the Column on xs screens and up"
        },
        {
          "name": "--stories-grid-columns",
          "annotation": "prop",
          "docs": "The number of total Columns in the Grid"
        }
      ],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/footer/footer.tsx",
      "encapsulation": "shadow",
      "tag": "stories-footer",
      "readme": "# stories-footer\n\nThe stories-footer is a root component, always appears at the bottom of the page.\n",
      "docs": "The stories-footer is a root component, always appears at the bottom of the page.",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/grid/grid.tsx",
      "encapsulation": "shadow",
      "tag": "stories-grid",
      "readme": "# stories-grid\n\nThe stories-grid is a container designed on mobile-first flexbox system for building custom layouts. A layout based on a 12 columns by default, but could be easily customized to any number via CSS customization. Columns will expand to fill the row, and will resize to fit additional columns.\n",
      "docs": "The stories-grid is a container designed on mobile-first flexbox system for building custom layouts. A layout based on a 12 columns by default, but could be easily customized to any number via CSS customization. Columns will expand to fill the row, and will resize to fit additional columns.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "fixed",
          "type": "boolean",
          "mutable": false,
          "attr": "fixed",
          "reflectToAttr": false,
          "docs": "If `true`, the grid will have a fixed width based on the screen size.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [
        {
          "name": "--stories-grid-padding",
          "annotation": "prop",
          "docs": "Padding for the Grid"
        },
        {
          "name": "--stories-grid-padding-lg",
          "annotation": "prop",
          "docs": "Padding for the Grid on lg screens"
        },
        {
          "name": "--stories-grid-padding-md",
          "annotation": "prop",
          "docs": "Padding for the Grid on md screens"
        },
        {
          "name": "--stories-grid-padding-sm",
          "annotation": "prop",
          "docs": "Padding for the Grid on sm screens"
        },
        {
          "name": "--stories-grid-padding-xl",
          "annotation": "prop",
          "docs": "Padding for the Grid on xl screens"
        },
        {
          "name": "--stories-