pyro
Version:
Pyro custom elements
1,619 lines • 148 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "src/elements/accordion/accordion-group.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroAccordionGroup",
"slots": [
{
"description": "`pyro-accordion`s or elements containing `pyro-accordion`s",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "_slotElements",
"type": {
"text": "any"
}
},
{
"kind": "field",
"name": "_accordions",
"type": {
"text": "PyroAccordion[]"
},
"default": "[]"
},
{
"kind": "method",
"name": "handleClick",
"privacy": "private",
"parameters": [
{
"name": "{ target }",
"type": {
"text": "{ target: PyroAccordion }"
}
}
]
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-accordion-group",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroAccordionGroup",
"declaration": {
"name": "PyroAccordionGroup",
"module": "src/elements/accordion/accordion-group.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-accordion-group",
"declaration": {
"name": "PyroAccordionGroup",
"module": "src/elements/accordion/accordion-group.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/accordion/accordion-group.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/accordion/accordion.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroAccordion",
"cssProperties": [
{
"description": "`color`",
"name": "--pyro-accordion-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`background`",
"name": "--pyro-accordion-surface-color",
"default": "var(--pyro-surface-color)"
},
{
"description": "`border`",
"name": "--pyro-accordion-border",
"default": "var(--pyro-border)"
},
{
"description": "`border-radius`",
"name": "--pyro-accordion-border-radius",
"default": "var(--pyro-border-radius)"
},
{
"description": "`padding`",
"name": "--pyro-accordion-spacing",
"default": "var(--pyro-spacing)"
}
],
"slots": [
{
"description": "Summary of the accordion, always visible",
"name": "summary"
},
{
"description": "Content of the accordion that can be opened",
"name": "content"
},
{
"description": "Slot for the icon to be place inside the summary, chevron by default",
"name": "icon"
}
],
"members": [
{
"kind": "field",
"name": "summary",
"type": {
"text": "string"
},
"default": "''",
"description": "Summary of the accordion, overriden by `slot=\"summary\"`",
"attribute": "summary"
},
{
"kind": "field",
"name": "content",
"type": {
"text": "string"
},
"default": "''",
"description": "Content of the accordion, overriden by `slot=\"content\"`",
"attribute": "content"
},
{
"kind": "field",
"name": "open",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Indicates whether the accordion is open",
"attribute": "open",
"reflects": true
},
{
"kind": "field",
"name": "'no-flip'",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disables flipping of the icon when open/closed",
"attribute": "'no-flip'",
"reflects": true
},
{
"kind": "method",
"name": "handleClick",
"privacy": "private",
"parameters": [
{
"name": "e",
"type": {
"text": "Event"
}
}
]
}
],
"events": [
{
"name": "pyro-accordion-click",
"type": {
"text": "CustomEvent"
}
}
],
"attributes": [
{
"name": "summary",
"type": {
"text": "string"
},
"default": "''",
"description": "Summary of the accordion, overriden by `slot=\"summary\"`",
"fieldName": "summary"
},
{
"name": "content",
"type": {
"text": "string"
},
"default": "''",
"description": "Content of the accordion, overriden by `slot=\"content\"`",
"fieldName": "content"
},
{
"name": "open",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Indicates whether the accordion is open",
"fieldName": "open"
},
{
"name": "'no-flip'",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disables flipping of the icon when open/closed",
"fieldName": "'no-flip'"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-accordion",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroAccordion",
"declaration": {
"name": "PyroAccordion",
"module": "src/elements/accordion/accordion.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-accordion",
"declaration": {
"name": "PyroAccordion",
"module": "src/elements/accordion/accordion.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/accordion/accordion.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/alert/alert.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroAlert",
"cssProperties": [
{
"description": "`color`",
"name": "--pyro-alert-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`background` (when no `severity` is set)",
"name": "--pyro-alert-surface-color",
"default": "var(--pyro-surface-color)"
},
{
"description": "`border`",
"name": "--pyro-alert-border",
"default": "var(--pyro-border)"
},
{
"description": "`border-radius`",
"name": "--pyro-alert-border-radius",
"default": "var(--pyro-border-radius)"
},
{
"description": "`padding` Severity",
"name": "--pyro-alert-spacing",
"default": "var(--pyro-spacing)"
},
{
"description": "`color` (icon, band)",
"name": "--pyro-alert-info-color",
"default": "var(--pyro-info-color)"
},
{
"description": "`background`",
"name": "--pyro-alert-info-color-lighter",
"default": "var(--pyro-info-color-lighter)"
},
{
"description": "`color` (icon, band)",
"name": "--pyro-alert-success-color",
"default": "var(--pyro-success-color)"
},
{
"description": "`background`",
"name": "--pyro-alert-success-color-lighter",
"default": "var(--pyro-success-color-lighter)"
},
{
"description": "`color` (icon, band)",
"name": "--pyro-alert-warning-color",
"default": "var(--pyro-warning-color)"
},
{
"description": "`background`",
"name": "--pyro-alert-warning-color-lighter",
"default": "var(--pyro-warning-color-lighter)"
},
{
"description": "`color` (icon, band)",
"name": "--pyro-alert-error-color",
"default": "var(--pyro-error-color)"
},
{
"description": "`background` Variation based",
"name": "--pyro-alert-error-color-lighter",
"default": "var(--pyro-error-color-lighter)"
},
{
"description": "left band `width`",
"name": "--pyro-alert-band-width",
"default": "calc(var(--pyro-border-width) * 4)"
},
{
"description": "dismissible icon `width`",
"name": "--pyro-alert-dismissible-width",
"default": "1em"
}
],
"slots": [
{
"description": "(default) Content of alert",
"name": ""
},
{
"description": "a pyro-icon or generic image. Receives the css `color` and `fill` based on severity",
"name": "icon"
},
{
"description": "overrides the default dimissible icon, if used",
"name": "dismissible"
}
],
"members": [
{
"kind": "field",
"name": "severity",
"type": {
"text": "'info' | 'success' | 'warning' | 'error' | '' | undefined"
},
"default": "''",
"description": "Alert severity, determines colors",
"attribute": "severity",
"reflects": true
},
{
"kind": "field",
"name": "band",
"type": {
"text": "boolean | undefined"
},
"default": "false",
"description": "Adds a bright colored band to the alert left, similar to a border",
"attribute": "band",
"reflects": true
},
{
"kind": "field",
"name": "dismissible",
"type": {
"text": "boolean | undefined"
},
"default": "false",
"description": "Adds an cross icon to dismiss the alert",
"attribute": "dismissible",
"reflects": true
},
{
"kind": "field",
"name": "dimissed",
"type": {
"text": "boolean | undefined"
},
"default": "false",
"description": "(static) Added if the alert was dismissed",
"attribute": "dimissed",
"reflects": true
},
{
"kind": "field",
"name": "dismiss"
}
],
"attributes": [
{
"name": "severity",
"type": {
"text": "'info' | 'success' | 'warning' | 'error' | '' | undefined"
},
"default": "''",
"description": "Alert severity, determines colors",
"fieldName": "severity"
},
{
"name": "band",
"type": {
"text": "boolean | undefined"
},
"default": "false",
"description": "Adds a bright colored band to the alert left, similar to a border",
"fieldName": "band"
},
{
"name": "dismissible",
"type": {
"text": "boolean | undefined"
},
"default": "false",
"description": "Adds an cross icon to dismiss the alert",
"fieldName": "dismissible"
},
{
"name": "dimissed",
"type": {
"text": "boolean | undefined"
},
"default": "false",
"description": "(static) Added if the alert was dismissed",
"fieldName": "dimissed"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-alert",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroAlert",
"declaration": {
"name": "PyroAlert",
"module": "src/elements/alert/alert.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-alert",
"declaration": {
"name": "PyroAlert",
"module": "src/elements/alert/alert.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/alert/alert.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/avatar/avatar.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroAvatar",
"cssProperties": [
{
"description": "`width`",
"name": "--pyro-avatar-width",
"default": "1.5em"
},
{
"description": "`height`",
"name": "--pyro-avatar-height",
"default": "1.5em"
},
{
"description": "`color`",
"name": "--pyro-avatar-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`background`",
"name": "--pyro-avatar-accent-color",
"default": "var(--pyro-accent-color)"
}
],
"slots": [
{
"description": "One/two letter, overrides label prop",
"name": ""
},
{
"description": "Images, scaled to fit, cropped to circle",
"name": "image"
}
],
"members": [
{
"kind": "field",
"name": "label",
"type": {
"text": "string | undefined"
},
"default": "''",
"description": "One/two letters, overriden by default slot",
"attribute": "label"
}
],
"attributes": [
{
"name": "label",
"type": {
"text": "string | undefined"
},
"default": "''",
"description": "One/two letters, overriden by default slot",
"fieldName": "label"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-avatar",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroAvatar",
"declaration": {
"name": "PyroAvatar",
"module": "src/elements/avatar/avatar.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-avatar",
"declaration": {
"name": "PyroAvatar",
"module": "src/elements/avatar/avatar.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/avatar/avatar.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/badge/badge.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroBadge",
"cssProperties": [
{
"description": "`color`",
"name": "--pyro-badge-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`background`",
"name": "--pyro-badge-accent-color",
"default": "var(--pyro-accent-color)"
},
{
"description": "`font-size`",
"name": "--pyro-badge-font-size",
"default": "calc(var(--pyro-badge-height, 1.5em) / 2)"
},
{
"description": "`height`",
"name": "--pyro-badge-height",
"default": "1.5em"
}
],
"slots": [
{
"description": "One/two letter, overrides label prop",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "label",
"type": {
"text": "string | undefined"
},
"default": "''",
"description": "Label",
"attribute": "label"
}
],
"attributes": [
{
"name": "label",
"type": {
"text": "string | undefined"
},
"default": "''",
"description": "Label",
"fieldName": "label"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-badge",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroBadge",
"declaration": {
"name": "PyroBadge",
"module": "src/elements/badge/badge.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-badge",
"declaration": {
"name": "PyroBadge",
"module": "src/elements/badge/badge.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/badge/badge.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/box/box.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroBox",
"cssProperties": [
{
"description": "`color`",
"name": "--pyro-box-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`background`",
"name": "--pyro-box-background",
"default": "var(--pyro-surface-color)"
},
{
"description": "`background`",
"name": "--pyro-box-surface-color",
"default": "var(--pyro-surface-color)"
},
{
"description": "`background`",
"name": "--pyro-box-foreground-color",
"default": "var(--pyro-foreground-color)"
}
],
"slots": [
{
"description": "Contents of the box",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "variant",
"type": {
"text": "'foreground' | 'surface' | 'transparent' | '' | undefined"
},
"default": "''",
"description": "Background color of the box",
"attribute": "variant",
"reflects": true
}
],
"attributes": [
{
"name": "variant",
"type": {
"text": "'foreground' | 'surface' | 'transparent' | '' | undefined"
},
"default": "''",
"description": "Background color of the box",
"fieldName": "variant"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-box",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroBox",
"declaration": {
"name": "PyroBox",
"module": "src/elements/box/box.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-box",
"declaration": {
"name": "PyroBox",
"module": "src/elements/box/box.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/box/box.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/button/button.ts",
"declarations": [
{
"kind": "class",
"description": "Button element\n[docs](https://pyrojs.com/el/button)\n\n```html\n<pyro-button variant=\"primary\">Click me\n</pyro-button>\n```",
"name": "PyroButton",
"cssProperties": [
{
"description": "`color`",
"name": "--pyro-button-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`font-weight`",
"name": "--pyro-button-font-weight",
"default": "inherit"
},
{
"description": "default size or `padding`",
"name": "--pyro-button-spacing",
"default": "var(--pyro-spacing)"
},
{
"description": "`border`",
"name": "--pyro-button-border",
"default": "var(--pyro-border)"
},
{
"description": "`border`",
"name": "--pyro-button-border-radius",
"default": "var(--pyro-border-radius)"
},
{
"description": "default `background`",
"name": "--pyro-button-surface-color",
"default": "var(--pyro-surface-color)"
},
{
"description": "primary `background`",
"name": "--pyro-button-primary-color",
"default": "var(--pyro-primary-color)"
},
{
"description": "text `color` on primary",
"name": "--pyro-text-color-on-primary",
"default": "var(--pyro-text-color-on-primary)"
},
{
"description": "secondary `background`",
"name": "--pyro-button-secondary-color",
"default": "var(--pyro-secondary-color)"
},
{
"description": "text `color` on secondary",
"name": "--pyro-text-color-on-secondary",
"default": "var(--pyro-text-color-on-secondary)"
},
{
"description": "tertiary `background`",
"name": "--pyro-button-tertiary-color",
"default": "var(--pyro-tertiary-color)"
},
{
"description": "text `color` on tertiary",
"name": "--pyro-text-color-on-tertiary",
"default": "var(--pyro-text-color-on-tertiary)"
},
{
"description": "text `color` on transparent",
"name": "--pyro-text-color-on-transparent",
"default": "var(--pyro-text-color-on-transparent)"
},
{
"description": "`:hover` `background`",
"name": "--pyro-button-hover-color",
"default": "var(--pyro-hover-color)"
},
{
"description": "disabled `background`",
"name": "--pyro-button-disabled-color",
"default": "var(--pyro-disabled-color)"
},
{
"description": "`:active` `background`",
"name": "--pyro-button-active-color",
"default": "none"
}
],
"slots": [
{
"description": "Contents of the button",
"name": ""
},
{
"description": "Icon on the left",
"name": "icon-left"
},
{
"description": "Icon on the right",
"name": "icon-right"
}
],
"members": [
{
"kind": "field",
"name": "variant",
"type": {
"text": "'primary' | 'secondary' | 'tertiary' | '' | undefined"
},
"default": "''",
"description": "Color variant of the button",
"attribute": "variant",
"reflects": true
},
{
"kind": "field",
"name": "size",
"type": {
"text": "'s' | 'm' | 'l' | undefined"
},
"default": "'m'",
"description": "Button size",
"attribute": "size",
"reflects": true
},
{
"kind": "field",
"name": "transparent",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Enforces a transparent background",
"attribute": "transparent",
"reflects": true
},
{
"kind": "field",
"name": "circle",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Make the button into a circle",
"attribute": "circle",
"reflects": true
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disabled",
"attribute": "disabled",
"reflects": true
},
{
"kind": "field",
"name": "form",
"type": {
"text": "string | undefined"
},
"attribute": "form",
"reflects": true
},
{
"kind": "field",
"name": "type",
"type": {
"text": "'button' | 'submit' | 'reset' | 'menu'"
},
"default": "'button'",
"attribute": "type",
"reflects": true
}
],
"attributes": [
{
"name": "variant",
"type": {
"text": "'primary' | 'secondary' | 'tertiary' | '' | undefined"
},
"default": "''",
"description": "Color variant of the button",
"fieldName": "variant"
},
{
"name": "size",
"type": {
"text": "'s' | 'm' | 'l' | undefined"
},
"default": "'m'",
"description": "Button size",
"fieldName": "size"
},
{
"name": "transparent",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Enforces a transparent background",
"fieldName": "transparent"
},
{
"name": "circle",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Make the button into a circle",
"fieldName": "circle"
},
{
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disabled",
"fieldName": "disabled"
},
{
"name": "form",
"type": {
"text": "string | undefined"
},
"fieldName": "form"
},
{
"name": "type",
"type": {
"text": "'button' | 'submit' | 'reset' | 'menu'"
},
"default": "'button'",
"fieldName": "type"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-button",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroButton",
"declaration": {
"name": "PyroButton",
"module": "src/elements/button/button.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-button",
"declaration": {
"name": "PyroButton",
"module": "src/elements/button/button.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/button/button.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/card/card.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroCard",
"cssProperties": [
{
"description": "`color`",
"name": "--pyro-card-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`background`",
"name": "--pyro-card-surface-color",
"default": "var(--pyro-surface-color)"
},
{
"description": "`border`",
"name": "--pyro-card-border",
"default": "var(--pyro-border)"
},
{
"description": "`border-radius`",
"name": "--pyro-card-border-radius",
"default": "var(--pyro-border-radius)"
},
{
"description": "`padding`",
"name": "--pyro-card-spacing",
"default": "var(--pyro-spacing)"
}
],
"slots": [
{
"description": "Image on top, prefers `<img>` or `<picture>`",
"name": "image"
},
{
"description": "Header content, prefers `<h*>` or `<header>`",
"name": "header"
},
{
"description": "Main content of the card, any element",
"name": "content"
},
{
"description": "Header content, prefers `<footer>`",
"name": "footer"
}
],
"members": [
{
"kind": "field",
"name": "header",
"type": {
"text": "string"
},
"default": "''",
"description": "Header text of card, overriden by `slot=\"header\"`",
"attribute": "header"
},
{
"kind": "field",
"name": "content",
"type": {
"text": "string"
},
"default": "''",
"description": "Main content of the card, overriden by `slot=\"content\"`",
"attribute": "content"
},
{
"kind": "field",
"name": "footer",
"type": {
"text": "string"
},
"default": "''",
"description": "Footer text of the card, overriden by `slot=\"footer\"`",
"attribute": "footer"
},
{
"kind": "field",
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Add inner borders",
"attribute": "bordered",
"reflects": true
}
],
"attributes": [
{
"name": "header",
"type": {
"text": "string"
},
"default": "''",
"description": "Header text of card, overriden by `slot=\"header\"`",
"fieldName": "header"
},
{
"name": "content",
"type": {
"text": "string"
},
"default": "''",
"description": "Main content of the card, overriden by `slot=\"content\"`",
"fieldName": "content"
},
{
"name": "footer",
"type": {
"text": "string"
},
"default": "''",
"description": "Footer text of the card, overriden by `slot=\"footer\"`",
"fieldName": "footer"
},
{
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Add inner borders",
"fieldName": "bordered"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-card",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroCard",
"declaration": {
"name": "PyroCard",
"module": "src/elements/card/card.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-card",
"declaration": {
"name": "PyroCard",
"module": "src/elements/card/card.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/card/card.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/checkbox/checkbox.ts",
"declarations": [
{
"kind": "class",
"description": "Checkbox input element\n[docs](https://pyrojs.com/el/checkbox)\n\n```html\n<pyro-checkbox></pyro-checkbox>\n```",
"name": "PyroCheckbox",
"cssProperties": [
{
"description": "checkmark `color`",
"name": "--pyro-checkbox-text-color",
"default": "var(--pyro-text-color)"
},
{
"description": "`background`",
"name": "--pyro-checkbox-surface-color",
"default": "var(--pyro-surface-color)"
},
{
"description": "checked `background`;",
"name": "--pyro-checkbox-accent-color",
"default": "var(--pyro-accent-color)"
},
{
"description": "`border`",
"name": "--pyro-checkbox-border",
"default": "var(--pyro-border)"
},
{
"description": "`border`",
"name": "--pyro-checkbox-border-radius",
"default": "var(--pyro-border-radius)"
},
{
"description": "`height`",
"name": "--pyro-checkbox-height",
"default": "1em"
},
{
"description": "`width`",
"name": "--pyro-checkbox-width",
"default": "1em"
},
{
"description": "disabled `background`",
"name": "--pyro-checkbox-disabled-color",
"default": "var(--pyro-disabled-color)"
}
],
"slots": [
{
"description": "icon for customized checkmark",
"name": "icon"
}
],
"members": [
{
"kind": "field",
"name": "checked",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Checked",
"attribute": "checked",
"reflects": true
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disabled",
"attribute": "disabled",
"reflects": true
},
{
"kind": "field",
"name": "value",
"type": {
"text": "boolean"
},
"description": "Value on element instance for referencing with js"
},
{
"kind": "field",
"name": "_input",
"type": {
"text": "HTMLInputElement"
}
},
{
"kind": "field",
"name": "handleClick"
}
],
"events": [
{
"type": {
"text": "InputEvent"
},
"description": "emitted when the value changes",
"name": "input"
}
],
"attributes": [
{
"name": "checked",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Checked",
"fieldName": "checked"
},
{
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disabled",
"fieldName": "disabled"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-checkbox",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroCheckbox",
"declaration": {
"name": "PyroCheckbox",
"module": "src/elements/checkbox/checkbox.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-checkbox",
"declaration": {
"name": "PyroCheckbox",
"module": "src/elements/checkbox/checkbox.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/checkbox/checkbox.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/colorpicker/colorpicker.ts",
"declarations": [
{
"kind": "class",
"description": "Colorpicker\n[docs](https://pyrojs.com/el/colorpicker)\n\n```html\n<pyro-colorpicker></pyro-colorpicker>\n```",
"name": "PyroColorpicker",
"cssProperties": [
{
"description": "`gap`",
"name": "--pyro-colorpicker-spacing",
"default": "var(--pyro-spacing)"
},
{
"description": "`border`",
"name": "--pyro-colorpicker-border",
"default": "var(--pyro-border)"
},
{
"description": "`border`",
"name": "--pyro-colorpicker-border-radius",
"default": "var(--pyro-border-radius)"
},
{
"description": "`background`",
"name": "--pyro-colorpicker-surface-color",
"default": "var(--pyro-surface-color)"
}
],
"members": [
{
"kind": "field",
"name": "value",
"type": {
"text": "string"
},
"default": "'#000000'",
"description": "Hex value of the color, eg: #00ff00",
"attribute": "value",
"reflects": true
},
{
"kind": "field",
"name": "circle",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Makes it a circle",
"attribute": "circle",
"reflects": true
},
{
"kind": "field",
"name": "'with-input'",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Shows an input field",
"attribute": "'with-input'",
"reflects": true
},
{
"kind": "method",
"name": "handleChange",
"privacy": "private",
"parameters": [
{
"name": "{ target }",
"type": {
"text": "{ target: HTMLInputElement }"
}
}
]
}
],
"events": [
{
"name": "change",
"type": {
"text": "CustomEvent"
}
},
{
"type": {
"text": "InputEvent"
},
"description": "emitted when the value changes",
"name": "input"
}
],
"attributes": [
{
"name": "value",
"type": {
"text": "string"
},
"default": "'#000000'",
"description": "Hex value of the color, eg: #00ff00",
"fieldName": "value"
},
{
"name": "circle",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Makes it a circle",
"fieldName": "circle"
},
{
"name": "'with-input'",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Shows an input field",
"fieldName": "'with-input'"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-colorpicker",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroColorpicker",
"declaration": {
"name": "PyroColorpicker",
"module": "src/elements/colorpicker/colorpicker.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-colorpicker",
"declaration": {
"name": "PyroColorpicker",
"module": "src/elements/colorpicker/colorpicker.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/colorpicker/colorpicker.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/divider/divider.ts",
"declarations": [
{
"kind": "class",
"description": "Divider element\n[docs](https://pyrojs.com/el/divider)\n\n```html\n<pyro-divider></pyro-divider>\n```",
"name": "PyroDivider",
"cssProperties": [
{
"description": "`border-top`",
"name": "--pyro-divider-border",
"default": "var(--pyro-border)"
},
{
"description": "`color`",
"name": "--pyro-divider-color",
"default": "var(--pyro-border-color)"
},
{
"description": "`padding`",
"name": "--pyro-divider-spacing",
"default": "var(--pyro-spacing-s)"
}
],
"members": [
{
"kind": "field",
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Vertical instead of horizontal",
"attribute": "bordered",
"reflects": true
}
],
"attributes": [
{
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Vertical instead of horizontal",
"fieldName": "bordered"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pyro-divider",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PyroDivider",
"declaration": {
"name": "PyroDivider",
"module": "src/elements/divider/divider.ts"
}
},
{
"kind": "custom-element-definition",
"name": "pyro-divider",
"declaration": {
"name": "PyroDivider",
"module": "src/elements/divider/divider.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/elements/divider/divider.types.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/elements/dialog/dialog.ts",
"declarations": [
{
"kind": "class",
"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```",
"name": "PyroDialog",
"cssProperties": [
{
"description": "`color`",
"name": "--pyro-dialog-text-co