pyro/dist/vscode.html-custom-data.json

Pyro custom elements

{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
  "version": 1.1,
  "tags": [
    {
      "name": "pyro-accordion-group",
      "description": "If accordions are inside a <pyro-accordion-group> only one of them can be open at a time, opening an accordion will close the others.\n[docs](https://pyrojs.com/el/accordion#grouped-accordions)\n\n```html\n<pyro-accordion-group>\n  <pyro-accordion summary=\"Click me 1\" open>...</pyro-accordion>\n  <pyro-accordion summary=\"Click me 2\">...</pyro-accordion>\n  <pyro-accordion summary=\"Click me 3\">...</pyro-accordion>\n</pyro-accordion-group>\n```\n---\n\n\n### **Slots:**\n - _default_ - `pyro-accordion`s or elements containing `pyro-accordion`s",
      "attributes": [],
      "references": []
    },
    {
      "name": "pyro-accordion",
      "description": "Collapsible containers that can contain disclosure elements. They can be be single or grouped, where only one can be open at a time.\n[docs](https://pyrojs.com/el/accordion)\n\n```html\n<pyro-accordion summary=\"Click me\" open>\n  <span slot=\"content\">\n    Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n  </span>\n</pyro-accordion>\n```\n---\n\n\n### **Events:**\n - **pyro-accordion-click**\n\n### **Slots:**\n - **summary** - Summary of the accordion, always visible\n- **content** - Content of the accordion that can be opened\n- **icon** - Slot for the icon to be place inside the summary, chevron by default\n\n### **CSS Properties:**\n - **--pyro-accordion-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-accordion-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-accordion-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-accordion-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-accordion-spacing** - `padding` _(default: var(--pyro-spacing))_",
      "attributes": [
        {
          "name": "summary",
          "description": "Summary of the accordion, overriden by `slot=\"summary\"`",
          "values": []
        },
        {
          "name": "content",
          "description": "Content of the accordion, overriden by `slot=\"content\"`",
          "values": []
        },
        {
          "name": "open",
          "description": "Indicates whether the accordion is open",
          "values": []
        },
        {
          "name": "'no-flip'",
          "description": "Disables flipping of the icon when open/closed",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-alert",
      "description": "An element that displays a brief, important message in a way that attracts the user's attention\nwithout interrupting the user's task.\n[docs](https://pyrojs.com/el/alert)\n\n```html\n<pyro-alert>\n  <p>This is the content of the alert</p>\n</pyro-alert>\n```\n---\n\n\n### **Slots:**\n - _default_ - (default) Content of alert\n- **icon** - a pyro-icon or generic image. Receives the css `color` and `fill` based on severity\n- **dismissible** - overrides the default dimissible icon, if used\n\n### **CSS Properties:**\n - **--pyro-alert-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-alert-surface-color** - `background` (when no `severity` is set) _(default: var(--pyro-surface-color))_\n- **--pyro-alert-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-alert-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-alert-spacing** - `padding` Severity _(default: var(--pyro-spacing))_\n- **--pyro-alert-info-color** - `color` (icon, band) _(default: var(--pyro-info-color))_\n- **--pyro-alert-info-color-lighter** - `background` _(default: var(--pyro-info-color-lighter))_\n- **--pyro-alert-success-color** - `color` (icon, band) _(default: var(--pyro-success-color))_\n- **--pyro-alert-success-color-lighter** - `background` _(default: var(--pyro-success-color-lighter))_\n- **--pyro-alert-warning-color** - `color` (icon, band) _(default: var(--pyro-warning-color))_\n- **--pyro-alert-warning-color-lighter** - `background` _(default: var(--pyro-warning-color-lighter))_\n- **--pyro-alert-error-color** - `color` (icon, band) _(default: var(--pyro-error-color))_\n- **--pyro-alert-error-color-lighter** - `background` Variation based _(default: var(--pyro-error-color-lighter))_\n- **--pyro-alert-band-width** - left band `width` _(default: calc(var(--pyro-border-width) * 4))_\n- **--pyro-alert-dismissible-width** - dismissible icon `width` _(default: 1em)_",
      "attributes": [
        {
          "name": "severity",
          "description": "Alert severity, determines colors",
          "values": [
            { "name": "info" },
            { "name": "success" },
            { "name": "warning" },
            { "name": "error" },
            { "name": "''" }
          ]
        },
        {
          "name": "band",
          "description": "Adds a bright colored band to the alert left, similar to a border",
          "values": []
        },
        {
          "name": "dismissible",
          "description": "Adds an cross icon to dismiss the alert",
          "values": []
        },
        {
          "name": "dimissed",
          "description": "(static) Added if the alert was dismissed",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-avatar",
      "description": "Circle showing inital(s) or image, typically associated with profiles or menus.\n[docs](https://pyrojs.com/el/avatar)\n\n```html\n<pyro-avatar label=\"IB\"></pyro-avatar>\n```\n---\n\n\n### **Slots:**\n - _default_ - One/two letter, overrides label prop\n- **image** - Images, scaled to fit, cropped to circle\n\n### **CSS Properties:**\n - **--pyro-avatar-width** - `width` _(default: 1.5em)_\n- **--pyro-avatar-height** - `height` _(default: 1.5em)_\n- **--pyro-avatar-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-avatar-accent-color** - `background` _(default: var(--pyro-accent-color))_",
      "attributes": [
        {
          "name": "label",
          "description": "One/two letters, overriden by default slot",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-badge",
      "description": "Badge element, showing a small badge on the slotted element\nSee [docs](https://pyrojs.com/el/avatar)\n\n```html\n<pyro-badge label=\"3\">\n  Notifications\n</pyro-badge>\n```\n---\n\n\n### **Slots:**\n - _default_ - One/two letter, overrides label prop\n\n### **CSS Properties:**\n - **--pyro-badge-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-badge-accent-color** - `background` _(default: var(--pyro-accent-color))_\n- **--pyro-badge-font-size** - `font-size` _(default: calc(var(--pyro-badge-height, 1.5em) / 2))_\n- **--pyro-badge-height** - `height` _(default: 1.5em)_",
      "attributes": [{ "name": "label", "description": "Label", "values": [] }],
      "references": []
    },
    {
      "name": "pyro-box",
      "description": "Generic box with configured css styling\n[docs](https://pyrojs.com/el/badge)\n\n```html\n<pyro-box style=\"width: 600px\"><p>Box contents</p></pyro-box>\n```\n---\n\n\n### **Slots:**\n - _default_ - Contents of the box\n\n### **CSS Properties:**\n - **--pyro-box-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-box-background** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-box-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-box-foreground-color** - `background` _(default: var(--pyro-foreground-color))_",
      "attributes": [
        {
          "name": "variant",
          "description": "Background color of the box",
          "values": [
            { "name": "foreground" },
            { "name": "surface" },
            { "name": "transparent" },
            { "name": "''" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "pyro-button",
      "description": "Button element\n[docs](https://pyrojs.com/el/button)\n\n```html\n<pyro-button variant=\"primary\">Click me\n</pyro-button>\n```\n---\n\n\n### **Slots:**\n - _default_ - Contents of the button\n- **icon-left** - Icon on the left\n- **icon-right** - Icon on the right\n\n### **CSS Properties:**\n - **--pyro-button-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-button-font-weight** - `font-weight` _(default: inherit)_\n- **--pyro-button-spacing** - default size or `padding` _(default: var(--pyro-spacing))_\n- **--pyro-button-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-button-border-radius** - `border` _(default: var(--pyro-border-radius))_\n- **--pyro-button-surface-color** - default `background` _(default: var(--pyro-surface-color))_\n- **--pyro-button-primary-color** - primary `background` _(default: var(--pyro-primary-color))_\n- **--pyro-text-color-on-primary** - text `color` on primary _(default: var(--pyro-text-color-on-primary))_\n- **--pyro-button-secondary-color** - secondary `background` _(default: var(--pyro-secondary-color))_\n- **--pyro-text-color-on-secondary** - text `color` on secondary _(default: var(--pyro-text-color-on-secondary))_\n- **--pyro-button-tertiary-color** - tertiary `background` _(default: var(--pyro-tertiary-color))_\n- **--pyro-text-color-on-tertiary** - text `color` on tertiary _(default: var(--pyro-text-color-on-tertiary))_\n- **--pyro-text-color-on-transparent** - text `color` on transparent _(default: var(--pyro-text-color-on-transparent))_\n- **--pyro-button-hover-color** - `:hover` `background` _(default: var(--pyro-hover-color))_\n- **--pyro-button-disabled-color** - disabled `background` _(default: var(--pyro-disabled-color))_\n- **--pyro-button-active-color** - `:active` `background` _(default: none)_",
      "attributes": [
        {
          "name": "variant",
          "description": "Color variant of the button",
          "values": [
            { "name": "primary" },
            { "name": "secondary" },
            { "name": "tertiary" },
            { "name": "''" }
          ]
        },
        {
          "name": "size",
          "description": "Button size",
          "values": [{ "name": "s" }, { "name": "m" }, { "name": "l" }]
        },
        {
          "name": "transparent",
          "description": "Enforces a transparent background",
          "values": []
        },
        {
          "name": "circle",
          "description": "Make the button into a circle",
          "values": []
        },
        { "name": "disabled", "description": "Disabled", "values": [] },
        { "name": "form", "values": [] },
        {
          "name": "type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" },
            { "name": "menu" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "pyro-card",
      "description": "Card element\n[docs](https://pyrojs.com/el/card)\n\n```html\n<pyro-card header=\"This is title\">\n  <div slot=\"content\">\n    <p>This is content</p>\n  </div>\n  <footer slot=\"footer\">Footer</footer>\n</pyro-card>\n```\n---\n\n\n### **Slots:**\n - **image** - Image on top, prefers `<img>` or `<picture>`\n- **header** - Header content, prefers `<h*>` or `<header>`\n- **content** - Main content of the card, any element\n- **footer** - Header content, prefers `<footer>`\n\n### **CSS Properties:**\n - **--pyro-card-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-card-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-card-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-card-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-card-spacing** - `padding` _(default: var(--pyro-spacing))_",
      "attributes": [
        {
          "name": "header",
          "description": "Header text of card, overriden by `slot=\"header\"`",
          "values": []
        },
        {
          "name": "content",
          "description": "Main content of the card, overriden by `slot=\"content\"`",
          "values": []
        },
        {
          "name": "footer",
          "description": "Footer text of the card, overriden by `slot=\"footer\"`",
          "values": []
        },
        { "name": "bordered", "description": "Add inner borders", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-checkbox",
      "description": "Checkbox input element\n[docs](https://pyrojs.com/el/checkbox)\n\n```html\n<pyro-checkbox></pyro-checkbox>\n```\n---\n\n\n### **Events:**\n - **input** - emitted when the value changes\n\n### **Slots:**\n - **icon** - icon for customized checkmark\n\n### **CSS Properties:**\n - **--pyro-checkbox-text-color** - checkmark `color` _(default: var(--pyro-text-color))_\n- **--pyro-checkbox-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-checkbox-accent-color** - checked `background`; _(default: var(--pyro-accent-color))_\n- **--pyro-checkbox-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-checkbox-border-radius** - `border` _(default: var(--pyro-border-radius))_\n- **--pyro-checkbox-height** - `height` _(default: 1em)_\n- **--pyro-checkbox-width** - `width` _(default: 1em)_\n- **--pyro-checkbox-disabled-color** - disabled `background` _(default: var(--pyro-disabled-color))_",
      "attributes": [
        { "name": "checked", "description": "Checked", "values": [] },
        { "name": "disabled", "description": "Disabled", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-colorpicker",
      "description": "Colorpicker\n[docs](https://pyrojs.com/el/colorpicker)\n\n```html\n<pyro-colorpicker></pyro-colorpicker>\n```\n---\n\n\n### **Events:**\n - **change**\n- **input** - emitted when the value changes\n\n### **CSS Properties:**\n - **--pyro-colorpicker-spacing** - `gap` _(default: var(--pyro-spacing))_\n- **--pyro-colorpicker-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-colorpicker-border-radius** - `border` _(default: var(--pyro-border-radius))_\n- **--pyro-colorpicker-surface-color** - `background` _(default: var(--pyro-surface-color))_",
      "attributes": [
        {
          "name": "value",
          "description": "Hex value of the color, eg: #00ff00",
          "values": []
        },
        { "name": "circle", "description": "Makes it a circle", "values": [] },
        {
          "name": "'with-input'",
          "description": "Shows an input field",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-divider",
      "description": "Divider element\n[docs](https://pyrojs.com/el/divider)\n\n```html\n<pyro-divider></pyro-divider>\n```\n---\n\n\n### **CSS Properties:**\n - **--pyro-divider-border** - `border-top` _(default: var(--pyro-border))_\n- **--pyro-divider-color** - `color` _(default: var(--pyro-border-color))_\n- **--pyro-divider-spacing** - `padding` _(default: var(--pyro-spacing-s))_",
      "attributes": [
        {
          "name": "bordered",
          "description": "Vertical instead of horizontal",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-dialog",
      "description": "Dialog element\n[docs](https://pyrojs.com/el/dialog)\n\n```html\n<pyro-dialog>\n  <div slot=\"content\">[..content]</div>\n  <p slot=\"action\"><pyro-button primary>Open me</pyro-button></p>\n</pyro-dialog>\n```\n---\n\n\n### **Slots:**\n - _default_ - Contents of the dialog\n- **content** - Main content of the dialog\n- **action** - Header content, prefers <footer>\n\n### **CSS Properties:**\n - **--pyro-dialog-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-dialog-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-dialog-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-dialog-border-radius** - `border` _(default: var(--pyro-border-radius))_\n- **--pyro-dialog-spacing** - `padding` _(default: var(--pyro-spacing-l))_\n\n### **CSS Parts:**\n - **dialog** - The dialog itself, change width, max-heigh etc.",
      "attributes": [
        {
          "name": "open",
          "description": "Indicates whether the dialog is open",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-icon",
      "description": "Icon, with color and sizing\n[docs](https://pyrojs.com/el/icon)\n\n```html\n<pyro-icon color=\"error\" src=\"./assets/chevron-down.svg\"></pyro-icon>\n```\n---\n\n\n### **CSS Properties:**\n - **--pyro-icon-height** - `height` _(default: --pyro-font-size)_\n- **--pyro-icon-width** - `width` _(default: --pyro-font-size)_\n- **--pyro-icon-min-width** - `min-width` _(default: --pyro-font-size)_\n- **--pyro-icon-min-height** - `min-height` _(default: --pyro-font-size)_\n- **--pyro-icon-height-s** - `height` when size=\"s\" _(default: --pyro-font-size-s)_\n- **--pyro-icon-width-s** - `width` when size=\"s\" _(default: --pyro-font-size-s)_\n- **--pyro-icon-min-width-s** - `min-width` when size=\"s\" _(default: --pyro-font-size-s)_\n- **--pyro-icon-min-height-s** - `min-height` when size=\"s\" _(default: --pyro-font-size-s)_\n- **--pyro-icon-height-l** - `height` when size=\"l\" _(default: --pyro-font-size-l)_\n- **--pyro-icon-width-l** - `width` when size=\"l\" _(default: --pyro-font-size-l)_\n- **--pyro-icon-min-width-l** - `min-width` when size=\"l\" _(default: --pyro-font-size-l)_\n- **--pyro-icon-min-height-l** - `min-height` when size=\"l\" _(default: --pyro-font-size-l)_",
      "attributes": [
        { "name": "src", "description": "Icon source path", "values": [] },
        {
          "name": "color",
          "description": "Icon color",
          "values": [{ "name": "Color" }]
        },
        {
          "name": "size",
          "description": "Icon size",
          "values": [{ "name": "s" }, { "name": "m" }, { "name": "l" }]
        },
        {
          "name": "alt",
          "description": "Accessible name. If not provided, icon is ignored by screen readers",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-list-item",
      "description": "List item element, used as child of `pyro-list`\n[docs](https://pyrojs.com/el/list)\n\n```html\n<pyro-list-item>asd</pyro-list-item>\n```\n---\n\n\n### **Slots:**\n - _default_ - Label\n- **prefix** - Prefix, before label\n- **suffix** - Suffix, after label\n\n### **CSS Properties:**\n - **--pyro-list-item-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-list-item-spacing** - `padding` _(default: var(--pyro-spacing))_",
      "attributes": [
        {
          "name": "label",
          "description": "Label/text, overriden by default slot",
          "values": []
        },
        { "name": "selected", "description": "Selected", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-list",
      "description": "List element\n[docs](https://pyrojs.com/el/list)\n\n```html\n<pyro-list>\n  <span slot=\"header\">Loading</span>\n  <pyro-list-item>one</pyro-list-item>\n  <pyro-list-item>two</pyro-list-item>\n</pyro-list>\n```\n---\n\n\n### **Slots:**\n - _default_ - `pyro-list-item`s or elements containing `pyro-list-item`s\n- **header** - Content above slot\n\n### **CSS Properties:**\n - **--pyro-list-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-list-spacing** - `padding` _(default: var(--pyro-spacing-s))_\n- **--pyro-list-border** - `border-left` _(default: var(--pyro-border))_\n- **--pyro-list-min-width** - `min-width` _(default: 130px)_\n\n### **CSS Parts:**\n - **header** - Header\n- **items** - List of `<pyro-list-item>`\n- **item** - Single `<pyro-list-item>`, only with items prop",
      "attributes": [
        { "name": "header", "description": "Header text", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-progressbar",
      "description": "Progressbar element\n[docs](https://pyrojs.com/el/progressbar)\n\n```html\n<pyro-progressbar value=\"4\" max=\"10\" text=\"Loading...\"></pyro-progressbar>\n```\n---\n\n\n### **Slots:**\n - **text** - Optional content in middle\n\n### **CSS Properties:**\n - **--pyro-progressbar-accent-color** - fill `color` _(default: var(--pyro-accent-color))_\n- **--pyro-progressbar-background** - background `color` _(default: var(--pyro-surface-color))_\n- **--pyro-progressbar-text-color** - text `color` _(default: var(--pyro-text-color-on-surface))_\n- **--pyro-progressbar-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-progressbar-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-progressbar-height** - `height` _(default: 1em)_",
      "attributes": [
        { "name": "value", "description": "Current value", "values": [] },
        { "name": "max", "description": "Max value", "values": [] },
        {
          "name": "text",
          "description": "Text in the middle of the progressbar bar",
          "values": []
        },
        { "name": "'aria-label'", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-progresscircle",
      "description": "Progresscircle element\n[docs](https://pyrojs.com/el/progresscircle)\n\n```html\n<pyro-progresscircle value=\"4\" max=\"100\" text=\"4%\"></pyro-progresscircle>\n```\n---\n\n\n### **Slots:**\n - **text** - Optional content in middle\n\n### **CSS Properties:**\n - **--pyro-progresscircle-accent-color** - value `background` _(default: var(--pyro-accent-color))_\n- **--pyro-progresscircle-background** - background `background` _(default: var(--pyro-surface-color))_\n- **--pyro-progresscircle-text-color** - text `color` _(default: var(--pyro-text-color-on-surface))_\n- **--pyro-progresscircle-height** - `height` _(default: 1em)_",
      "attributes": [
        { "name": "value", "description": "Current value", "values": [] },
        { "name": "max", "description": "Max value", "values": [] },
        {
          "name": "text",
          "description": "Text in the middle of the progresscircle",
          "values": []
        },
        { "name": "'aria-label'", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-radio-group",
      "description": "Grouping element for pyro-radios, holds the value of the selected one\n[docs](https://pyrojs.com/el/radio)\n\n```html\n<pyro-radio-group name=\"numenor\" style=\"gap: 1em;\">\n  <pyro-radio value=\"uno\"></pyro-radio>\n  <pyro-radio value=\"due\" checked></pyro-radio>\n  <pyro-radio value=\"tre\"></pyro-radio>\n</pyro-radio-group>\n---\n",
      "attributes": [
        {
          "name": "name",
          "description": "Name of group, assigned to all child `pyro-radio`s",
          "values": []
        },
        {
          "name": "value",
          "description": "If provided, sets radio with same value as checked by default",
          "values": []
        },
        {
          "name": "square",
          "description": "For square radios, smooths corners",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-radio",
      "description": "Radio input element\n[docs](https://pyrojs.com/el/radio)\n\n```html\n<pyro-radio value=\"due\" checked></pyro-radio>\n```\n---\n\n\n### **Events:**\n - **pyro-radio-click**\n\n### **Slots:**\n - _default_ - With square prop only, shows content inside squared radio\n\n### **CSS Properties:**\n - **--pyro-radio-accent-color** - icon `color` _(default: var(--pyro-accent-color))_\n- **--pyro-radio-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-radio-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-radio-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-radio-width, 1em** - `width` _(default: undefined)_\n- **--pyro-radio-height, 1em** - `height` _(default: undefined)_\n- **--pyro-radio-check-height** - checkmark/icon `height` _(default: 0.5em)_\n- **--pyro-radio-check-width** - checkmark/icon `width` _(default: 0.5em)_",
      "attributes": [
        {
          "name": "checked",
          "description": "Initial checked value",
          "values": []
        },
        {
          "name": "value",
          "description": "Boolean value of radio",
          "values": []
        },
        {
          "name": "name",
          "description": "Name, automatically set by pyro-radio-group",
          "values": []
        },
        {
          "name": "square",
          "description": "Makes rectangular, button-like radio",
          "values": []
        },
        { "name": "'aria-label'", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-range",
      "description": "Range input element, to select a number from min to max\n[docs](https://pyrojs.com/el/range)\n\n```html\n<pyro-range></pyro-range>\n```\n---\n\n\n### **Events:**\n - **input** - emitted when the value changes",
      "attributes": [
        { "name": "value", "description": "Current value", "values": [] },
        { "name": "min", "description": "Min value", "values": [] },
        { "name": "max", "description": "Max value", "values": [] },
        {
          "name": "step",
          "description": "Step size or interval between values",
          "values": []
        },
        {
          "name": "explicit",
          "description": "Shows explicitly the current value",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-scrollbox",
      "description": "Box for scrolling content, removing layout shift and adding smooth scrolling\n[docs](https://pyrojs.com/el/scrollbox)\n\n```html\n<pyro-scrollbox style=\"width: 100%`; height: 500px\">\n  <div style=\"height: 400px;\">[...content]</div>\n</pyro-scrollbox>\n---\n",
      "attributes": [
        {
          "name": "visible",
          "description": "Always shows the scrollbar, even when not needed",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-select-item",
      "description": "Select item element, used as child of `pyro-select`\n[docs](https://pyrojs.com/el/select)\n\n```html\n<pyro-select-item value=\"one\">\n  <span slot=\"label\">1</span>\n</pyro-select-item>\n```\n---\n\n\n### **Events:**\n - **pyro-selected**\n- **click** - emitted when the item is clicked, use it on `pyro-select` instead\n\n### **Slots:**\n - _default_ - Content of a select-item, substitutes label, BUT the prop label is still required\n\n### **CSS Properties:**\n - **--pyro-select-item-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-select-item-hover-color** - `background` _(default: var(--pyro-hover-color))_\n- **--pyro-select-item-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-select-item-text-align** - text alignment in select item `text-align` _(default: left)_",
      "attributes": [
        { "name": "value", "description": "Current value", "values": [] },
        {
          "name": "label",
          "description": "Label/text, overriden by default slot",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-select",
      "description": "Select element\n[docs](https://pyrojs.com/el/select)\n\n```html\n<pyro-select summary=\"Continent\" value=\"europe\" open>\n  <pyro-select-item label=\"Africa\" value=\"africa\"></pyro-select-item>\n  <pyro-select-item label=\"Asia\" value=\"asia\"></pyro-select-item>\n  <pyro-select-item label=\"Europe\" value=\"europe\"></pyro-select-item>\n</pyro-select>\n```\n---\n\n\n### **Events:**\n - **input** - emitted when the value changes\n\n### **Slots:**\n - _default_ - `pyro-select-item`s or elements containing `pyro-select-item`s\n- **icon** - icon to the end of the select to indicate opening/closing\n\n### **CSS Properties:**\n - **--pyro-select-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-select-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-select-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-select-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-select-spacing** - `padding` _(default: var(--pyro-spacing))_\n- **--pyro-select-font-size** - `font-size` _(default: var(--pyro-font-size))_\n- **--pyro-select-min-width** - `min-width` _(default: var(--pyro-fields-min-width))_\n- **--pyro-select-max-height** - `max-height` _(default: 240px)_\n- **--pyro-select-text-align** - text alignment for selected/button `text-align` _(default: left)_",
      "attributes": [
        { "name": "value", "description": "Current value", "values": [] },
        {
          "name": "'default-label'",
          "description": "Label when no value is selected, placeholder",
          "values": []
        },
        { "name": "disabled", "description": "Disabled", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-skeleton",
      "description": "Skeleton element, typically used for loading state\n[docs](https://pyrojs.com/el/skeleton)\n\n```html\n<pyro-skeleton circle></pyro-skeleton>\n```\n---\n\n\n### **CSS Properties:**\n - **--pyro-skeleton-color** - `background` _(default: var(--pyro-border-color))_\n- **--pyro-skeleton-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_",
      "attributes": [
        { "name": "circle", "description": "Makes it a circle", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-switch",
      "description": "Switch input button\n[docs](https://pyrojs.com/el/switch)\n\n```html\n<pyro-switch checked></pyro-switch>\n```\n---\n\n\n### **Events:**\n - **input** - emitted when the value changes\n\n### **CSS Properties:**\n - **--pyro-switch-border-radius** - set low value for squared look, equals size by default _(default: var(--pyro-switch-size))_\n- **--pyro-switch-size** - size of the switch _(default: 1em)_\n- **--pyro-switch-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-switch-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-switch-accent-color** - `background` _(default: var(--pyro-accent-color))_\n- **undefined** - undefined _(default: undefined)_\n- **--pyro-switch-ball-color** - ball `background` _(default: var(--pyro-foreground-color))_\n- **--pyro-switch-ball-border** - ball `border` _(default: var(--pyro-border))_\n- **--pyro-switch-disabled-color** - disabled `background` _(default: var(--pyro-disabled-color))_",
      "attributes": [
        { "name": "checked", "description": "Checked", "values": [] },
        { "name": "disabled", "description": "Disabled", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-tab-group",
      "description": "Grouping element for `pyro-tab`s, ensures only one is selected at a time\n[docs](https://pyrojs.com/el/tab)\n\n```html\n<pyro-tab-group id=\"tabGroup\">\n  <pyro-tab>one</pyro-tab>\n  <pyro-tab>two</pyro-tab>\n  <pyro-tab>three</pyro-tab>\n</pyro-tab-group>\n```\n---\n\n\n### **Events:**\n - **click** - emitted when any tab is clicked\n\n### **Slots:**\n - _default_ - `pyro-tab`s or elements containing `pyro-tab`s\n\n### **CSS Properties:**\n - **--pyro-tab-group-gap** - gap between tabs _(default: 0)_\n- **--pyro-tab-group-justify-content** - justify tabs with flexbox `justify-content` _(default: flex-start)_",
      "attributes": [
        {
          "name": "fill",
          "description": "The tabs fill all available space",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-tab",
      "description": "Tab element, used as child of `pyro-tab-group`\n[docs](https://pyrojs.com/el/tab)\n\n```html\n<pyro-tab>one</pyro-tab>\n```\n---\n\n\n### **Events:**\n - **pyro-tab-click** - emitted when the tab is clicked\n\n### **Slots:**\n - _default_ - Label, overrides the label prop\n\n### **CSS Properties:**\n - **--pyro-tab-padding** - `padding` _(default: var(--pyro-spacing))_\n- **--pyro-tab-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-tab-background** - `background` _(default: transparent)_\n- **--pyro-tab-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-tab-selected-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-tab-selected-border-width** - `border-width` _(default: calc(2 * var(--pyro-border-width)))_\n- **--pyro-tab-selected-border-color** - `border-color` _(default: var(--pyro-accent-color))_\n- **--pyro-tab-gap** - gap between tabs _(default: 0px)_",
      "attributes": [
        {
          "name": "value",
          "description": "Exposed by pyro-tab-group as value in click event handler",
          "values": []
        },
        {
          "name": "label",
          "description": "Label/text, overriden by default slot",
          "values": []
        },
        { "name": "selected", "description": "Selected", "values": [] },
        {
          "name": "'aria-controls'",
          "description": "The id of the panel the this tab shows",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-tag",
      "description": "Tag element\n[docs](https://pyrojs.com/el/tag)\n\n```html\n<pyro-tag severity=\"success\" pill>gg</pyro-tag>\n```\n---\n\n\n### **Slots:**\n - _default_ - Label, overrides the label prop\n\n### **CSS Properties:**\n - **--pyro-tag-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-tag-surface-color** - `background` (when no `severity` is set) _(default: var(--pyro-surface-color))_\n- **--pyro-tag-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-tag-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-tag-spacing** - `padding` _(default: var(--pyro-spacing))_\n- **--pyro-tag-min-width** - `min-width` _(default: 60px)_\n- **--pyro-tag-info-color-lighter** - `background` _(default: var(--pyro-info-color-lighter))_\n- **--pyro-tag-success-color-lighter** - `background` _(default: var(--pyro-success-color-lighter))_\n- **--pyro-tag-warning-color-lighter** - `background` _(default: var(--pyro-warning-color-lighter))_\n- **--pyro-tag-error-color-lighter** - `background` _(default: var(--pyro-error-color-lighter))_\n- **--pyro-tag-info-color** - `border-color` _(default: var(--pyro-info-color))_\n- **--pyro-tag-success-color** - `border-color` _(default: var(--pyro-success-color))_\n- **--pyro-tag-warning-color** - `border-color` _(default: var(--pyro-warning-color))_\n- **--pyro-tag-error-color** - `border-color` _(default: var(--pyro-error-color))_",
      "attributes": [
        {
          "name": "label",
          "description": "Label/text, overriden by default slot",
          "values": []
        },
        {
          "name": "severity",
          "description": "Tag severity severity, determines colors",
          "values": [
            { "name": "info" },
            { "name": "success" },
            { "name": "warning" },
            { "name": "error" },
            { "name": "''" }
          ]
        },
        {
          "name": "size",
          "description": "Size of tag",
          "values": [{ "name": "s" }, { "name": "m" }, { "name": "l" }]
        },
        {
          "name": "dismissible",
          "description": "Adds an cross icon to dismiss the tag",
          "values": []
        },
        {
          "name": "pill",
          "description": "Rounds the tag to a pill",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "pyro-textfield",
      "description": "Textfield element\n\n```html\n<pyro-textfield type=\"text\" state=\"success\" clearable\nplaceholder=\"place\" severity=\"success\"></pyro-textfield>\n```\n---\n\n\n### **Events:**\n - **input** - emitted when the value changes\n\n### **Methods:**\n - **handleInput(event: _InputEvent_)** - A listener outside the shadow dom will access e.target.value\nwhere target will be pyro-input, thus the value is missing.\nThis with reflects: true will make the value available on pyro-input\n\n### **Slots:**\n - **action** - Space for icon-like action inside the textfield, like a custom `clearable`\n\n### **CSS Properties:**\n - **--pyro-textfield-text-color** - `color` _(default: var(--pyro-text-color))_\n- **--pyro-textfield-surface-color** - `background` _(default: var(--pyro-surface-color))_\n- **--pyro-textfield-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-textfield-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-textfield-min-width** - `min-width` _(default: var(--pyro-fields-min-width))_\n- **--pyro-textfield-spacing** - `padding` _(default: var(--pyro-spacing))_\n- **--pyro-textfield-font-size** - `font-size` _(default: var(--pyro-font-size))_\n- **--pyro-textfield-caption-text-color, inherit** - `color` _(default: undefined)_\n- **--pyro-textfield-info-color** - `color` _(default: var(--pyro-info-color))_\n- **--pyro-textfield-success-color** - `color` _(default: var(--pyro-success-color))_\n- **--pyro-textfield-warning-color** - `color` _(default: var(--pyro-warning-color))_\n- **--pyro-textfield-error-color** - `color` _(default: var(--pyro-error-color))_\n- **--pyro-textfield-disabled-color** - disabled `background` _(default: var(--pyro-disabled-color))_",
      "attributes": [
        {
          "name": "type",
          "description": "Type of the input, or 'textarea'",
          "values": [
            { "name": "text" },
            { "name": "textarea" },
            { "name": "email" },
            { "name": "number" },
            { "name": "password" },
            { "name": "search" },
            { "name": "tel" },
            { "name": "url" }
          ]
        },
        { "name": "value", "description": "Value of the input", "values": [] },
        {
          "name": "caption",
          "description": "Caption below the textfield, for description or errors",
          "values": []
        },
        {
          "name": "state",
          "description": "State and color of the textfield",
          "values": [
            { "name": "info" },
            { "name": "success" },
            { "name": "warning" },
            { "name": "error" },
            { "name": "''" }
          ]
        },
        { "name": "placeholder", "description": "Placeholder", "values": [] },
        { "name": "required", "description": "Required", "values": [] },
        { "name": "disabled", "description": "Disabled", "values": [] },
        { "name": "clearable", "description": "Clearable", "values": [] },
        { "name": "autocomplete", "values": [] },
        { "name": "form", "values": [] },
        { "name": "maxlength", "values": [] },
        { "name": "minlength", "values": [] },
        { "name": "name", "values": [] },
        { "name": "readonly", "values": [] },
        { "name": "pattern", "values": [] }
      ],
      "references": []
    },
    {
      "name": "pyro-toast",
      "description": "Toast stack, used to show multiple notifications in screen corners\n\n```html\n<pyro-toast id=\"toastElement\" center></pyro-toast>\n```\n---\n\n\n### **CSS Properties:**\n - **--pyro-toast-spacing** - size of toast _(default: var(--pyro-spacing))_\n- **--pyro-toast-border** - `border` _(default: var(--pyro-border))_\n- **--pyro-toast-border-radius** - `border-radius` _(default: var(--pyro-border-radius))_\n- **--pyro-toast-text-color** - text `color` Severity _(default: var(--pyro-text-color))_\n- **--pyro-toast-info-color-lighter** - default `background` _(default: var(--pyro-info-color-lighter))_\n- **--pyro-toast-success-color-lighter** - `background` _(default: var(--pyro-success-color-lighter))_\n- **--pyro-toast-warning-color-lighter** - `background` _(default: var(--pyro-warning-color-lighter))_\n- **--pyro-toast-error-color-lighter** - `background` _(default: var(--pyro-error-color-lighter))_\n- **--pyro-toast-info-color** - default `border-color` _(default: var(--pyro-info-color))_\n- **--pyro-toast-success-color** - `border-color` _(default: var(--pyro-success-color))_\n- **--pyro-toast-warning-color** - `border-color` _(default: var(--pyro-warning-color))_\n- **--pyro-toast-error-color** - `border-color` _(default: var(--pyro-error-color))_",
      "attributes": [
        {
          "name": "message",
          "description": "Message to display",
          "values": []
        },
        { "name": "duration", "description": "Duration in ms", "values": [] },
        {
          "name": "severity",
          "description": "Toast severity, determines colors",
          "values": [
            { "name": "info" },
            { "name": "success" },
            { "name": "warning" },
            { "name": "error" },
            { "name": "''" }
          ]
        },
        {
          "name": "top",
          "description": "Vertical position on top, default false",
          "values": []
        },
        {
          "name": "left",
          "description": "Vertical position on left, default false",
          "values": []
        },
        {
          "name": "center",
          "description": "Horizontal position in center, default false",
          "values": []
        }
      ],
      "references": []
    }
  ]
}