vanilla-hamburger/custom-elements.json

A tiny framework agnostic hamburger button element for modern web apps

{
  "version": "experimental",
  "tags": [
    {
      "name": "cross-burger",
      "path": "./cross-burger.js",
      "description": "A hamburger button custom element of Cross type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "fade-burger",
      "path": "./fade-burger.js",
      "description": "A hamburger button custom element of Fade type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "pivot-burger",
      "path": "./pivot-burger.js",
      "description": "A hamburger button custom element of Pivot type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "rotate-burger",
      "path": "./rotate-burger.js",
      "description": "A hamburger button custom element of Rotate type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "slant-burger",
      "path": "./slant-burger.js",
      "description": "A hamburger button custom element of Slant type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "sling-burger",
      "path": "./sling-burger.js",
      "description": "A hamburger button custom element of Sling type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "spin-burger",
      "path": "./spin-burger.js",
      "description": "A hamburger button custom element of Spin type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "spiral-burger",
      "path": "./spiral-burger.js",
      "description": "A hamburger button custom element of Spiral type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "squash-burger",
      "path": "./squash-burger.js",
      "description": "A hamburger button custom element of Squash type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "squeeze-burger",
      "path": "./squeeze-burger.js",
      "description": "A hamburger button custom element of Squeeze type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "tilt-burger",
      "path": "./tilt-burger.js",
      "description": "A hamburger button custom element of Tilt type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "turn-burger",
      "path": "./turn-burger.js",
      "description": "A hamburger button custom element of Turn type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    },
    {
      "name": "twirl-burger",
      "path": "./twirl-burger.js",
      "description": "A hamburger button custom element of Twirl type.",
      "attributes": [
        {
          "name": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "direction",
          "description": "The animation direction of the icon, left or right.",
          "type": "'left' | 'right'",
          "default": "\"left\""
        },
        {
          "name": "easing",
          "description": "A valid `transition-timing-function` CSS value, for example 'ease-out'.",
          "type": "string",
          "default": "\"cubic-bezier(0, 0, 0, 1)\""
        },
        {
          "name": "distance",
          "description": "The vertical distance between the lines. Small (sm), medium (md) or large (lg).",
          "type": "'sm' | 'md' | 'lg'",
          "default": "\"md\""
        },
        {
          "name": "duration",
          "description": "The duration of the animation. Can be set to zero if no animation is desired.",
          "type": "number",
          "default": "\"0.4\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "When set to true, the internal <button> element is disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Accessible label set on the internal <button> element for screen readers.",
          "type": "string",
          "default": "\"{hamburger}\""
        },
        {
          "name": "pressed",
          "attribute": "pressed",
          "description": "Set to true when element is pressed.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "size",
          "description": "Size of the icon. Should be a number between 12 and 48.",
          "type": "number",
          "default": "\"32\""
        }
      ],
      "events": [
        {
          "name": "pressed-changed",
          "description": "Event fired when pressed property changes."
        }
      ],
      "cssParts": [
        {
          "name": "bar",
          "description": "Animated bar elements."
        },
        {
          "name": "button",
          "description": "Native button element."
        }
      ]
    }
  ]
}