{
  "version": 1.1,
  "tags": [
    {
      "name": "joy-availability",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "is-partial",
          "description": "isPartial dot, define fill or stroke dot display"
        },
        {
          "name": "label",
          "description": "Text Availability content, if null, only dot will be display"
        },
        {
          "name": "status",
          "description": "Status Availability, define color",
          "values": [
            {
              "name": "AVAILABLE"
            },
            {
              "name": "AVAILABLE_AND_VERIFIED"
            },
            {
              "name": "AVAILABLE_SOON"
            },
            {
              "name": "NOT_AVAILABLE"
            },
            {
              "name": "NOT_AVAILABLE_WITH_DATE"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-avatar",
      "description": {
        "kind": "markdown",
        "value": "If both photoUrl and fullName are empty, it will display an icon placeholder."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specify a background color. Handy for avatars list. The value is the index of css custom property array made from CSS Custom Properties value (see next table)",
          "values": [
            {
              "name": "grey"
            },
            {
              "name": "red"
            },
            {
              "name": "teal"
            },
            {
              "name": "transparent"
            },
            {
              "name": "turquoise"
            },
            {
              "name": "yellow"
            }
          ]
        },
        {
          "name": "compress",
          "description": "The prop is given automatically by avatars-list component when you set compress prop to true. You won't need this prop out of an avatars-list."
        },
        {
          "name": "full-name",
          "description": "Freelancer full name. Will be used to display its initials if no photoUrl is given."
        },
        {
          "name": "href",
          "description": "Url you need to link your avatar to"
        },
        {
          "name": "is-first-from-list",
          "description": "The prop is given automatically by avatars-list component when you set compress prop to true. You won't need this prop out of an avatars-list."
        },
        {
          "name": "photo-url",
          "description": "Specify a photo url to display."
        },
        {
          "name": "profile",
          "description": "Type of profile. Default or Strategy. Strategy mode is not compatible with compress mode layout.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "strategy"
            }
          ]
        },
        {
          "name": "size",
          "description": "Avatar size, 3 possible values (can't be overridden)",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "target",
          "description": "Target attribute if href is used",
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            },
            {
              "name": "framename"
            }
          ]
        },
        {
          "name": "total-number",
          "description": "Specify the total amount of persons remaining from a list."
        },
        {
          "name": "total-number-link",
          "description": "Specify the link to redirect to the full list"
        }
      ]
    },
    {
      "name": "joy-badge-level",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "super-malter-level",
          "description": "SuperMalter level from 1 to 3"
        },
        {
          "name": "type",
          "description": "Badge type: highpotential, high-potential-auto, maltlinker, new, supermalter or verified\nor program: program_highpotential",
          "values": [
            {
              "name": "high-potential-auto"
            },
            {
              "name": "highpotential"
            },
            {
              "name": "maltlinker"
            },
            {
              "name": "new"
            },
            {
              "name": "program_high-potential"
            },
            {
              "name": "supermalter"
            },
            {
              "name": "verified"
            }
          ]
        },
        {
          "name": "visible-text",
          "description": "Display text label"
        }
      ]
    },
    {
      "name": "joy-bottom-sheet",
      "description": {
        "kind": "markdown",
        "value": "This component is meant to be used on mobile if you don't want to use a normal Dialog.\nYou are completely free to use any content you want  \n\n> **_IMPORTANT_**: There are not any CSS rule that allows to hide it automatically, you need to do it by yourself !"
      },
      "attributes": [
        {
          "name": "close-label",
          "description": "close-label used for close button. Default: 'Close'"
        },
        {
          "name": "open",
          "description": "If open is set to true, the bottom-sheet will be displayed by default *"
        }
      ]
    },
    {
      "name": "joy-button",
      "description": {
        "kind": "markdown",
        "value": "To play with loading state, simply use the `loading` property or the public method ```buttonLoading```\n\n```javascript\nasync function yourFunction() {\n    const button = document.querySelector('joy-button');\n    await button.buttonLoading(true);\n    //\n    // ...\n    //\n    await button.buttonLoading(false);\n}\n```"
      },
      "attributes": [
        {
          "name": "circle",
          "description": "If you only need a button with an icon. To keep your component accessible, you can give a text as slot, it will be used as title and aria-label.\nThis property takes effect only if icon property is set"
        },
        {
          "name": "disabled",
          "description": "Disabled attribute for buttons"
        },
        {
          "name": "download",
          "description": "If the link as a downloadable content"
        },
        {
          "name": "form",
          "description": "If the joy-button is supposed to submit a specific form without being included in the actual form tag, use this prop"
        },
        {
          "name": "href",
          "description": "Set the href of your link"
        },
        {
          "name": "icon",
          "description": "Set the icon name if you need one"
        },
        {
          "name": "icon-position",
          "description": "Left to the text or right",
          "values": [
            {
              "name": "left"
            },
            {
              "name": "right"
            }
          ]
        },
        {
          "name": "icon-size",
          "description": "Set the icon size if you need one",
          "values": [
            {
              "name": "small"
            },
            {
              "name": "xsmall"
            },
            {
              "name": "xxsmall"
            }
          ]
        },
        {
          "name": "loading",
          "description": "Set the button in loading state"
        },
        {
          "name": "rel",
          "description": "Native rel attribute for hyperlinks. See https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel"
        },
        {
          "name": "size",
          "description": "Button or Link size",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            },
            {
              "name": "xsmall"
            },
            {
              "name": "xxsmall"
            }
          ]
        },
        {
          "name": "target",
          "description": "Native target attribute for hyperlinks.",
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            }
          ]
        },
        {
          "name": "type",
          "description": "Type attribute for buttons",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "variant",
          "description": "Button or Link color theme",
          "values": [
            {
              "name": "admin"
            },
            {
              "name": "ghost"
            },
            {
              "name": "main"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "white"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-checkbox",
      "description": {
        "kind": "markdown",
        "value": "If you need to get the actual state of the component, you can simply do a :\ndocument.querySelector('joy-checkbox.this-instance').checked"
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Checkbox activated or not"
        },
        {
          "name": "disabled",
          "description": "Disabled state"
        },
        {
          "name": "indeterminate",
          "description": "If `true`, the checkbox will visually appear as indeterminate."
        },
        {
          "name": "invalid",
          "description": "If `true`, the checkbox will visually appear as invalid."
        },
        {
          "name": "name",
          "description": "Input name for form participation"
        },
        {
          "name": "required",
          "description": "Checkbox is required"
        },
        {
          "name": "value",
          "description": "Input value. Input value != checked state ! If you need to get the state checked/not checked, simply use checked prop"
        }
      ]
    },
    {
      "name": "joy-collapse",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "accordion",
          "description": "Accordion mode allows to open only one item at a time. Default to false"
        }
      ]
    },
    {
      "name": "joy-collapse-item",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "open",
          "description": "Default to false. Open or close the collapse item."
        },
        {
          "name": "summary-icon",
          "description": "Display an icon before the summary."
        }
      ]
    },
    {
      "name": "joy-company-avatar",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "",
          "values": [
            {
              "name": "red"
            },
            {
              "name": "teal"
            },
            {
              "name": "turquoise"
            },
            {
              "name": "yellow"
            }
          ]
        },
        {
          "name": "company-name",
          "description": "Company name. Required to give image alt text."
        },
        {
          "name": "img-src",
          "description": "URL source for img. Optional."
        },
        {
          "name": "size",
          "description": "Size of the image. Optionnal.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-counter",
      "description": {
        "kind": "markdown",
        "value": "`<joy-counter>` does not fully work with v-model.\nTo be perfectly confident while playing with model, please follow this snippet : \n\n```html\n<joy-counter @value-change=\"$event => model = $event.detail\" :value=\"model\">I am the label</joy-counter>\n```\n\nYou can of course fire a method if you need to execute additional code. \n\n> We basically do what Vue already does under the hood. @value-change is fired by Stencil component after component internal state is updated."
      },
      "attributes": [
        {
          "name": "aria-label",
          "description": "aria-label used for input accessibility. Use string only, no HTML. More than welcome !"
        },
        {
          "name": "invalid",
          "description": "Invalid state of the component"
        },
        {
          "name": "invalid-message",
          "description": "Message when the component is invalid. Warning : by default, it will pick HTML5 validation message (the language is defined by your OS)"
        },
        {
          "name": "label-decrement",
          "description": "Used for accessibility aria-label attribute. More than welcome !"
        },
        {
          "name": "label-increment",
          "description": "Used for accessibility aria-label attribute. More than welcome !"
        },
        {
          "name": "label-size",
          "description": "The label input's size.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "max",
          "description": "Maximum possible value. No default"
        },
        {
          "name": "min",
          "description": "Minimum possible value. Default to 0"
        },
        {
          "name": "name",
          "description": "Name for the input"
        },
        {
          "name": "optional-label",
          "description": "Inject the right wording if your field is not required. the \"-\" separator is already handled internally. *"
        },
        {
          "name": "required",
          "description": "Counter requirement"
        },
        {
          "name": "required-mark",
          "description": "Display the required mark or not. Default to false."
        },
        {
          "name": "step",
          "description": "Granularity of the input. We use the same name than native step attribute.\nWe don't bind this prop to actual input step attribute, because we don't want checkValidity API to return invalid if the actual\nvalue is not a multiple of step prop !"
        },
        {
          "name": "value",
          "description": "Counter value *"
        }
      ]
    },
    {
      "name": "joy-dialog",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "banner-height",
          "description": "Set the height of the banner. Default to 250"
        },
        {
          "name": "banner-position",
          "description": "Set the position of the banner image. Work exactly like css background-position property"
        },
        {
          "name": "banner-src",
          "description": "Set the URL of the image you can inject as pre-header banner"
        },
        {
          "name": "banner-src-alt",
          "description": "Set the alt text of the banner"
        },
        {
          "name": "button-size",
          "description": "If you want to change the CTA sizes, please choose between small, medium, large",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            },
            {
              "name": "xsmall"
            },
            {
              "name": "xxsmall"
            }
          ]
        },
        {
          "name": "cancel-text",
          "description": "Secondary CTA text. If none given, it won't show the CTA"
        },
        {
          "name": "confirm-text",
          "description": "Main CTA text. If none given, it won't show the CTA"
        },
        {
          "name": "open",
          "description": "Dialog open state"
        },
        {
          "name": "pattern-confirm",
          "description": "Loads a preset state for dialog, preventing closing the dialog \"accidentally\" by clicking on cross, backdrop or pressing Escape key."
        },
        {
          "name": "size",
          "description": "Dialog sizes",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "large"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-dialog-trigger",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "dialog",
          "description": "The ID of the dialog you want to show. Required *"
        },
        {
          "name": "step",
          "description": "For dialogs containing joy-indicators with multiple steps, you can specify a step number *"
        }
      ]
    },
    {
      "name": "joy-divider-cta",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disabled or not"
        }
      ]
    },
    {
      "name": "joy-drawer",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "button-size",
          "description": "If you want to change the CTA sizes, please choose between small, medium, large",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            },
            {
              "name": "xsmall"
            },
            {
              "name": "xxsmall"
            }
          ]
        },
        {
          "name": "cancel-text",
          "description": "Secondary CTA text. If none given, it won't show the CTA"
        },
        {
          "name": "confirm-text",
          "description": "Main CTA text. If none given, it won't show the CTA"
        },
        {
          "name": "elevated",
          "description": ""
        },
        {
          "name": "open",
          "description": "Drawer open state"
        },
        {
          "name": "size",
          "description": "Drawer sizes",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "large"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-dropzone",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "accept",
          "description": "Add accepted file formats"
        },
        {
          "name": "button-cancel-text",
          "description": "Add CTA Cancellation Text"
        },
        {
          "name": "button-text",
          "description": "Add CTA Upload Text"
        },
        {
          "name": "delete-label",
          "description": "Override default aria-label for the \"trash\" icon associated with each selected file."
        },
        {
          "name": "description-strong-text",
          "description": "Add description Text"
        },
        {
          "name": "description-text",
          "description": "Add description Text"
        },
        {
          "name": "disabled",
          "description": ""
        },
        {
          "name": "error-text-format",
          "description": "Add custom error message when uploaded file format is not accepted"
        },
        {
          "name": "error-text-max-size",
          "description": "Add custom error message when uploaded file size is bigger than maxSize"
        },
        {
          "name": "id-dropzone",
          "description": "set a unique id for the input file. Required for the drag and drop !"
        },
        {
          "name": "invalid",
          "description": "Makes the dropzone invalid or not"
        },
        {
          "name": "legend",
          "description": "Add legend/specification text"
        },
        {
          "name": "loading",
          "description": ""
        },
        {
          "name": "max-size",
          "description": "set MaxSize (Megabytes), default to 32 MB"
        },
        {
          "name": "multiple",
          "description": "Enable multiple files upload"
        },
        {
          "name": "uploading-text",
          "description": ""
        }
      ]
    },
    {
      "name": "joy-form-error",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "no-html-error-text",
          "description": "The error text. Plain string required as any HTML injected will be escaped"
        },
        {
          "name": "visible",
          "description": "Depending on contexts : maybe you'll need to insert it in the DOM but hide it, or injecting it into the DOM on the fly (like Vue v-if cases)"
        }
      ]
    },
    {
      "name": "joy-highlight",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "accent",
          "description": "Add the left border accent on the highlight."
        },
        {
          "name": "display-icon",
          "description": "Allows to display the level status icon"
        },
        {
          "name": "icon",
          "description": "Override the icon type used for level. Size can't be overridden. Won't show if displayIcon prop isn't set to true"
        },
        {
          "name": "level",
          "description": "Defines the criticalness of the highlight",
          "values": [
            {
              "name": "error"
            },
            {
              "name": "info"
            },
            {
              "name": "neutral"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-icon",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "aria-label",
          "description": "Defines a non-visible legend"
        },
        {
          "name": "clickable",
          "description": "Color change on hover"
        },
        {
          "name": "color",
          "description": "The icon color",
          "values": [
            {
              "name": "error"
            },
            {
              "name": "grey"
            },
            {
              "name": "info"
            },
            {
              "name": "red"
            },
            {
              "name": "success"
            },
            {
              "name": "teal"
            },
            {
              "name": "turquoise"
            },
            {
              "name": "warning"
            },
            {
              "name": "white"
            },
            {
              "name": "yellow"
            }
          ]
        },
        {
          "name": "custom-class",
          "description": "The icon custom class(es), if needed"
        },
        {
          "name": "name",
          "description": "The icon svg filename"
        },
        {
          "name": "size",
          "description": "The icon size",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            },
            {
              "name": "xlarge"
            },
            {
              "name": "xsmall"
            },
            {
              "name": "xxsmall"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-indicator",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "selected",
          "description": ""
        },
        {
          "name": "variant",
          "description": "",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "light"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-indicators",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "selected",
          "description": "Selected state *"
        },
        {
          "name": "variant",
          "description": "Variant colors. 2 possibles values *",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "light"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-input",
      "description": {
        "kind": "markdown",
        "value": "`<joy-input>` does not fully work with v-model.\nTo be perfectly confident while playing with model, please follow this snippet : \n\n```html\n<joy-input @value-change=\"$event => model = $event.detail.value\" :value=\"model\">\n```\n\nYou can of course fire a method if you need to execute additional code. \n\n> We basically do what Vue already does under the hood. @value-change is fired by Stencil component after component internal state is updated."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": "The input's autocomplete policy."
        },
        {
          "name": "clearable",
          "description": "Display a cross icon that clears the input value. Does not work if used with \"unit\" property due to design conflict."
        },
        {
          "name": "disabled",
          "description": "Makes the field disabled or not"
        },
        {
          "name": "enterkeyhint",
          "description": "A hint to the browser for which enter key to display.",
          "values": [
            {
              "name": "done"
            },
            {
              "name": "enter"
            },
            {
              "name": "go"
            },
            {
              "name": "next"
            },
            {
              "name": "previous"
            },
            {
              "name": "search"
            },
            {
              "name": "send"
            }
          ]
        },
        {
          "name": "icon",
          "description": "Add an icon on the left side before the value"
        },
        {
          "name": "inputmode",
          "description": "A hint to the browser for which keyboard to display.",
          "values": [
            {
              "name": "decimal"
            },
            {
              "name": "email"
            },
            {
              "name": "none"
            },
            {
              "name": "numeric"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "invalid",
          "description": "Makes the field readonly or not"
        },
        {
          "name": "label-size",
          "description": "The label input's size.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "max",
          "description": "If the type is \"number\" then you can use max property."
        },
        {
          "name": "maxlength",
          "description": "Max character number. https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/maxlength"
        },
        {
          "name": "min",
          "description": "If the type is \"number\" then you can use min property."
        },
        {
          "name": "minlength",
          "description": "Max character number. https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/minlength"
        },
        {
          "name": "name",
          "description": "Input types. List is not exhaustive, this component does not deal with checkboxes, radios, files, dates."
        },
        {
          "name": "optional-label",
          "description": "Inject the right wording if your field is not required. the \"-\" separator is already handled internally. *"
        },
        {
          "name": "pattern",
          "description": "A regular expression that the value is checked against. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information."
        },
        {
          "name": "placeholder",
          "description": "The input's placeholder text."
        },
        {
          "name": "readonly",
          "description": "Makes the field readonly or not"
        },
        {
          "name": "required",
          "description": "Makes the field required"
        },
        {
          "name": "required-mark",
          "description": "Display the required mark or not. Default to false."
        },
        {
          "name": "size",
          "description": "The input's size.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "step",
          "description": "If the type is \"number\" then you can use step property.",
          "values": [
            {
              "name": "any"
            }
          ]
        },
        {
          "name": "type",
          "description": "Input types. List is not exhaustive, this component does not deal with checkboxes, radios, files, dates.\nThe type=number state is not appropriate for input that happens to only consist of numbers but isn’t strictly speaking a number (credit card number for example)",
          "values": [
            {
              "name": "email"
            },
            {
              "name": "number"
            },
            {
              "name": "password"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            }
          ]
        },
        {
          "name": "unit",
          "description": "If the field is of type number, you can specify a unit like %, days, hours, whatever you want"
        },
        {
          "name": "value",
          "description": "Field value"
        }
      ]
    },
    {
      "name": "joy-label",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "custom-class",
          "description": "In some frameworks, conflicts can occur between framework class binding, and scoped classes. As a workaround, you can use this prop."
        },
        {
          "name": "html-for",
          "description": "for attribute to associate label to an input *"
        },
        {
          "name": "optional-label",
          "description": "Inject the right wording if your field is not required. the \"-\" separator is already handled internally. *"
        },
        {
          "name": "required",
          "description": "Required status of parent form field *"
        },
        {
          "name": "size",
          "description": "Label size *",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-link",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "download",
          "description": "Filename of the downloadable content"
        },
        {
          "name": "href",
          "description": "Set the href of your link"
        },
        {
          "name": "icon",
          "description": "Icon name if you want to display one, before the text"
        },
        {
          "name": "rel",
          "description": "Native rel attribute for hyperlinks. See https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel"
        },
        {
          "name": "target",
          "description": "Native target attribute for hyperlinks.",
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            }
          ]
        },
        {
          "name": "theme",
          "description": "Color theme. Default is teal, you can set white theme for darker backgrounds.",
          "values": [
            {
              "name": "teal"
            },
            {
              "name": "white"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-pagination",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "current-page",
          "description": "Current page number"
        },
        {
          "name": "heap-next",
          "description": "data-heap attribute for next CTA. We should avoid as much as possible to use this kind of props inside the webcomponents"
        },
        {
          "name": "heap-prev",
          "description": "data-heap attribute for previous CTA. We should avoid as much as possible to use this kind of props inside the webcomponents"
        },
        {
          "name": "label-next",
          "description": "Can be used as title and aria-label attributes for the next CTA"
        },
        {
          "name": "label-pagination",
          "description": "Can be used as aria-label attribute for the full component"
        },
        {
          "name": "label-prev",
          "description": "Can be used as title and aria-label attributes for the previous CTA"
        },
        {
          "name": "link-next",
          "description": "For synchrone implementations (not SPA, basically), allows to inject the URL for next CTA"
        },
        {
          "name": "link-prev",
          "description": "For synchrone implementations (not SPA, basically), allows to inject the URL for previous CTA"
        },
        {
          "name": "total-pages",
          "description": "Total number of pages in order to construct the pagination"
        }
      ]
    },
    {
      "name": "joy-panel",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "flex",
          "description": "When panel is used in a wrapper, you can use this prop to set its flex-grow. *"
        },
        {
          "name": "no-margin",
          "description": "Remove the bottom margin set by default. Useful for responsive purpose and used in joy-template when joy-panel in a direct slot children *"
        },
        {
          "name": "padding",
          "description": "Manually fix the padding you want. By default, it will use 3 sizes and automatically resize depending on screen size. *",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "title-size",
          "description": "Default to large. 2 possibles values : small or large",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "small"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-panel-section",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": []
    },
    {
      "name": "joy-product-tour",
      "description": {
        "kind": "markdown",
        "value": "To prevent unexpected behaviour, the `<joy-product-tour>` component should be placed directly at the root of the body in order to be sure to be out of any stacking context (z-index).\n\nIn a Vue application you can use [PortalVue](https://portal-vue.linusb.org/) to perform that."
      },
      "attributes": [
        {
          "name": "disable-overlay",
          "description": "Overlay is useful to prevent user interactions with elements that are below when the product tour is open.\nIt can be disabled if the highlighted target element needs to be interactive but one of its parent node has its own stacking context (e.g. a parent with a lower z-index).\nThen the whole page will be interactive."
        },
        {
          "name": "dismissed-by",
          "description": "",
          "values": [
            {
              "name": "all"
            },
            {
              "name": "not-backdrop"
            }
          ]
        },
        {
          "name": "icon",
          "description": "Icon name, placed left to the title"
        },
        {
          "name": "max-width",
          "description": "Set a max width for your container"
        },
        {
          "name": "open",
          "description": "Product tour open state"
        },
        {
          "name": "position",
          "description": "Product tour position according to highlighted content",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "spotlight-padding",
          "description": "Padding around the spotlight area. Value in pixel"
        },
        {
          "name": "spotlight-selector",
          "description": "Element that we need to spotlight. Needs to work with querySelector. Can be only one element."
        },
        {
          "name": "step",
          "description": "If multiple product tour are need, specify the current step number"
        },
        {
          "name": "steps",
          "description": "If multiple product tour are need, specify the amount"
        }
      ]
    },
    {
      "name": "joy-product-tour-trigger",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "product-tour",
          "description": "The ID of the product tour you want to show. Required *"
        },
        {
          "name": "step",
          "description": "For dialogs containing joy-indicators with multiple steps, you can specify a step number *"
        },
        {
          "name": "target",
          "description": "Target of the trigger. If none given, it will be this component. *"
        }
      ]
    },
    {
      "name": "joy-radio",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "checked",
          "description": "If `true`, the radio is selected."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the radio."
        },
        {
          "name": "name",
          "description": "Field name. Given by parent component"
        },
        {
          "name": "required",
          "description": "Field is required"
        },
        {
          "name": "theme",
          "description": "Defines the theme of the radio 'default' or 'outline'",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "outline"
            }
          ]
        },
        {
          "name": "value",
          "description": "the value of the radio."
        }
      ]
    },
    {
      "name": "joy-radio-group",
      "description": {
        "kind": "markdown",
        "value": "This element is mandatory.\n---"
      },
      "attributes": [
        {
          "name": "direction",
          "description": "Label displayed for the whoe radio group.",
          "values": [
            {
              "name": "horizontal"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "invalid",
          "description": "Invalid state of the radio group"
        },
        {
          "name": "invalid-text",
          "description": "Invalid message"
        },
        {
          "name": "label",
          "description": "The label text."
        },
        {
          "name": "label-size",
          "description": "The label input's size.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "required",
          "description": "Display the required mark or not. Default to false."
        },
        {
          "name": "required-mark",
          "description": "Display the required mark or not. Default to false."
        },
        {
          "name": "value",
          "description": "the value of the radio group."
        }
      ]
    },
    {
      "name": "joy-rating-stars",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "rating-value",
          "description": "The actual rating, between 0 and 5."
        },
        {
          "name": "review-count",
          "description": "Review count. it will be displayed with parenthesis : (5)"
        },
        {
          "name": "size",
          "description": "Star size. 3 possible values but you can't give a number as value",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-select",
      "description": {
        "kind": "markdown",
        "value": "`<joy-select>` does not fully work with v-model.\nTo be perfectly confident while playing with model, please follow this snippet : \n\n```html\n<joy-select @value-change=\"$event => model = $event.detail.value\" :value=\"model\">\n```\n\nYou can of course fire a method if you need to execute additional code. \n\n> We basically do what Vue already does under the hood. @value-change is fired by Stencil component after component internal state is updated."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disabled state. *"
        },
        {
          "name": "invalid",
          "description": "Invalid state. *"
        },
        {
          "name": "invalid-message",
          "description": "Invalid state message. *"
        },
        {
          "name": "label",
          "description": "The label text."
        },
        {
          "name": "label-size",
          "description": "The label input's size.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "name",
          "description": "Select name attribute to be found by parent form. *"
        },
        {
          "name": "optional-label",
          "description": "Inject the right wording if your field is not required. the \"-\" separator is already handled internally. *"
        },
        {
          "name": "required",
          "description": "Mandatory or not. *"
        },
        {
          "name": "required-mark",
          "description": "Display the required mark or not. Default to false."
        },
        {
          "name": "size",
          "description": "Default to medium. Use small size for complex and heavy forms. *",
          "values": [
            {
              "name": "medium"
            },
            {
              "name": "small"
            },
            {
              "name": "xsmall"
            }
          ]
        },
        {
          "name": "value",
          "description": "Mandatory or not. *"
        }
      ]
    },
    {
      "name": "joy-selectable-item",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Checked state *"
        },
        {
          "name": "disabled",
          "description": "Disabled state *"
        },
        {
          "name": "name",
          "description": "Name property for form participation *"
        },
        {
          "name": "required",
          "description": "Required state *"
        },
        {
          "name": "value",
          "description": "If you use this component with a joy-checkbox as slot: set the value only on the joy-checkbox, it will be automatically applied to it's parent *"
        }
      ]
    },
    {
      "name": "joy-selectable-item-group",
      "description": {
        "kind": "markdown",
        "value": "`<joy-selectable-item-group>` does not fully work with v-model.\nTo be perfectly confident while playing with model, please follow this snippet : \n\n```html\n<joy-selectable-item-group @value-change=\"$event => model = $event.detail.value\" :value=\"model\">\n```\n\nYou can of course fire a method if you need to execute additional code. \n\n> We basically do what Vue already does under the hood. @value-change is fired by Stencil component after component internal state is updated."
      },
      "attributes": [
        {
          "name": "full-width",
          "description": "If set to true, css flex rule will by applied in order to take all horizontal space available *"
        },
        {
          "name": "multiple",
          "description": "If multiple is set to true, it will display joy-checkboxes inside selectable-item children elements. If not, a hidden radio box is included *"
        },
        {
          "name": "value",
          "description": "Selected item *"
        }
      ]
    },
    {
      "name": "joy-snackbar",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "action-text",
          "description": "If you need to create an action link within the snackbar simply pass its text. Clicking on it will trigger a custom event"
        },
        {
          "name": "closable",
          "description": "Display an icon to close the notification manually"
        },
        {
          "name": "dangerous-html-message",
          "description": "HTML with your custom message injected in the component. It won't be escaped so please be careful with XSS !"
        },
        {
          "name": "duration",
          "description": "Time in ms the snackbar is displayed. Give 'forever' to be able to display the snackbar without timeout",
          "values": [
            {
              "name": "forever"
            }
          ]
        },
        {
          "name": "header",
          "description": "Not mandatory. Inject a title before the actual content"
        },
        {
          "name": "level",
          "description": "The criticality level of your notification. Range from simple info to error.",
          "values": [
            {
              "name": "error"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "position",
          "description": "By default, the snackbar will be displayed in a fixed position at the bottom of the page. You can override this behavior by setting position=\"relative\"",
          "values": [
            {
              "name": "fixed"
            },
            {
              "name": "relative"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-spinner",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "Spinner colors, 2 possible values but not any by default. Simply use css custom properties to customize",
          "values": [
            {
              "name": "teal"
            },
            {
              "name": "white"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-step",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "size",
          "description": "Default or small.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "sub-steps",
          "description": "Total number of sub steps. Value 1 meens no sub step."
        }
      ]
    },
    {
      "name": "joy-stepper",
      "description": {
        "kind": "markdown",
        "value": "To set the current step you have to specify the `step` property.\n\nIf you have to manage sub-steps, you need to set:\n\n-   The `sub-step` property which corresponds to the sub-step's number on the current step.\n-   The `sub-steps` property on each `joy-step` that have sub-steps."
      },
      "attributes": [
        {
          "name": "step",
          "description": "Current step number. Starts from 1."
        },
        {
          "name": "sub-step",
          "description": "Current sub step number. Starts from 1. Should be specified when the current step has sub steps."
        }
      ]
    },
    {
      "name": "joy-tag",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "href",
          "description": "If the tag is a link, give it a href"
        },
        {
          "name": "rel",
          "description": "Specifies the relationship of the target object to the link object."
        },
        {
          "name": "removable",
          "description": "Display an icon CTA on the right, to remove the tag from a list. Only for primary/secondary"
        },
        {
          "name": "selectable",
          "description": "Mock a radio like style. Nothing more. Only for primary/secondary"
        },
        {
          "name": "selected",
          "description": "Set the tag as selected. Needs to be added with selectable prop as well"
        },
        {
          "name": "size",
          "description": "Tag size. Default is medium",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            },
            {
              "name": "xsmall"
            }
          ]
        },
        {
          "name": "target",
          "description": "Native target attribute for hyperlinks.",
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            }
          ]
        },
        {
          "name": "variant",
          "description": "Tag color theme",
          "values": [
            {
              "name": "important"
            },
            {
              "name": "inactive"
            },
            {
              "name": "pending"
            },
            {
              "name": "pricing"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "special"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-tags-list",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "align",
          "description": "Tags justify-content strategy. *",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-text",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": []
    },
    {
      "name": "joy-textarea",
      "description": {
        "kind": "markdown",
        "value": "`<joy-textarea>` does not fully work with v-model.\nTo be perfectly confident while playing with model, please follow this snippet : \n\n```html\n<joy-textarea @value-change=\"$event => model = $event.detail.value\" :value=\"model\">\n```\n\nYou can of course fire a method if you need to execute additional code. \n\n> We basically do what Vue already does under the hood. @value-change is fired by Stencil component after component internal state is updated."
      },
      "attributes": [
        {
          "name": "auto-grow",
          "description": "If `true`, the element height will increase based on the value."
        },
        {
          "name": "autocapitalize",
          "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user."
        },
        {
          "name": "autofocus",
          "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
        },
        {
          "name": "clear-on-edit",
          "description": ""
        },
        {
          "name": "cols",
          "description": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
        },
        {
          "name": "debounce",
          "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the textarea."
        },
        {
          "name": "enterkeyhint",
          "description": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "values": [
            {
              "name": "done"
            },
            {
              "name": "enter"
            },
            {
              "name": "go"
            },
            {
              "name": "next"
            },
            {
              "name": "previous"
            },
            {
              "name": "search"
            },
            {
              "name": "send"
            }
          ]
        },
        {
          "name": "inputmode",
          "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "values": [
            {
              "name": "decimal"
            },
            {
              "name": "email"
            },
            {
              "name": "none"
            },
            {
              "name": "numeric"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "invalid",
          "description": "If `true`, the textarea will be considered as invalid."
        },
        {
          "name": "label-size",
          "description": "The label input's size.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "maxlength",
          "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
        },
        {
          "name": "minlength",
          "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
        },
        {
          "name": "minlength-label",
          "description": "Use this prop to give component the translation used to display minimum chars count."
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "optional-label",
          "description": "Inject the right wording if your field is not required. the \"-\" separator is already handled internally. *"
        },
        {
          "name": "placeholder",
          "description": "Instructional text that shows before the input has a value."
        },
        {
          "name": "readonly",
          "description": "If `true`, the user cannot modify the value."
        },
        {
          "name": "required",
          "description": "If `true`, the user must fill in a value before submitting a form."
        },
        {
          "name": "required-mark",
          "description": "Display the required mark or not. Default to false."
        },
        {
          "name": "rows",
          "description": "The number of visible text lines for the control."
        },
        {
          "name": "spellcheck",
          "description": "If `true`, the element will have its spelling and grammar checked."
        },
        {
          "name": "value",
          "description": "The value of the textarea."
        },
        {
          "name": "wrap",
          "description": "Indicates how the control wraps text.",
          "values": [
            {
              "name": "hard"
            },
            {
              "name": "off"
            },
            {
              "name": "soft"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-time-saving-calculator",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "ds",
          "description": ""
        },
        {
          "name": "handmade",
          "description": ""
        },
        {
          "name": "instance",
          "description": ""
        }
      ]
    },
    {
      "name": "joy-tooltip",
      "description": {
        "kind": "markdown",
        "value": "You won't need to directly call this tag."
      },
      "attributes": [
        {
          "name": "variant",
          "description": "Color theme. 2 possible values",
          "values": [
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-tooltip-trigger",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "append-to",
          "description": "Use basic selector to inject the tooltip in a specific DOM location. Default is body",
          "values": [
            {
              "name": "body"
            },
            {
              "name": "host"
            }
          ]
        },
        {
          "name": "event",
          "description": "Define the event needed to display the tooltip",
          "values": [
            {
              "name": "click"
            },
            {
              "name": "mouseenter"
            }
          ]
        },
        {
          "name": "position",
          "description": "Tooltip position. @floating-ui Placement value",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "tooltip-width",
          "description": "Allows to override tooltip size. Allows to more easily calculate its position"
        },
        {
          "name": "variant",
          "description": "Color theme. 2 possible values",
          "values": [
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            }
          ]
        }
      ]
    },
    {
      "name": "joy-user-card",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "full-name",
          "description": "Can be the freelancer's full name, or whatever you want. It will be placed at the top right part."
        },
        {
          "name": "link",
          "description": "Giving a link will make the whole component wrapped by an hyperlink"
        },
        {
          "name": "new-tab",
          "description": "Given the link, it will open the link in a new tab"
        },
        {
          "name": "photo-url",
          "description": "Use this prop if you don't want to use the user-card-avatar slot."
        },
        {
          "name": "rating-value",
          "description": "Freelancer's public rating."
        },
        {
          "name": "sub-title",
          "description": "Can be the freelancer's job, a company name or whatever you want. It will be placed at the top right part, below title"
        }
      ]
    },
    {
      "name": "joy-wrapper",
      "description": {
        "kind": "markdown",
        "value": "This component is a CSS flexbox module wrapper that enables to handle spacing between multiple elements and control the layout.\n\nIt's meant to be used with anything, but can be handy especially for form fields or CTA."
      },
      "attributes": [
        {
          "name": "align",
          "description": "CSS rule for flex align-items.  *",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "column-gap",
          "description": "CSS rule for flex column gap. Value is based on spacing tokens",
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "direction",
          "description": "CSS rule for flex direction  *",
          "values": [
            {
              "name": "column"
            },
            {
              "name": "row"
            }
          ]
        },
        {
          "name": "justify",
          "description": "CSS rule for flex justify-content.  *",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "space-between"
            }
          ]
        },
        {
          "name": "no-margin",
          "description": "Bottom margin for the wrapper.  *"
        },
        {
          "name": "row-gap",
          "description": "CSS rule for flex row gap. Value is based on spacing tokens",
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "wrap",
          "description": "CSS rule for flex wrap  *",
          "values": [
            {
              "name": "nowrap"
            },
            {
              "name": "wrap"
            }
          ]
        }
      ]
    }
  ]
}