{
  "version": 1.1,
  "tags": [
    {
      "name": "pn-accordion",
      "description": {
        "kind": "markdown",
        "value": "The `pn-accordion` is a wrapper for `pn-accordion-row` components.\nThis component gives the accordion rows some space between each one and provides the `single` feature.\nWhich will force the rule that only a single row to be open at one time."
      },
      "attributes": [
        {
          "name": "single",
          "description": "Only allow a single row to be open at once."
        },
        {
          "name": "transparent",
          "description": "Optional prop that removes the default white background on the accordion row."
        }
      ]
    },
    {
      "name": "pn-accordion-row",
      "description": {
        "kind": "markdown",
        "value": "Use this row component inside a `pn-accordion` to create an accordion group.\n\n**Note**: you can use the `pn-accordion-row` without the parent accordion.\nBut you will have to style the gap between each row."
      },
      "attributes": [
        {
          "name": "buttonid",
          "description": "Optional unique id for the `summary` element."
        },
        {
          "name": "contentid",
          "description": "Optional unique id for the `div` element containing the content."
        },
        {
          "name": "label",
          "description": "The label/title of the accordion row, you can also pass a slot with the name \"label\" if you want to put custom HTML content in there."
        },
        {
          "name": "state",
          "description": "The open/close status of the accordion row."
        },
        {
          "name": "transparent",
          "description": "Optional prop that removes the default white background on the accordion row."
        }
      ]
    },
    {
      "name": "pn-action-menu",
      "description": {
        "kind": "markdown",
        "value": "Create a list of actions in an accessible way.\n\nOption types include:\n\n- Regular button, click and it will collapse the menu,\n- Checkbox/radio, toggle the option on/off\n- Link, behaves like a regular `a[href]` element.\n\nYou can group these actions in groups and/or sub menus.\n\n- `group`, an array of options. The label will act as a title for the items.\n- `options`, an array of options. These items will appear in a sub-menu that can be toggled."
      },
      "attributes": [
        {
          "name": "language",
          "description": "Manually set the language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "menu-id",
          "description": "Set a custom ID for the menu."
        },
        {
          "name": "menu-left",
          "description": "Prefer that the submenus opens to the left, if there is enough space."
        },
        {
          "name": "menu-up",
          "description": "Prefer that the menu open upwards, if there is enough space."
        },
        {
          "name": "open",
          "description": "Open/close the action menu manually."
        }
      ]
    },
    {
      "name": "pn-button",
      "description": {
        "kind": "markdown",
        "value": "The `pn-button` is built with a native `button` or `a` element, if you use the `href` attribute."
      },
      "attributes": [
        {
          "name": "appearance",
          "description": "Select the button appearance: default (blue), `light` (white) and  `warning` (red).",
          "values": [
            {
              "name": "light"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "ariacontrols",
          "description": "HTML aria-controls attribute."
        },
        {
          "name": "ariacurrent",
          "description": "HTML aria-current attribute."
        },
        {
          "name": "ariaexpanded",
          "description": "HTML aria-expanded attribute."
        },
        {
          "name": "ariahaspopup",
          "description": "HTML aria-haspopup attribute."
        },
        {
          "name": "arialabel",
          "description": "HTML aria-label attribute."
        },
        {
          "name": "arialabelledby",
          "description": "HTML aria-labelledby attribute."
        },
        {
          "name": "ariapressed",
          "description": "HTML aria-pressed attribute."
        },
        {
          "name": "button-id",
          "description": "HTML ID."
        },
        {
          "name": "download",
          "description": "The download attribute of the link."
        },
        {
          "name": "form",
          "description": "Connect this button to a HTML form."
        },
        {
          "name": "href",
          "description": "Pass an href to make the button into link (a-tag)."
        },
        {
          "name": "icon",
          "description": "The SVG content of the icon you want."
        },
        {
          "name": "icon-only",
          "description": "Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`."
        },
        {
          "name": "label",
          "description": "The label of the button, this is the same as using the default slot."
        },
        {
          "name": "left-icon",
          "description": "Place the `icon` to the left of the button."
        },
        {
          "name": "loading",
          "description": "Display the loading indicator."
        },
        {
          "name": "no-tab",
          "description": "HTML tabindex."
        },
        {
          "name": "rel",
          "description": "The rel attribute of the link."
        },
        {
          "name": "small",
          "description": "Use the small button."
        },
        {
          "name": "target",
          "description": "The target attribute of the link."
        },
        {
          "name": "tooltip",
          "description": "When the user focus/hover the button, the `tooltip` text will show up."
        },
        {
          "name": "tooltip-up",
          "description": "Prefer the tooltip to open upwards. Will still go downwards if there is no space."
        },
        {
          "name": "type",
          "description": "Select HTML button type.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "variant",
          "description": "Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).",
          "values": [
            {
              "name": "borderless"
            },
            {
              "name": "outlined"
            }
          ]
        }
      ]
    },
    {
      "name": "pn-button-dropdown",
      "description": {
        "kind": "markdown",
        "value": "The open/closing of the dropdown is handled by the component itself."
      },
      "attributes": [
        {
          "name": "appearance",
          "description": "Select between `light` and `warning`.",
          "values": [
            {
              "name": "light"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "icon",
          "description": "The optional SVG content of the icon you want."
        },
        {
          "name": "label",
          "description": "The required label on the button."
        },
        {
          "name": "open",
          "description": "Open/close the dropdown without user interaction."
        },
        {
          "name": "small",
          "description": "Smaller button."
        },
        {
          "name": "tooltip",
          "description": "Tooltip (required for Icon Only)."
        },
        {
          "name": "variant",
          "description": "Select between `outlined` and `borderless`.",
          "values": [
            {
              "name": "borderless"
            },
            {
              "name": "outlined"
            }
          ]
        }
      ]
    },
    {
      "name": "pn-card",
      "description": {
        "kind": "markdown",
        "value": "The card component is more than just a navigational element.\nIt is a flexible component that can be used as a product item, a clickable link card, etc...\n\nSetting the `href` prop will transform the entire `pn-card` into a clickable element.\nIf you need content to be interactable inside the card, do not use the `href` prop."
      },
      "attributes": [
        {
          "name": "aspect-ratio",
          "description": "Select image aspect ratio. Example: '3/3', '16/9'."
        },
        {
          "name": "card-id",
          "description": "Set a HTML id for the card. Optional and not required."
        },
        {
          "name": "horizontal",
          "description": "Uee the horizontal card layout."
        },
        {
          "name": "href",
          "description": "The card link."
        },
        {
          "name": "href-label",
          "description": "The link text."
        },
        {
          "name": "icon",
          "description": "The link icon. Defaults to `arrow_right` or `open_in_new` if `target=\"_blank\"`."
        },
        {
          "name": "label",
          "description": "Headline of the card. Will act as label for the link if there is no `href-label` set."
        },
        {
          "name": "label-tag",
          "description": "The label HTML tag. Default is `h3`.",
          "values": [
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            },
            {
              "name": "p"
            }
          ]
        },
        {
          "name": "overline",
          "description": "Set a smaller text above the `label` text."
        },
        {
          "name": "rel",
          "description": "The rel attribute of the link."
        },
        {
          "name": "reverse",
          "description": "Reverse the order of which the image will wrap."
        },
        {
          "name": "target",
          "description": "The target attribute of the link."
        },
        {
          "name": "text",
          "description": "Text content of the card."
        }
      ]
    },
    {
      "name": "pn-checkbox",
      "description": {
        "kind": "markdown",
        "value": "The `pn-checkbox` is built with a native `input[type=\"checkbox\"]` in the background.\nThis means you can use native events to listen to the changes."
      },
      "attributes": [
        {
          "name": "checkboxid",
          "description": "A unique HTML ID for the checkbox."
        },
        {
          "name": "checked",
          "description": "Check the checkbox."
        },
        {
          "name": "disabled",
          "description": "Disable the checkbox."
        },
        {
          "name": "expand",
          "description": "Allow the checkbox to control the slot area \"content\".\nWhen checked, the area is visible, when unchecked, the area is hidden.\n\nThe prop `tile` must be used at the same time."
        },
        {
          "name": "helpertext",
          "description": "This adds an optional helpertext under the label."
        },
        {
          "name": "icon",
          "description": "Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work."
        },
        {
          "name": "indeterminate",
          "description": "Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state."
        },
        {
          "name": "invalid",
          "description": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox."
        },
        {
          "name": "label",
          "description": "The checkbox label"
        },
        {
          "name": "name",
          "description": "The name of the checkbox group."
        },
        {
          "name": "required",
          "description": "Set the checkbox as required."
        },
        {
          "name": "tile",
          "description": "Turn the checkbox into a clickable tile. A border and padding is added.\n\n**Do not** use interactive elements (links/buttons) inside of the slots when using this prop.\nAn exception is made when using the `tile` + `expand` props together,\nwhich allows you to use interactive elements."
        },
        {
          "name": "value",
          "description": "This will be emitted on change and input events."
        }
      ]
    },
    {
      "name": "pn-choice-chip",
      "description": {
        "kind": "markdown",
        "value": "The `pn-choice-chip` is built with a native `input[type=\"checkbox|radio\"]` in the background.\nThis means you can use native events to listen to the changes."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Precheck the choice chip"
        },
        {
          "name": "choiceid",
          "description": "A unique HTML id"
        },
        {
          "name": "disabled",
          "description": "Disable the choice chip."
        },
        {
          "name": "icon",
          "description": "Include an icon"
        },
        {
          "name": "label",
          "description": "The choice chip label"
        },
        {
          "name": "large",
          "description": "Set the size to large."
        },
        {
          "name": "name",
          "description": "The name of the checkbox group"
        },
        {
          "name": "radio",
          "description": "Make the choice chip a radio"
        },
        {
          "name": "required",
          "description": "Set the choice chip as required."
        },
        {
          "name": "small",
          "description": "Set the size to small."
        },
        {
          "name": "value",
          "description": "This will be emitted on change and input"
        }
      ]
    },
    {
      "name": "pn-counter",
      "description": {
        "kind": "markdown",
        "value": "The `pn-counter` is an input with a button on each side that can be used to increase and decrease the input value."
      },
      "attributes": [
        {
          "name": "compact",
          "description": "Use the compact label variant."
        },
        {
          "name": "counterid",
          "description": "Set a unique HTML ID for the counter"
        },
        {
          "name": "disabled",
          "description": "Set the counter as disabled."
        },
        {
          "name": "helpertext",
          "description": "Set a helpertext for the counter."
        },
        {
          "name": "label",
          "description": "Label for the counter"
        },
        {
          "name": "label-decrease",
          "description": "Text for the decrease button. Default is \"Decrease\"."
        },
        {
          "name": "label-increase",
          "description": "Text for the increase button. Default is \"Increase\"."
        },
        {
          "name": "language",
          "description": "Set the language manually for the built in translations.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "list",
          "description": "Suggest values for the counter input."
        },
        {
          "name": "max",
          "description": "Maximum value."
        },
        {
          "name": "max-message",
          "description": "Set a message that shows below input when user wants to set a value that is above `max`. Default is \"Maximum value is x\""
        },
        {
          "name": "min",
          "description": "Minimum value."
        },
        {
          "name": "min-message",
          "description": "Set a message that shows below input when user wants to set a value that is below `min`. Default is \"Minimum value is x\""
        },
        {
          "name": "name",
          "description": "HTML input name."
        },
        {
          "name": "readonly",
          "description": "Set the counter as readonly."
        },
        {
          "name": "required",
          "description": "Set the counter as required."
        },
        {
          "name": "step",
          "description": "Increase/decrease the value in steps, default is 1."
        },
        {
          "name": "value",
          "description": "Set a predefined value"
        }
      ]
    },
    {
      "name": "pn-date-picker",
      "description": {
        "kind": "markdown",
        "value": "The date picker allows a single or a range of dates to be selected.\n\nBased on the `format` prop, separators will automatically be added if you type the date.\n\nYou can navigate the calendar grid with your keyboard."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": "Set the input `autocomplete` attribute."
        },
        {
          "name": "calendar-up",
          "description": "Make the calendar open upwards by default. Opens downwards if there is not enough space."
        },
        {
          "name": "compact",
          "description": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
        },
        {
          "name": "date-id",
          "description": "Set a custom ID for the calendar."
        },
        {
          "name": "disable-max-length",
          "description": "If you use a format with an unknown length, disable the max length."
        },
        {
          "name": "disable-type-ahead",
          "description": "Disable the automatic insertion of separators when typing in the input."
        },
        {
          "name": "disable-weekends",
          "description": "Remove the option to select dates on weekends."
        },
        {
          "name": "disabled",
          "description": "Set the date picker as disabled."
        },
        {
          "name": "disabled-dates",
          "description": "Individual dates you want to disable. Use a comma separated string.\n\nRemember to use the same format that you have in the `format` prop."
        },
        {
          "name": "end",
          "description": "Set a predefined value for the from date."
        },
        {
          "name": "end-placeholder",
          "description": "Placeholder for end date (defaults to the format prop)."
        },
        {
          "name": "error",
          "description": "Set an error message for the date picker. Overwrites the helpertext if used at the same time."
        },
        {
          "name": "format",
          "description": "Set the date format of the value.\n\nWhile you can set any date value from the Dayjs documentation,\nwe strongly recommend you pick a simple format that you can also type manually."
        },
        {
          "name": "helpertext",
          "description": "Provide a helpertext for the date input."
        },
        {
          "name": "invalid",
          "description": "Trigger the invalid state without an error message."
        },
        {
          "name": "label-from",
          "description": "Set a label for the from date."
        },
        {
          "name": "label-to",
          "description": "Set a label for the to date."
        },
        {
          "name": "language",
          "description": "Manually set language; this will be inherited from the topbar.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "list",
          "description": "Set the input `list` attribute for the first date input."
        },
        {
          "name": "list-end",
          "description": "Set the input `list` attribute for the second date input."
        },
        {
          "name": "max-date",
          "description": "Latest date possible, this will determine how many years forward the date picker will show.\n\nRemember to use the same format that you have in the `format` prop."
        },
        {
          "name": "min-date",
          "description": "Earliest date possible, this will determine how many years back the date picker will show.\n\nRemember to use the same format that you have in the `format` prop."
        },
        {
          "name": "name",
          "description": "HTML input name"
        },
        {
          "name": "pattern",
          "description": "Set the HTML pattern prop on the input elements. Make sure it matches the format."
        },
        {
          "name": "placeholder",
          "description": "Placeholder for the input field (defaults to the format prop)."
        },
        {
          "name": "range",
          "description": "Allow the selection of a date range."
        },
        {
          "name": "range-limit",
          "description": "Set a limit on how many days one may select.\nBy default, you can select an unlimited range."
        },
        {
          "name": "readonly",
          "description": "Set the date picker as readonly."
        },
        {
          "name": "required",
          "description": "Set the date picker as required."
        },
        {
          "name": "start",
          "description": "Set a predefined value for the from date."
        },
        {
          "name": "view",
          "description": "The calendar grid is shown as default. You can set either `months` or `years` as your first choice.",
          "values": [
            {
              "name": "calendar"
            },
            {
              "name": "months"
            },
            {
              "name": "years"
            }
          ]
        },
        {
          "name": "week-numbers",
          "description": "Show weekend numbers to the left of the calendar grid."
        }
      ]
    },
    {
      "name": "pn-fieldset",
      "description": {
        "kind": "markdown",
        "value": "The fielset is a wrapper to give context and information about inputs. Most commonly, a set of radio/checkboxes.\nHowever, you may include any type of input such as textareas, toggles and selects."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disable all of the inputs inside of the fieldset."
        },
        {
          "name": "error",
          "description": "Error message, applies warning styles and icon."
        },
        {
          "name": "fieldset-id",
          "description": "Give the fieldset a custom HTML id."
        },
        {
          "name": "form",
          "description": "The id of the form you want the fieldset to be part of.\nIf you want the inputs inside to be associated with a specific form, you need to set on those elements directly."
        },
        {
          "name": "helpertext",
          "description": "Text message underneath the legend for more instruction or hints on how to fill in controls correctly."
        },
        {
          "name": "invalid",
          "description": "Set the fieldset as `invalid`, will add red error styles."
        },
        {
          "name": "legend",
          "description": "The legend provides a caption for the fieldset group.\nThis should be a question or heading that describes the inputs/fields."
        },
        {
          "name": "name",
          "description": "Give the fieldset a HTML name."
        }
      ]
    },
    {
      "name": "pn-file-upload",
      "description": {
        "kind": "markdown",
        "value": "Users can drop files directly into the upload area of the component\nor simply click on it to open their native file explorer."
      },
      "attributes": [
        {
          "name": "accept",
          "description": "Set which file types the input accepts. Ex: .docs,.xml"
        },
        {
          "name": "capture",
          "description": "Use the capture mode.",
          "values": [
            {
              "name": "environment"
            },
            {
              "name": "user"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "Disable the input."
        },
        {
          "name": "helpertext",
          "description": "The helpertext defaults to \"Supported formats {x} and max filesize {y}\",\nif there is a value set for the prop `accept`."
        },
        {
          "name": "hide-progress",
          "description": "Always hide the progress bar, even when upload has begun."
        },
        {
          "name": "label",
          "description": "The default label is \"Click or drag a file here\"."
        },
        {
          "name": "language",
          "description": "Manually set the language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "limit",
          "description": "Set maximum amount of files to be selected.\nAny value above 1 will force the `multiple` to be `true`."
        },
        {
          "name": "max-size",
          "description": "Set the maximum upload size."
        },
        {
          "name": "multiple",
          "description": "Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1."
        },
        {
          "name": "name",
          "description": "Set a HTML name."
        },
        {
          "name": "required",
          "description": "Set the input as required."
        }
      ]
    },
    {
      "name": "pn-footer",
      "description": {
        "kind": "markdown",
        "value": "The default market and language is SE/en.\n\nMake sure you set the market **and** language prop.\nExample: Setting the `language` prop `da` will not display anything, as `da` does not exist on the `SE` market."
      },
      "attributes": [
        {
          "name": "language",
          "description": "Set the language for the footer.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "market",
          "description": "Set the market for the footer.",
          "values": [
            {
              "name": "DK"
            },
            {
              "name": "FI"
            },
            {
              "name": "NO"
            },
            {
              "name": "SE"
            }
          ]
        }
      ]
    },
    {
      "name": "pn-header",
      "description": {
        "kind": "markdown",
        "value": "The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu."
      },
      "attributes": [
        {
          "name": "go-back-href",
          "description": "The href for the go back link. If this is provided a button be displayed."
        },
        {
          "name": "go-back-text",
          "description": "The text for the back link."
        },
        {
          "name": "heading",
          "description": "The `h1` text content."
        },
        {
          "name": "language",
          "description": "Set the language manually, only use this prop if the pnTopbar is not loaded. Supported: sv, en, da, fi and no.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "max-width",
          "description": "Set a inner container max-width, any width CSS value is accepted."
        }
      ]
    },
    {
      "name": "pn-icon",
      "description": {
        "kind": "markdown",
        "value": "The `pn-icon` is a wrapper for an SVG string.\nWhile its built with PostNords specific icon dimensions in mind (24x24px), you can use any SVG content in this component.\nAs long as its 3x3 in size, there should be no problem.\n\nThe color feature will not overwrite the color of flags."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Color the icon with one of the follwing colors from our library.",
          "values": [
            {
              "name": "black"
            },
            {
              "name": "blue200"
            },
            {
              "name": "blue25"
            },
            {
              "name": "blue400"
            },
            {
              "name": "blue50"
            },
            {
              "name": "blue700"
            },
            {
              "name": "blue900"
            },
            {
              "name": "coral200"
            },
            {
              "name": "coral25"
            },
            {
              "name": "coral400"
            },
            {
              "name": "coral50"
            },
            {
              "name": "coral700"
            },
            {
              "name": "coral900"
            },
            {
              "name": "gray100"
            },
            {
              "name": "gray200"
            },
            {
              "name": "gray25"
            },
            {
              "name": "gray400"
            },
            {
              "name": "gray50"
            },
            {
              "name": "gray700"
            },
            {
              "name": "gray900"
            },
            {
              "name": "green200"
            },
            {
              "name": "green25"
            },
            {
              "name": "green400"
            },
            {
              "name": "green50"
            },
            {
              "name": "green500"
            },
            {
              "name": "green700"
            },
            {
              "name": "green900"
            },
            {
              "name": "orange200"
            },
            {
              "name": "orange25"
            },
            {
              "name": "orange400"
            },
            {
              "name": "orange50"
            },
            {
              "name": "orange500"
            },
            {
              "name": "orange700"
            },
            {
              "name": "orange900"
            },
            {
              "name": "warning"
            },
            {
              "name": "white"
            }
          ]
        },
        {
          "name": "icon",
          "description": "The SVG content of the icon you want to use.\n\nFlags cannot be colored."
        },
        {
          "name": "small",
          "description": "Make the icon small (16 instead of 24px)."
        }
      ]
    },
    {
      "name": "pn-illustration",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "fill",
          "description": "Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`)"
        },
        {
          "name": "height",
          "description": "Set the height of the SVG element. Any valid CSS height value is allowed"
        },
        {
          "name": "illustration",
          "description": "The SVG content of the illustration you want to use. The viewBox property will be used to determine width/height"
        },
        {
          "name": "width",
          "description": "Set the width of the SVG element. Any valid CSS width value is allowed"
        }
      ]
    },
    {
      "name": "pn-input",
      "description": {
        "kind": "markdown",
        "value": "The `pn-input` is a regular `input` but styled. This means you can use native events to listen to the changes.\nAlways use the `label` prop to make sure the input is accessible."
      },
      "attributes": [
        {
          "name": "ariacontrols",
          "description": "Set the ID of what this input controls."
        },
        {
          "name": "arialabel",
          "description": "While you can use the `aria-label`, using a `label` is far more accessible."
        },
        {
          "name": "autocomplete",
          "description": "Let the browser know what type of autocorrects the input should use.\nWorks much better if a `name` and `inputid` is supplied."
        },
        {
          "name": "compact",
          "description": "Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time."
        },
        {
          "name": "disabled",
          "description": "Set the input as `disabled`."
        },
        {
          "name": "error",
          "description": "Set the input as `invalid` and display an error message (applies the same style as `invalid`).\n\nError message; will take precedence over helpertext if both are provided."
        },
        {
          "name": "helpertext",
          "description": "Text message placed underneath the input field."
        },
        {
          "name": "icon",
          "description": "Select an icon to display before the input field value.\n`icon` takes precedence over the `text-prefix` prop."
        },
        {
          "name": "inputid",
          "description": "Provide a unique HTML id to connect the input with the label.\nA unique uuid ID will be generated if this field is left empty."
        },
        {
          "name": "inputmode",
          "description": "Hint the browser about what type of virtual keyboard should be used.\nThe browser will be able to decide this on its own most of the time,\nespecially if you use the `type`, `name` and `inputid` props.\n\nLeave empty or with a `''` value if you want the browsers default behaviour (`text`).",
          "values": [
            {
              "name": "decimal"
            },
            {
              "name": "email"
            },
            {
              "name": "none"
            },
            {
              "name": "numeric"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "invalid",
          "description": "Set the input as `invalid`. Provides a red color and red warning icon."
        },
        {
          "name": "label",
          "description": "Text label placed above the input field."
        },
        {
          "name": "language",
          "description": "Set the language manually for the translations of show/hide/clear button text.\nNot needed if you have the pntopbar on the page.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "list",
          "description": "Point to a datalist element for this input."
        },
        {
          "name": "max",
          "description": "Set the `max` value of the `number` input."
        },
        {
          "name": "maxlength",
          "description": "The maximum number of characters the user should be able to add, also adds a visible counter."
        },
        {
          "name": "min",
          "description": "Set the `min` value of the `number` input."
        },
        {
          "name": "name",
          "description": "HTML input name. Setting a name will help the browser understand what type of data the input have\nand can better assist with autofill data based on previous entires much better."
        },
        {
          "name": "pattern",
          "description": "Pattern prop."
        },
        {
          "name": "placeholder",
          "description": "Provide a placeholder text. Remember that this is no replacement for a label.\nThe placeholder should be a nice addition to the label/helpertext, not important information."
        },
        {
          "name": "readonly",
          "description": "Set the input as `readonly`."
        },
        {
          "name": "required",
          "description": "Set the input as `required`."
        },
        {
          "name": "step",
          "description": "Set a `step` for the number input."
        },
        {
          "name": "text-prefix",
          "description": "Set a small text before the input field value.\nCannot be used together with an `icon` at the same time."
        },
        {
          "name": "text-suffix",
          "description": "Set a small text after the input field value.\nCannot be used with the `text-prefix` prop at the same time."
        },
        {
          "name": "type",
          "description": "pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`.",
          "values": [
            {
              "name": "email"
            },
            {
              "name": "number"
            },
            {
              "name": "password"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "valid",
          "description": "Set the input as `valid`. Provides a green color and a check icon."
        },
        {
          "name": "value",
          "description": "Set the value of the input."
        }
      ]
    },
    {
      "name": "pn-modal",
      "description": {
        "kind": "markdown",
        "value": "Present content in a modal that overlays everything on the current page.\nUse the prop `open` to toggle the visiblity.\nUse the event `modalToggle` to determine when the modal is being closed/opened by the user."
      },
      "attributes": [
        {
          "name": "allow-overflow",
          "description": "Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\nDo not use if you have a lot of conditional rendering inside the modal."
        },
        {
          "name": "helpertext",
          "description": "Set a descriptive text for the modal."
        },
        {
          "name": "hide-close",
          "description": "Hide the close button. If you disable this, make sure you build your own cancel button."
        },
        {
          "name": "label",
          "description": "Set a label for the modal."
        },
        {
          "name": "language",
          "description": "Set the language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "max-width",
          "description": "Define your own max width of the modal. Default is `45em`."
        },
        {
          "name": "open",
          "description": "Bind to this property if you want to control the visibility of the modal from your own data."
        },
        {
          "name": "persistent",
          "description": "Prevent users from closing the modal by clicking on the backdrop or the `ESC` key."
        },
        {
          "name": "sheet",
          "description": "Use the `sheet` visual. Aligns the modal to the right."
        }
      ]
    },
    {
      "name": "pn-multiselect",
      "description": {
        "kind": "markdown",
        "value": "The `pn-multiselect` gets its options via javascript.\n\nNative HTML does not accept arrays of objects. Most frameworks solves this automatically (Vue, react, etc...),\nbut keep this in mind if you use this component outside of a framework environment."
      },
      "attributes": [
        {
          "name": "all-value",
          "description": "Set a custom value for the \"Select all value\" option."
        },
        {
          "name": "bottom",
          "description": "Force the dropdown to always open downwards."
        },
        {
          "name": "compact",
          "description": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
        },
        {
          "name": "disabled",
          "description": "Disable the select."
        },
        {
          "name": "error",
          "description": "Display an error message and trigger the invalid state."
        },
        {
          "name": "helpertext",
          "description": "Display a helper text underneath the select"
        },
        {
          "name": "icon",
          "description": "Display an icon to the left of the select input"
        },
        {
          "name": "invalid",
          "description": "Trigger the invalid state."
        },
        {
          "name": "item-count",
          "description": "Decide how many items should be shown before ellipsis. Requires the `search` prop to work."
        },
        {
          "name": "label",
          "description": "Label placed above the select"
        },
        {
          "name": "language",
          "description": "Manually set the language, not needed if you have the pnTopbar available",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "max-height",
          "description": "Use a custom max-height for the dropdown list."
        },
        {
          "name": "name",
          "description": "HTML name of the checkbox elements. Used for each checkbox inside the multiselect."
        },
        {
          "name": "placeholder",
          "description": "This is what will be shown on load if no value is used.\nThe `placeholder` will override the default text used if you have the `search` prop active."
        },
        {
          "name": "required",
          "description": "Set the select as required."
        },
        {
          "name": "search",
          "description": "Allow the user to search among the options.\nThe selected options will now display underneath the multiselect element."
        },
        {
          "name": "search-query",
          "description": "Set the search query of the multiselect."
        },
        {
          "name": "select-all",
          "description": "Adds a \"Select all\" option into the list.\nIf you use the search feature at the same time, clicking this option will only toggle the options found."
        },
        {
          "name": "select-id",
          "description": "Select HTML id"
        },
        {
          "name": "select-name",
          "description": "HTML name of the input element."
        },
        {
          "name": "top",
          "description": "Force the dropdown to always open upwards."
        }
      ]
    },
    {
      "name": "pn-ocr-search",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "language",
          "description": "The `language` property will be prioritized before the pnTopbar language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        }
      ]
    },
    {
      "name": "pn-page-nav",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "dropdown",
          "description": "Pass a string which will be the text on the dropdown button."
        },
        {
          "name": "navid",
          "description": "Set a unique HTML ID."
        },
        {
          "name": "value",
          "description": "Currently active menu item value"
        }
      ]
    },
    {
      "name": "pn-page-nav-dropdown-item",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "active",
          "description": "Ignore this, it's internal communication with parent."
        },
        {
          "name": "href",
          "description": "Pass an href to the items if you want to have links that lead outside of your app"
        },
        {
          "name": "value",
          "description": "The value that will be emitted upon selection, only pass this if the item\nis a link, if you want a button (for quick actions), omit this prop."
        }
      ]
    },
    {
      "name": "pn-page-nav-item",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "href",
          "description": "Pass an href to the items if you want to have links that lead outside of your app."
        },
        {
          "name": "icon",
          "description": "The SVG content of the icon you want."
        },
        {
          "name": "value",
          "description": "The item value. Used by `pn-page-nav` to determine pre-selected item."
        }
      ]
    },
    {
      "name": "pn-pagination",
      "description": {
        "kind": "markdown",
        "value": "Accessible pagination needs each item to link to a different part of the document.\nThis means that you must `preventDefault` on the `MouseEvent` emitted from the `pageSelected` event if you have a SPA.\n\nIf you set a `page` value that is higher than `pages`, the component will automatically lower it to the `pages` value."
      },
      "attributes": [
        {
          "name": "label",
          "description": "Set a label for the pagination element for screen readers. It defaults to `Pagination`."
        },
        {
          "name": "language",
          "description": "Manually set the language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "page",
          "description": "Set which page the user is currently viewing.\nUse this to set an inital page or if the selected page is changed from outside this component."
        },
        {
          "name": "pages",
          "description": "Set how many pages are available."
        },
        {
          "name": "pages-visible",
          "description": "Set how many pages should be visible at one time. Use an odd number. Minimum is `5`."
        },
        {
          "name": "pagination-id",
          "description": "Set a HTML id on the pagination element."
        },
        {
          "name": "rows",
          "description": "Allow the user to decide how many items should be shown per page.\nMake sure this value exists in the `rowsList` string."
        },
        {
          "name": "rows-label",
          "description": "Default label is \"Items per page\"."
        },
        {
          "name": "rows-list",
          "description": "Set available items per page options the user can select. Use a comma separated string."
        },
        {
          "name": "url-template",
          "description": "Set a custom URL template. Use `{page}` within the string to position where the dynamic page number should be."
        }
      ]
    },
    {
      "name": "pn-progress-bar",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "error",
          "description": "Trigger an error and display a message"
        },
        {
          "name": "label",
          "description": "Set a label for the progress bar"
        },
        {
          "name": "progress",
          "description": "Progress value, 0-100"
        },
        {
          "name": "progress-id",
          "description": "A unique HTML id fror the progress bar"
        },
        {
          "name": "progress-text",
          "description": "Replaces the default progress percentage text"
        },
        {
          "name": "success-text",
          "description": "Text shown on success (100%)"
        }
      ]
    },
    {
      "name": "pn-progress-indicator",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "active-step",
          "description": "Takes the index of the active step"
        }
      ]
    },
    {
      "name": "pn-progress-indicator-step",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "active",
          "description": "Set by the parent component. Do not use manually.",
          "values": [
            {
              "name": "no"
            },
            {
              "name": "yes"
            }
          ]
        },
        {
          "name": "active-step",
          "description": "Set by the parent component. Do not use manually."
        },
        {
          "name": "checked",
          "description": "Set the step as checked, meaning a white check mark will appear."
        },
        {
          "name": "index",
          "description": "Set by the parent component. Do not use manually."
        },
        {
          "name": "name",
          "description": "The step name."
        }
      ]
    },
    {
      "name": "pn-progress-stepper",
      "description": {
        "kind": "markdown",
        "value": "The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...)."
      },
      "attributes": [
        {
          "name": "current-step",
          "description": "The current step of the progress stepper."
        },
        {
          "name": "dots",
          "description": "Use the dots visual, instead of the bar.\n\nThis will hide the label from view, but is still accessible to screenreaders."
        },
        {
          "name": "label",
          "description": "Set custom label for the stepper, default label is \"Step\"."
        },
        {
          "name": "language",
          "description": "Set the language manually, only use this prop if the pnTopbar is not loaded.\nWill not overwrite the custom `label` prop if used.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "progress-stepper-id",
          "description": "Set a custom HTML id on the progress stepper element to associate progress bar with label."
        },
        {
          "name": "step-name",
          "description": "You can add a custom optional string to the label if you need a name for the current step."
        },
        {
          "name": "total-steps",
          "description": "Set total amount of steps, maximum allowed is `7`."
        }
      ]
    },
    {
      "name": "pn-radio-button",
      "description": {
        "kind": "markdown",
        "value": "The `pn-radio-button` is built with a native `input[type=\"radio\"]` in the background.\nThis means you can use native events to listen to the changes."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Check the radio."
        },
        {
          "name": "disabled",
          "description": "Disable the radio."
        },
        {
          "name": "expand",
          "description": "Allow the radio to control the slot area \"content\".\nWhen checked, the area is visible, when unchecked, the area is hidden.\n\nThe prop `tile` must be used at the same time."
        },
        {
          "name": "helpertext",
          "description": "This adds an optional helpertext under the label."
        },
        {
          "name": "icon",
          "description": "Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work."
        },
        {
          "name": "invalid",
          "description": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio."
        },
        {
          "name": "label",
          "description": "The radio label"
        },
        {
          "name": "name",
          "description": "The name of the radio group."
        },
        {
          "name": "radioid",
          "description": "A unique HTML ID for the radio."
        },
        {
          "name": "required",
          "description": "Set the radio as required."
        },
        {
          "name": "tile",
          "description": "Turn the radio into a clickable tile. A border and padding is added.\n\n**Do not** use interactive elements (links/buttons) inside of the slots when using this prop.\nAn exception is made when using the `tile` + `expand` props together,\nwhich allows you to use interactive elements."
        },
        {
          "name": "value",
          "description": "This will be emitted on change and input events."
        }
      ]
    },
    {
      "name": "pn-range",
      "description": {
        "kind": "markdown",
        "value": "Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and\nhas support for most attributes."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disable the range input."
        },
        {
          "name": "error",
          "description": "Set an error message for the range input."
        },
        {
          "name": "helpertext",
          "description": "Set a helpertext for the range input."
        },
        {
          "name": "icon",
          "description": "Set an icon for the range/input field."
        },
        {
          "name": "icon-end",
          "description": "Set an icon at the end of the range or for the second input field when using `multiple`."
        },
        {
          "name": "input",
          "description": "Display an input for the range value.\nAllowing the user to type or use the slider to set the value."
        },
        {
          "name": "invalid",
          "description": "Set the error visual for the range input, same as `error`, but without a message."
        },
        {
          "name": "label",
          "description": "Label for the range input."
        },
        {
          "name": "label-end",
          "description": "Label for the range end input."
        },
        {
          "name": "max",
          "description": "The range input max value."
        },
        {
          "name": "min",
          "description": "The range input min value."
        },
        {
          "name": "multiple",
          "description": "Allow multiple values to be selected"
        },
        {
          "name": "name",
          "description": "The range input name."
        },
        {
          "name": "name-end",
          "description": "The range input name."
        },
        {
          "name": "pn-id",
          "description": "Set a custom HTML id."
        },
        {
          "name": "pn-id-end",
          "description": "Set a custom HTML id."
        },
        {
          "name": "step",
          "description": "Set a step value for the range input."
        },
        {
          "name": "text-prefix",
          "description": "Set a prefix for the range/input field."
        },
        {
          "name": "text-suffix",
          "description": "Set a suffix for the range/input field."
        },
        {
          "name": "tooltip-hide",
          "description": "Hide the tooltip."
        },
        {
          "name": "tooltip-template",
          "description": "Range tooltip label template. Default is simply the value of the range input."
        },
        {
          "name": "value",
          "description": "The range input value."
        },
        {
          "name": "value-end",
          "description": "The range end input value."
        }
      ]
    },
    {
      "name": "pn-read-only-button",
      "description": {
        "kind": "markdown",
        "value": "There are no events or features other than the `icon`, `small` and `language` prop.\n\nOur rule is to not have disabled buttons.\nHowever, this component is an exception for a very specific use case regarding portal users."
      },
      "attributes": [
        {
          "name": "icon",
          "description": "The SVG content of the icon you want."
        },
        {
          "name": "icon-only",
          "description": "If you're using a button with only an icon, button text is still REQUIRED for the tooltip."
        },
        {
          "name": "language",
          "description": "Set the language manually.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "left-icon",
          "description": "Icon on the left side instead of on the right."
        },
        {
          "name": "small",
          "description": "Smaller button."
        }
      ]
    },
    {
      "name": "pn-search-field",
      "description": {
        "kind": "markdown",
        "value": "The search field has multiple button variants that changes the visual appearance."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": "Allow the browser to autocomplete the search field."
        },
        {
          "name": "button",
          "description": "Button variant changes the visual of the search field:\n- `''` Standard with a blue button.\n- `simple` | ~~`icon`~~ with simple white icon only button.\n- `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.\n- `jumbo` with a larger blue icon only button.",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "icon"
            },
            {
              "name": "icon-inline"
            },
            {
              "name": "jumbo"
            },
            {
              "name": "none"
            },
            {
              "name": "simple"
            }
          ]
        },
        {
          "name": "button-label",
          "description": "Label for the button element."
        },
        {
          "name": "button-light",
          "description": "Light instead of dark search button."
        },
        {
          "name": "button-tooltip",
          "description": "Add a tooltip to the search button."
        },
        {
          "name": "disabled",
          "description": "Disable the search field."
        },
        {
          "name": "label",
          "description": "Provide an aria-label for the search field."
        },
        {
          "name": "language",
          "description": "Override the pntopbar language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "list",
          "description": "Point to a datalist element with this id."
        },
        {
          "name": "loading",
          "description": "Display loading animation."
        },
        {
          "name": "name",
          "description": "Set HTML name of the search input."
        },
        {
          "name": "placeholder",
          "description": "Set a search field placeholder. This is no replacement for a `label`."
        },
        {
          "name": "required",
          "description": "Set the search field as required."
        },
        {
          "name": "searchid",
          "description": "Set a unique ID for the search input."
        },
        {
          "name": "value",
          "description": "Set the value of the search field."
        }
      ]
    },
    {
      "name": "pn-segment",
      "description": {
        "kind": "markdown",
        "value": "The `pn-segment` is built with a native `input[type=\"radio\"]` in the background.\nDo not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disable the segment."
        },
        {
          "name": "icon",
          "description": "The SVG content of the icon you want."
        },
        {
          "name": "label",
          "description": "The segment label, same as the slot."
        },
        {
          "name": "name",
          "description": "The segment controller name."
        },
        {
          "name": "segmentid",
          "description": "A unique HTML id."
        },
        {
          "name": "selected",
          "description": "Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**."
        },
        {
          "name": "value",
          "description": "The segment value."
        }
      ]
    },
    {
      "name": "pn-segmented-control",
      "description": {
        "kind": "markdown",
        "value": "The `pn-segmented-control` and `pn-segmented` is built with native `input[type=\"radio\"]` in the background.\nThis means you can use native events to listen to the changes."
      },
      "attributes": [
        {
          "name": "name",
          "description": "This is the name of the radio buttons inside the controller."
        },
        {
          "name": "value",
          "description": "Currently active segment value."
        }
      ]
    },
    {
      "name": "pn-select",
      "description": {
        "kind": "markdown",
        "value": "The `pn-select` uses a native `select` element under the hood.\nUse the slot to include `option` elements.\n\nJust like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": "HTML autocomplete."
        },
        {
          "name": "compact",
          "description": "Use the compact label variant."
        },
        {
          "name": "disabled",
          "description": "Disable the select."
        },
        {
          "name": "error",
          "description": "Display an error message and trigger the invalid state."
        },
        {
          "name": "form",
          "description": "HTML form name."
        },
        {
          "name": "helpertext",
          "description": "Display a helper text underneath the select."
        },
        {
          "name": "icon",
          "description": "Display an icon to the left of the select input."
        },
        {
          "name": "invalid",
          "description": "Trigger the invalid state."
        },
        {
          "name": "label",
          "description": "Label placed above the select."
        },
        {
          "name": "name",
          "description": "HTML select name."
        },
        {
          "name": "required",
          "description": "Set the select as required."
        },
        {
          "name": "select-id",
          "description": "Select HTML id"
        }
      ]
    },
    {
      "name": "pn-spinner",
      "description": {
        "kind": "markdown",
        "value": "Display a spinner to indicate a loading state."
      },
      "attributes": [
        {
          "name": "light",
          "description": "Light version of the spinner."
        },
        {
          "name": "size",
          "description": "Size in em."
        }
      ]
    },
    {
      "name": "pn-tab",
      "description": {
        "kind": "markdown",
        "value": "This tab should control a tab panel.\nUse the `ariacontrols` and `tabid` props to connect the tab with the tab panel.\nThe tab panel should in turn have `aria-labelledby` set to the `tabid` of the tab.\n\nIf you use the `href` prop, the tab will turn into an anchor element instead of a button.\nThis does not required the ariacontrols and tabid props."
      },
      "attributes": [
        {
          "name": "active-tab",
          "description": "Is set by `pn-tablist`, don't use this prop."
        },
        {
          "name": "ariacontrols",
          "description": "Use the ID of the container that this tab controls."
        },
        {
          "name": "href",
          "description": "Turns the tab from a `button` to an `a` element, but only if the `pn-tablist` is inside a `pn-header`."
        },
        {
          "name": "icon",
          "description": "The SVG content of the icon you want to display"
        },
        {
          "name": "label",
          "description": "Set a label for the tab."
        },
        {
          "name": "tabid",
          "description": "Tab ID, use if you want to have the tab container be `aria-labelledby` by this tab."
        },
        {
          "name": "value",
          "description": "This is the value that will be matched with `pn-tablist` value. (required)"
        }
      ]
    },
    {
      "name": "pn-table",
      "description": {
        "kind": "markdown",
        "value": "The `pn-table` component is just a wrapper for your HTML table element.\nYou need to create the markup, but the component will deal with the styling.\n\nWe have a built in class for divs inside table colums called `column-wrapper`.\nThis will line up your content and provide a grid gap."
      },
      "attributes": [
        {
          "name": "bordered",
          "description": "Add border to table."
        },
        {
          "name": "gray",
          "description": "Use the gray variant instead of blue."
        },
        {
          "name": "striped",
          "description": "Make the table striped."
        }
      ]
    },
    {
      "name": "pn-tablist",
      "description": {
        "kind": "markdown",
        "value": "The tablist allows you to create a list with nested `pn-tab` components.\nThese should control the visibility of panel elements on the page.\n\nIf you use the slot name \"menu\" the tablist will adapt to be used inside of\na `pn-header` component. This also allows the pn-tabs to use the `href` prop."
      },
      "attributes": [
        {
          "name": "label",
          "description": "Give the tablist a name for screenreaders."
        },
        {
          "name": "language",
          "description": "Manually set the language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "small",
          "description": "Make the tablist smaller"
        },
        {
          "name": "stackedicons",
          "description": "Icons are stacked vertically instead of the default rows"
        },
        {
          "name": "value",
          "description": "The value of the tab that is currently active, each `<pn-tab value=\"example-value\">` also expects a unique value"
        }
      ]
    },
    {
      "name": "pn-tag",
      "description": {
        "kind": "markdown",
        "value": "The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status."
      },
      "attributes": [
        {
          "name": "appearance",
          "description": "Set tag appearance: `discrete`, `positive`, `warning` & `error`.",
          "values": [
            {
              "name": "discrete"
            },
            {
              "name": "error"
            },
            {
              "name": "positive"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "dark",
          "description": "Set darker background-color on the tag.\n\nThis is intended for better tag visibility on colored background."
        },
        {
          "name": "icon",
          "description": "Select icon from out `pn-design-assets` list. Works with any SVG content.\n\n**Please note**: Can not be used with the `xsmall` prop due to the small size."
        },
        {
          "name": "label",
          "description": "The label of the tag."
        },
        {
          "name": "large",
          "description": "Set larger tag."
        },
        {
          "name": "small",
          "description": "Set smaller tag."
        },
        {
          "name": "xsmall",
          "description": "Set extra small tag."
        }
      ]
    },
    {
      "name": "pn-text-link",
      "description": {
        "kind": "markdown",
        "value": "The `pn-text-link` is a styled `a` element with some extra functionality built in. Such as `icon` and `light` support."
      },
      "attributes": [
        {
          "name": "download",
          "description": "Treat the link as a download link."
        },
        {
          "name": "href",
          "description": "The URL string."
        },
        {
          "name": "hreflang",
          "description": "Set the hreflang of the URL destination."
        },
        {
          "name": "icon",
          "description": "SVG content of the icon."
        },
        {
          "name": "label",
          "description": "The link text."
        },
        {
          "name": "left-icon",
          "description": "Align the icon on the left."
        },
        {
          "name": "light",
          "description": "Use the light version of the link."
        },
        {
          "name": "linkid",
          "description": "Set a unique html ID of the a element."
        },
        {
          "name": "media",
          "description": "Link media."
        },
        {
          "name": "referrerpolicy",
          "description": "Set referrerpolicy on the link.",
          "values": [
            {
              "name": "no-referrer"
            },
            {
              "name": "no-referrer-when-downgrade"
            },
            {
              "name": "origin"
            },
            {
              "name": "origin-when-cross-origin"
            },
            {
              "name": "same-origin"
            },
            {
              "name": "strict-origin"
            },
            {
              "name": "strict-origin-when-cross-origin"
            },
            {
              "name": "unsafe-url"
            }
          ]
        },
        {
          "name": "rel",
          "description": "Set the rel of the link."
        },
        {
          "name": "target",
          "description": "Set the target of the link."
        }
      ]
    },
    {
      "name": "pn-textarea",
      "description": {
        "kind": "markdown",
        "value": "The `pn-textarea` is built with a native `textarea`.\nThis means you can use native events to listen to the input."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": "Allow the browser to autocomplete the textarea."
        },
        {
          "name": "cols",
          "description": "Set the col count for the textarea."
        },
        {
          "name": "compact",
          "description": "Use the compact label variant."
        },
        {
          "name": "disabled",
          "description": "Disable the textarea."
        },
        {
          "name": "error",
          "description": "Same as `invalid`, but will display the string as an error message under the textarea."
        },
        {
          "name": "form",
          "description": "Set the associated form."
        },
        {
          "name": "helpertext",
          "description": "Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string"
        },
        {
          "name": "invalid",
          "description": "Set the textarea as `invalid`, will make the Label and focus rings red."
        },
        {
          "name": "label",
          "description": "The label describing the textarea."
        },
        {
          "name": "maxlength",
          "description": "The maximum number of characters the user should be able to add, also adds a visible counter."
        },
        {
          "name": "name",
          "description": "HTML name."
        },
        {
          "name": "placeholder",
          "description": "Placeholder for the textarea."
        },
        {
          "name": "readonly",
          "description": "Make the textarea readonly."
        },
        {
          "name": "required",
          "description": "Make the textarea required."
        },
        {
          "name": "resize",
          "description": "Allow the user to resize the textarea vertically. Handle width in your own layout."
        },
        {
          "name": "rows",
          "description": "Set the row count for the textarea."
        },
        {
          "name": "spellcheck",
          "description": "Allow the browser to spellcheck the textarea."
        },
        {
          "name": "textareaid",
          "description": "A unique ID connecting the element to the label."
        },
        {
          "name": "valid",
          "description": "Set the textarea as `valid`, will make the Label and focus rings green."
        },
        {
          "name": "value",
          "description": "The textarea content, do not provide slotted content."
        },
        {
          "name": "wrap",
          "description": "Set the wrap control."
        }
      ]
    },
    {
      "name": "pn-tile",
      "description": {
        "kind": "markdown",
        "value": "The `pn-tile` is a navigational element that is intended to be accompanied by an illustration.\n\nIt is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set,\nso you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible."
      },
      "attributes": [
        {
          "name": "horizontal",
          "description": "Use the horizontal tile."
        },
        {
          "name": "icon",
          "description": "The SVG content of a decorative icon."
        },
        {
          "name": "illustration",
          "description": "The SVG content of an illustration."
        },
        {
          "name": "label",
          "description": "Label of the link. This is required for the component to be accessible."
        },
        {
          "name": "rel",
          "description": "The rel attribute of the link."
        },
        {
          "name": "target",
          "description": "The target attribute of the link."
        },
        {
          "name": "text",
          "description": "Set a string of text for the tile. Same as the default slot."
        },
        {
          "name": "url",
          "description": "The link of the tile. This is required for the component to be accessible."
        }
      ]
    },
    {
      "name": "pn-toast",
      "description": {
        "kind": "markdown",
        "value": "This component is able to fill many roles of a classic toast.\nIt has 4 different colors, a temporary state, hide button, icon and illustration support.\n\nThe `pn-toast` will expand to its parent containers full width.\nEither limit the parent width or set a CSS rule to your specific width if needed."
      },
      "attributes": [
        {
          "name": "appearance",
          "description": "Default color is blue, you also have the option of success (green), warning (orange) and error (red).",
          "values": [
            {
              "name": "error"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "closable",
          "description": "Show close button."
        },
        {
          "name": "heading",
          "description": "Set a title for the toast. Requires the `text` prop in order to work."
        },
        {
          "name": "hide",
          "description": "Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own."
        },
        {
          "name": "icon",
          "description": "Set an SVG icon."
        },
        {
          "name": "illustration",
          "description": "Set an SVG illustration."
        },
        {
          "name": "language",
          "description": "Manually set the language, only needed if the `closable` prop is enabled.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "temporary",
          "description": "This will apply a shadow and border to the toast."
        },
        {
          "name": "text",
          "description": "Set a paragraph of text for the toast."
        },
        {
          "name": "toast-id",
          "description": "Give the toast a HTML ID."
        }
      ]
    },
    {
      "name": "pn-toggle-switch",
      "description": {
        "kind": "markdown",
        "value": "The `pn-toggle-switch` is built with a native `input[type=\"checkbox\"]` in the background.\nThis means you can use native events to listen to the changes."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Precheck the toggle."
        },
        {
          "name": "disabled",
          "description": "Disable the toggle."
        },
        {
          "name": "helpertext",
          "description": "Provide a helpertext for the toggle switch."
        },
        {
          "name": "label",
          "description": "A label for the toggle switch."
        },
        {
          "name": "large",
          "description": "Make the toggle larger."
        },
        {
          "name": "loading",
          "description": "Set the loading state."
        },
        {
          "name": "name",
          "description": "HTML toggle name."
        },
        {
          "name": "small",
          "description": "Make the toggle smaller."
        },
        {
          "name": "toggleid",
          "description": "Set a unique HTML id."
        },
        {
          "name": "value",
          "description": "HTML toggle value."
        }
      ]
    },
    {
      "name": "pn-tooltip",
      "description": {
        "kind": "markdown",
        "value": "The `pn-tooltip` can display slotted HTML content or a text `string` with the `tooltip` prop.\n\nRemember that the component is techincally a `button` element, don't put any HTML content that would be out of place in a regular button\n(no headlines, other input elements, etc...)."
      },
      "attributes": [
        {
          "name": "light",
          "description": "Apply the light color if you use a dark background."
        },
        {
          "name": "tooltip",
          "description": "Overrides the slotted content to create a small tooltip instead."
        },
        {
          "name": "warning",
          "description": "Apply the warning color and change the icon to `!`."
        }
      ]
    },
    {
      "name": "pn-wizard",
      "description": {
        "kind": "markdown",
        "value": "The wizard component lets you highlight areas on the page\nthat is accompanied with a modal for user guidance.\n\nEither use the label & helpertext props to set a title and description,\nor use the default slot to add custom HTML content.\n\nThe steps prop takes an array of querySelectors that the wizard will highlight in order.\nSet the step prop to start the wizard at a specific step (0-indexed). -1 closes the wizard."
      },
      "attributes": [
        {
          "name": "display-overflow",
          "description": "By default, the component will hide the overflow on the body element when active.\nYou may wish to disable this if your HTML/CSS structure is not compatible with this behavior."
        },
        {
          "name": "helpertext",
          "description": "Set a helpertext for the wizard."
        },
        {
          "name": "hide-back",
          "description": "Hide the back button."
        },
        {
          "name": "hide-finish",
          "description": "Hide the finish button."
        },
        {
          "name": "hide-next",
          "description": "Hide the next button."
        },
        {
          "name": "label",
          "description": "Set a title for the wizard."
        },
        {
          "name": "label-back",
          "description": "Set a custom label for the back button."
        },
        {
          "name": "label-finish",
          "description": "Set a custom label for the finish button."
        },
        {
          "name": "label-next",
          "description": "Set a custom label for the next button."
        },
        {
          "name": "language",
          "description": "Manually set the language.",
          "values": [
            {
              "name": "da"
            },
            {
              "name": "en"
            },
            {
              "name": "fi"
            },
            {
              "name": "no"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "pn-id",
          "description": "Set a custom HTML id."
        },
        {
          "name": "progress",
          "description": "Choose to display one of 2 built in progress steppers.\n- `dots`: The pn-progress-stepper with the `dots` prop.\n- `text`: simple text indicator \"current/total\"",
          "values": [
            {
              "name": "dots"
            },
            {
              "name": "text"
            }
          ]
        },
        {
          "name": "scroll-block",
          "description": "Choose where the scrolling will focus on the highlighted elements.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "nearest"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "step",
          "description": "Assign the current step.\nAny value above -1 is valid and will start the wizard."
        }
      ]
    },
    {
      "name": "pn-zipcode-search",
      "description": {
        "kind": "markdown",
        "value": "Check the delivery date for letters, newspapers and direct mail that are distributed every second day."
      },
      "attributes": [
        {
          "name": "language",
          "description": "The `language` property will be prioritized before the pnTopbar language.",
          "values": [
            {
              "name": "en"
            },
            {
              "name": "sv"
            }
          ]
        },
        {
          "name": "value",
          "description": "Set a pre initialized value."
        }
      ]
    }
  ]
}