@duetds/components 4.30.1 → 4.31.0

package/lib/html.html-data.json

@@ -0,0 +1,4489 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "duet-alert",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Alert\nname: duet-alert\nstatus: ready\nreleased: 1.0.50\ncategory: Messaging\nexample_height: 320px\naccessibility: Keyboard, Screen Reader\ninternationalization: Supported\nintro: Informs user about important changes or conditions in the interface. Use\n  this component if you need to capture user’s attention in a prominent way.\nplatforms: Web only\nssr: Supported\nexamples:\n  - name: alert\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Alert in different styles\n    file: fixtures/duet-alert_alert_in_different_styles.html\n  - name: Alert with icon\n    file: fixtures/duet-alert_alert_with_icon.html\n  - name: Dismissible alert\n    file: fixtures/duet-alert_dismissible_alert.html\n  - name: Alert as a toast message\n    file: fixtures/duet-alert_alert_as_a_toast_message.html\n  - name: Alert with left aligned content\n    file: fixtures/duet-alert_alert_with_left_aligned_content.html\n  - name: Alert as a toast message with auto dismiss\n    file: fixtures/duet-alert_alert_as_a_toast_message_with_auto_dismiss.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label",
+          "description": "Adds accessible label for the dismissible alert close button."
+        },
+        {
+          "name": "accessible-label-default",
+          "description": "Property to change languageDefaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabel when needed"
+        },
+        {
+          "name": "announcements",
+          "description": "Enable or disabled announcements by assistive technologies."
+        },
+        {
+          "name": "auto-dismiss",
+          "description": "Time in milliseconds which is waited before auto dismiss."
+        },
+        {
+          "name": "dismissible",
+          "description": "Should a button be rendered to dismiss the alert?"
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display to the left of the content."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "padding",
+          "description": "Controls the padding of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the card.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the alert.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-alert/duet-alert.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-badge",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Badge\nname: duet-badge\nstatus: ready\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 3.2.1\nssr: Supported\ncategory: Text\nintro: Badges are used to inform users of the status of an object or of an\n  action that’s been taken.\nexamples:\n  - name: badge\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default badge\n    file: fixtures/duet-badge_default_badge.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the badge.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the alert.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-badge/duet-badge.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-button",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Button\nname: duet-button\nstatus: ready\nreleased: 1.0.15\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Actions\nintro: Buttons are used for interface actions. They default to appearance that\n  has dark text with gray border. Primary style should be used only once per\n  view for main call-to-action.\ndescription: Users generally expect buttons to submit data or take action, and\n  for links to navigate. If navigation is required for the button, use the url\n  prop. The control will then output an anchor styled as a button, instead of an\n  HTML button.\nplatforms: Web only\nexamples:\n  - name: button\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Primary button\n    file: fixtures/duet-button_primary_button.html\n  - name: Button with icon on left\n    file: fixtures/duet-button_button_with_icon_on_left.html\n  - name: Button with icon on right\n    file: fixtures/duet-button_button_with_icon_on_right.html\n  - name: Next and previous buttons\n    file: fixtures/duet-button_next_and_previous_buttons.html\n  - name: Loading button\n    file: fixtures/duet-button_loading_button.html\n  - name: Expand button\n    file: fixtures/duet-button_expand_button.html\n  - name: Secondary button\n    file: fixtures/duet-button_secondary_button.html\n  - name: Default button\n    file: fixtures/duet-button_default_button.html\n  - name: Negative button\n    file: fixtures/duet-button_negative_button.html\n  - name: Destructive button\n    file: fixtures/duet-button_destructive_button.html\n  - name: Disabled button\n    file: fixtures/duet-button_disabled_button.html\n  - name: Plain button\n    file: fixtures/duet-button_plain_button.html\n  - name: Show more button\n    file: fixtures/duet-button_show_more_button.html\n  - name: Small buttons\n    file: fixtures/duet-button_small_buttons.html\n  - name: Time selector using small buttons\n    file: fixtures/duet-button_time_selector_using_small_buttons.html\n  - name: Button in a form\n    file: fixtures/duet-button_button_in_a_form.html\n  - name: Button as a link\n    file: fixtures/duet-button_button_as_a_link.html\n  - name: Button with external link\n    file: fixtures/duet-button_button_with_external_link.html  \n  - name: All Button variations\n    file: fixtures/duet-button_all_negative_buttons.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this property to add an aria-controls attribute to the button. Use\nthe attribute to point to the unique id of the content that the button manages."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the button."
+        },
+        {
+          "name": "accessible-expanded",
+          "description": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+        },
+        {
+          "name": "accessible-label",
+          "description": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+        },
+        {
+          "name": "accessible-label-external",
+          "description": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+        },
+        {
+          "name": "accessible-label-external-default",
+          "description": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the button."
+        },
+        {
+          "name": "accessible-pressed",
+          "description": "Tells screen reader the element is pressed."
+        },
+        {
+          "name": "color",
+          "description": "Custom color to be used for text, as a design token entered in camelCase or\nkebab-case. Example: \"color-primary\"."
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the button component disabled. This prevents users from being able to\ninteract with the button, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the button to fill 100% of the container width."
+        },
+        {
+          "name": "external",
+          "description": "Forces URL to open in a new browser tab. Used together with URL prop."
+        },
+        {
+          "name": "fixed",
+          "description": "Keep the button fixed width even on mobile viewports."
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display to the left of the button content.\nThis is ignored/overridden when button is used as an external link."
+        },
+        {
+          "name": "icon-only",
+          "description": "Whether this button should use styles meant for displaying just an icon."
+        },
+        {
+          "name": "icon-right",
+          "description": "Show icon on the right side of the button content."
+        },
+        {
+          "name": "icon-size",
+          "description": "Icon size.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "medium-small"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the button. Please note that with this particular\ncomponent this id is added inside Shadow DOM. If you need an id on the html\nelement, use regular id attribute instead."
+        },
+        {
+          "name": "language",
+          "description": ""
+        },
+        {
+          "name": "loading",
+          "description": "Loading state of the button"
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "The name of the button, which gets paired with the button's value when submitted as part of a form.\nCorresponds with the native HTML name attribute."
+        },
+        {
+          "name": "negative",
+          "description": "Negative variation, can be combined with Variation to produce negative versions"
+        },
+        {
+          "name": "padding",
+          "description": "Controls the padding of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Button’s size.",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "submit",
+          "description": "Allows the button to submit a form."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the button.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "url",
+          "description": "A destination to link to, rendered in the href attribute of a link."
+        },
+        {
+          "name": "value",
+          "description": "The value of the button, which gets paired with the button's name when submitted as part of a form.\nCorresponds with the native HTML value attribute."
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the button.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "destructive"
+            },
+            {
+              "name": "negative"
+            },
+            {
+              "name": "plain"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            }
+          ]
+        },
+        {
+          "name": "wrapping",
+          "description": "Controls the text wrapping.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-button/duet-button.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-caption",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Caption\nname: duet-caption\nstatus: ready\nreleased: 2.6.16\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Text\nintro: Captions are used as brief explanations accompanying an illustration,\n  form element, or similar. Caption text is smaller than the recommended size\n  for general reading.\nexamples:\n  - name: caption\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default caption\n    file: fixtures/duet-caption_default_caption.html\n  - name: Associating caption with an input\n    file: fixtures/duet-caption_associating_caption_with_an_input.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "selected",
+          "description": "Selected state of the caption. Used inside Choice component."
+        },
+        {
+          "name": "size",
+          "description": "Controls the size of the caption.",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the caption.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-caption/duet-caption.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-card",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Card\nname: duet-card\nstatus: ready\nreleased: 1.4.1\ninternationalization: Supported\nssr: Supported\ncategory: Structure\nintro: Cards are shadowed surfaces that display content and actions on a single\n  topic. They should be easy to scan for relevant and actionable information.\ndescription: The optional heading property gives the Card a top level heading.\n  This can help with readability and provide structure to screen reader users.\n  This component also allows you to customize it’s padding and includes an\n  expand and collapse functionality.\nplatforms: Web only\ntags:\n  - docs-components\nexample_height: 380px\nexamples:\n  - name: card\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Card with a heading\n    file: fixtures/duet-card_card_with_a_heading.html\n  - name: Card without a heading\n    file: fixtures/duet-card_card_without_a_heading.html\n  - name: Card with an image\n    file: fixtures/duet-card_card_with_an_image.html\n  - name: Collapsible cards\n    file: fixtures/duet-card_collapsible_cards.html\n  - name: Card with secondary heading\n    file: fixtures/duet-card_card_with_secondary_heading.html\n  - name: Card using info variation\n    file: fixtures/duet-card_card_using_info_variation.html\n  - name: Card using color token as background\n    file: fixtures/duet-card_card_using_color_token_as_background.html\n  - name: Cards with footer\n    file: fixtures/duet-card_cards_with_footer.html\n  - name: Card with large padding and icon\n    file: fixtures/duet-card_card_with_large_padding_and_icon.html\n  - name: Card with h1 level heading\n    file: fixtures/duet-card_card_with_h1_level_heading.html\n  - name: Cards with x-small padding\n    file: fixtures/duet-card_cards_with_x-small_padding.html\n  - name: Promotional card\n    file: fixtures/duet-card_promotional_card.html\n  - name: Promotional card 2\n    file: fixtures/duet-card_promotional_card_2.html\n  - name: Promotional card with empty grid item on right\n    file: fixtures/duet-card_promotional_card_with_empty_grid_item_on_right.html\n  - name: Insurance offer card\n    file: fixtures/duet-card_insurance_offer_card.html  \n  - name: Insurance offer card with secondary heading\n    file: fixtures/duet-card_insurance_offer_card_with_secondary_headline.html\n  - name: Card with list inside\n    file: fixtures/duet-card_card_with_list_inside.html\n\n---\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label",
+          "description": "Adds accessible label for the card that is only shown for screen readers.\nTypically, this label text is used when the whole card is made clickable to\ncreate a label text for users who use assistive technology."
+        },
+        {
+          "name": "background",
+          "description": "Custom color to be used for the card background, as a design token entered in\ncamelCase or kebab-case. Example: \"primary\"."
+        },
+        {
+          "name": "collapsible",
+          "description": "Makes the card expand and collapse when the collapse/expand arrow in the\nheading is clicked or tapped. This option only works together with the\nheading option, meaning that you also need to set the heading for this\nfunctionality to show up."
+        },
+        {
+          "name": "heading",
+          "description": "The content for the card heading. If empty, both heading and collapse\nfunctionality will be hidden."
+        },
+        {
+          "name": "heading-level",
+          "description": "The actual heading level used for the heading in html markup. This setting\nexists for accessibility reasons. It doesn’t change the style visually.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            }
+          ]
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display on the left side of heading. Example: \"form-location\""
+        },
+        {
+          "name": "image",
+          "description": "Image to display in the card. The image aspect ratio can be anything as\nimages are resized to fit 100% width of the card. Example:\n\"https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg\""
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "If the card is collapsible, this property controls whether the card is open or closed."
+        },
+        {
+          "name": "padding",
+          "description": "The padding for the card. Please note that the card padding values don’t directly\ntranslate to similar space token names, but instead the card uses it’s own\nderived defaults.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "x-small"
+            }
+          ]
+        },
+        {
+          "name": "secondary-heading",
+          "description": "Additional content for the card heading. If empty, both heading and collapse\nfunctionality will be hidden."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the card.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "url",
+          "description": "A destination to link to, rendered in the href attribute of a link."
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the card.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "plain"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-card/duet-card.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-checkbox",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Checkbox\nname: duet-checkbox\nstatus: ready\nreleased: 1.3.0\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\ncategory: Forms\nssr: Supported\nintro: Checkboxes are used to let a user choose one or more options from a\n  limited number of options.\nexamples:\n  - name: checkbox\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Checked checkbox\n    file: fixtures/duet-checkbox_checked_checkbox.html\n  - name: Unchecked checkbox\n    file: fixtures/duet-checkbox_unchecked_checkbox.html\n  - name: Disabled checkbox\n    file: fixtures/duet-checkbox_disabled_checkbox.html\n  - name: Multiple checkboxes\n    file: fixtures/duet-checkbox_multiple_checkboxes.html\n  - name: Responsive checkbox layout\n    file: fixtures/duet-checkbox_responsive_checkbox_layout.html\n  - name: Checkbox and label with links inside\n    file: fixtures/duet-checkbox_checkbox_and_label_with_links_inside.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to indicate\nthe id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the checkbox."
+        },
+        {
+          "name": "accessible-index",
+          "description": "Control the tabindex of checkbox. In most cases this should never be used! It\nexists only for Duet’s internal needs."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the checkbox."
+        },
+        {
+          "name": "checked",
+          "description": "Check state of the checkbox."
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the checkbox component disabled. This prevents users from being able to\ninteract with the checkbox, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the checkbox."
+        },
+        {
+          "name": "label",
+          "description": "Label for the checkbox"
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name of the checkbox."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the input."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the checkbox.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the checkbox does not mean if it's checked or not, use the checked\nproperty for that."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-choice",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Choice\nname: duet-choice\nstatus: ready\nreleased: 2.6.11\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Forms\nintro: Choice buttons allow selection of a single or multiple options from a set\n  of predefined options. They are a good alternative to radio buttons,\n  checkboxes, and select menus.\ndescription: You can set the type of the choice to be either a radio or a\n  checkbox. Using radio type allows you to use Choice component inside Duet’s <a\n  href=\"/components/choice-group/\">Choice Group</a>.\nplatforms: Web only\ntags:\n  - docs-components\nexample_height: 350px\nexamples:\n  - name: choice\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Radio button style choices\n    file: fixtures/duet-choice_radio_button_style_choices.html\n  - name: Checkbox style choices\n    file: fixtures/duet-choice_checkbox_style_choices.html\n  - name: Vertical choices list\n    file: fixtures/duet-choice_vertical_choices_list.html\n  - name: Collapsible choices\n    file: fixtures/duet-choice_collapsible_choices.html\n  - name: Disabled choices\n    file: fixtures/duet-choice_disabled_choices.html\n  - name: Choices with captions\n    file: fixtures/duet-choice_choices_with_captions.html\n  - name: Choices with info\n    file: fixtures/duet-choice_choices_with_info.html\n  - name: Choices with additional content\n    file: fixtures/duet-choice_choices_with_additional_content.html\n  - name: Choices with external tooltips\n    file: fixtures/duet-choice_choices_with_external_tooltips.html\n  - name: Marking choices as required\n    file: fixtures/duet-choice_marking_choices_as_required.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the choice."
+        },
+        {
+          "name": "accessible-label-info-button",
+          "description": "Accessible label that is read for screen reader users in the info toggle trigger button.\nNot visible for normal users."
+        },
+        {
+          "name": "accessible-label-info-default",
+          "description": "Property to change accessibleLabelInfoButton defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelInfoButton when needed"
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the choice."
+        },
+        {
+          "name": "caption",
+          "description": "Additional caption to show inside the label of the choice button."
+        },
+        {
+          "name": "checked",
+          "description": "Checked state of the choice button."
+        },
+        {
+          "name": "collapsible",
+          "description": "Makes the choice button open a new section underneath it when clicked or\ntapped. This new section can be used to show more options related to this\nchoice. Please note that this feature can’t be used together with the \"info\"\nfunctionality and that it only accepts plain dom nodes (no shadow dom elements\nsuch as duet-paragraph can be used as this will break accessibility)"
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the choice component disabled. This prevents users from being able to\ninteract with the choice, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the choice button to fill 100% of the container width."
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display to the left of the choice button label."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the choice button."
+        },
+        {
+          "name": "label",
+          "description": "Label for the choice button."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name attribute of the html input that the Choice component controls."
+        },
+        {
+          "name": "padding",
+          "description": "Controls the padding of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the choice.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Type of the choice button. You can set the type of the choice to be either\n“radio” or “checkbox”. Depending on this selection we convey the selection\ntype to assistive technologies as well. When type “radio” is chosen it is\nrequired to place the choices inside Choice Group component.",
+          "values": [
+            {
+              "name": "checkbox"
+            },
+            {
+              "name": "radio"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the html input that the Choice component controls."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-choice/duet-choice.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-choice-group",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Choice Group\nname: duet-choice-group\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 2.8.1\nssr: Supported\ncategory: Forms\nintro: Choice group allows user to select one choice from a set of choices. Use\n  value on group to set the selected choice. For more usage examples, please see\n  <a href=\"/components/choice/\">Choice component</a>.\ndescription: Choice Group provides the exact same API and properties as <a\n  href=\"/components/radio-group/\">Radio Group</a>, but optimized for Choice\n  component usage.\nexample_height: 360px\ntags:\n  - docs-components\nexamples:\n  - name: choice group\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Horizontal choice group\n    file: fixtures/duet-choice-group_horizontal_choice_group.html\n  - name: Vertical choice group\n    file: fixtures/duet-choice-group_vertical_choice_group.html\n  - name: Nested choice and radio groups\n    file: fixtures/duet-choice-group_nested_choice_and_radio_groups.html\n  - name: Disabled choice group\n    file: fixtures/duet-choice-group_disabled_choice_group.html\n  - name: Choice group with a tooltip\n    file: fixtures/duet-choice-group_choice_group_with_a_tooltip.html\n  - name: Choice group with a caption and a tooltip\n    file: fixtures/duet-choice-group_choice_group_with_a_caption_and_a_tooltip.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "caption",
+          "description": "Additional caption to show inside the label of the choice group."
+        },
+        {
+          "name": "direction",
+          "description": "Direction of the choice group.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Determines, whether the control is disabled or not."
+        },
+        {
+          "name": "error",
+          "description": "Display choice group in error state along with an error message."
+        },
+        {
+          "name": "label",
+          "description": "Legend displayed for the choice buttons in this group."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name for the choice buttons within this group. **This must be unique amongst all other inputs.**"
+        },
+        {
+          "name": "responsive",
+          "description": "Enable or disable the automatic responsive behaviour of the choice group\ncomponent when horizontal setting is used. Setting this option to \"true\"\nmakes sure that contents are stacked vertically on mobile."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the choice group.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip to display next to the label of the choice group."
+        },
+        {
+          "name": "tooltip-direction",
+          "description": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the selected choice button."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-choice-group/duet-choice-group.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-collapsible",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Collapsible\nname: duet-collapsible\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 3.4.13\nssr: Supported\nintro: Collapsible is a disclosure component used to reveal additional content.\n  It should contain a heading, followed by any additional content that is\n  revealed on click.\ntags:\n  - docs-components\nexamples:\n  - name: collapsible\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic collapsible usage\n    file: fixtures/duet-collapsible_basic_collapsible_usage.html\n  - name: Multiple collapsible elements\n    file: fixtures/duet-collapsible_multiple_collapsible_elements.html\n  - name: Collapsible that is initially open\n    file: fixtures/duet-collapsible_collapsible_that_is_initially_open.html\n  - name: Collapsible using normal font-weight for heading\n    file: fixtures/duet-collapsible_collapsible_using_normal_font-weight_for_heading.html\n  - name: Collapsible using sizes\n    file: fixtures/duet-collapsible_collapsible_using_sizes.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "heading",
+          "description": "The content for the collapsible heading."
+        },
+        {
+          "name": "heading-level",
+          "description": "The actual heading level used for the heading in html markup. This setting\nexists for accessibility reasons. It doesn’t change the style visually.\nonly variations of h1-h6 area accepted",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            }
+          ]
+        },
+        {
+          "name": "heading-size",
+          "description": "Custom headingSize to be used for font size of heading, as a design token entered\nin kebab-case x-small -> font-size-x-small.\nExample:\n# 12px (0.75rem)  ------  +2px   (x-small)\n# 14px (0.875rem) ------  +2px   (small)\n# 16px (1rem)     ------  +2px   (medium)\n# 20px (1.25rem)  ------  +4px   (large)\n# 24px (1.5rem)   ------  +4px   (x-large)\n# 36px (2.25rem)  ------  +12px  (xx-large)\n# 48px (3rem)     ------  +12px  (xxx-large)\n# 72px (4.5rem)   ------  +24px  (xxxx-large)",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "x-small"
+            },
+            {
+              "name": "xx-large"
+            },
+            {
+              "name": "xxx-large"
+            },
+            {
+              "name": "xxxx-large"
+            }
+          ]
+        },
+        {
+          "name": "heading-weight",
+          "description": "The font weight of the heading",
+          "values": [
+            {
+              "name": "normal"
+            },
+            {
+              "name": "semibold"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "Is the component expanded or collapsed."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the collapsible.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-cookie-consent",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Cookie Consent\nname: duet-cookie-consent\nstatus: ready\nreleased: 4.2.0\ncategory: Messaging\naccessibility: Keyboard, Screen Reader\ninternationalization: Supported\nintro: Cookie consent component informs users about cookie usage. This banner is\n  shown when they visit a website or an application for the first time.\nplatforms: Web only\nssr: Supported\nexamples:\n  - name: cookie consent\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default cookie consent\n    file: fixtures/duet-cookie-consent_default_cookie_consent.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label",
+          "description": "Adds accessible label for the cookie consent ok button."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the cookie consent banner.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-date-picker",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Date Picker\nname: duet-date-picker\nstatus: ready\nplatforms: Web only\nssr: Supported\nreleased: 4.4.2\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nintro: Date Picker component lets user pick a single date or a date range using\n  a special calendar like date picker interface. There’s also <a\n  href=\"https://github.com/duetds/date-picker\">open source version</a> of this\n  component available.\ndescription: \"Date Picker allows you to set a minimum and a maximum allowed\n  date. These settings can be combined or used alone, depending on the need.\n  Please note that the date values must be passed in IS0-8601 format:\n  <code>YYYY-MM-DD</code>.\"\nexample_height: 540px\nexamples:\n  - name: date-picker\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic date picker usage\n    file: fixtures/duet-date-picker_basic_date_picker_usage.html\n  - name: Date picker using min and max values\n    file: fixtures/duet-date-picker_date_picker_using_min_and_max_values.html\n  - name: Date picker with validation error messages\n    file: fixtures/duet-date-picker_date_picker_with_validation_error_messages.html\n  - name: Date range using date picker\n    file: fixtures/duet-date-picker_date_range_using_date_picker.html\n  - name: Date picker using expand property\n    file: fixtures/duet-date-picker_date_picker_using_expand_property.html\n  - name: Disabled date picker\n    file: fixtures/duet-date-picker_disabled_date_picker.html\n  - name: Date picker with an error\n    file: fixtures/duet-date-picker_date_picker_with_an_error.html\n  - name: Date picker with a tooltip\n    file: fixtures/duet-date-picker_date_picker_with_a_tooltip.html\n  - name: Date picker using english\n    file: fixtures/duet-date-picker_date_picker_using_english.html\n  - name: Date picker using swedish\n    file: fixtures/duet-date-picker_date_picker_using_swedish.html\n  - name: Showing the date picker using the provided method\n    file: fixtures/duet-date-picker_showing_the_date_picker_using_the_provided_method.html\n  - name: Showing the date picker with caption and echoing placeholder\n    file: fixtures/duet-date-picker_caption_and_echoing_placeholder.html \ntags:\n  - docs-components\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the input."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the input."
+        },
+        {
+          "name": "caption",
+          "description": "Caption (underneath label) that can be set as a way of adding extra information"
+        },
+        {
+          "name": "direction",
+          "description": "Forces the opening direction of the calendar modal to be always left or right.\nThis setting can be useful when the input is smaller than the opening date picker\nwould be as by default the picker always opens towards right.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the date picker input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "echo-placeholder",
+          "description": "If form input field has a placeholder text, and user types anything (causing the text to dissapear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
+        },
+        {
+          "name": "error",
+          "description": "Display the date picker input in error state along with an error message."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the date picker input to fill 100% of the container width."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the date picker input."
+        },
+        {
+          "name": "label",
+          "description": "Label for the date picker input."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the month/year/day\nnames and button labels as well as all screen reader labels.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "max",
+          "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD\nThis setting can be used alone or together with the min property."
+        },
+        {
+          "name": "min",
+          "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
+        },
+        {
+          "name": "name",
+          "description": "Name of the date picker input."
+        },
+        {
+          "name": "placeholder",
+          "description": "Hint text to display before the user types into the date picker input."
+        },
+        {
+          "name": "placeholder-default",
+          "description": "Placeholder defaults"
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the date picker input."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the component.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip to display next to the label of the date picker input."
+        },
+        {
+          "name": "tooltip-direction",
+          "description": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Date value. Must be in IS0-8601 format: YYYY-MM-DD"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-divider",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Divider\nname: duet-divider\nstatus: ready\nreleased: 1.0.49\ncategory: Structure\nintro: Dividers are used to represent thematic breaks between paragraph-level\n  elements. Visually, they look like horizontal rules or lines.\nplatforms: Web only\nssr: Supported\nexamples:\n  - name: divider\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default divider\n    file: fixtures/duet-divider_default_divider.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the divider.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-divider/duet-divider.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-empty-state",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Empty State\nname: duet-empty-state\nstatus: new\nreleased: 4.6.2\ncategory: Structure\nintro: Empty state component is used when another component has no items or data\n  to show. Empty state provides explanation or guidance to help user progress.\nexample_height: 350px\nplatforms: Web only\nssr: Supported\nexamples:\n  - name: empty state\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default empty state\n    file: fixtures/duet-empty-state_default_empty_state.html\n  - name: Empty state with guidance\n    file: fixtures/duet-empty-state_empty_state_with_guidance.html\n  - name: Empty state with only icon and text\n    file: fixtures/duet-empty-state_empty_state_with_only_icon_and_text.html\n  - name: Empty state with paragraph and button\n    file: fixtures/duet-empty-state_empty_state_with_paragraph_and_button.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Icon shown in the empty state component."
+        },
+        {
+          "name": "size",
+          "description": "The size of the empty state message.",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the empty state component.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-empty-state/duet-empty-state.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-fieldset",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Fieldset\nname: duet-fieldset\nstatus: new\nplatforms: Web only\naccessibility: Keyboard, Screen Reader\nreleased: 4.17.0\nexample_height: 360px\ninternationalization: Supported\nssr: Supported\ncategory: Forms\nintro: Fieldset is used to group together several related form components and a\n  label. The usage of this component helps to make these groups accessible for\n  assistive technologies.\ndescription: Fieldset consists of a mandatory label, and optionally a caption,\n  tooltip, and error. It can be used to group together buttons, form fields,\n  checkboxes, and similar components.\nexamples:\n  - name: fieldset\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic fieldset\n    file: fixtures/duet-fieldset_basic_fieldset.html\n  - name: Fieldset with caption and tooltip\n    file: fixtures/duet-fieldset_fieldset_with_caption_and_tooltip.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "caption",
+          "description": "Additional caption to show next to the label."
+        },
+        {
+          "name": "error",
+          "description": "An error message to be shown next to the label."
+        },
+        {
+          "name": "label",
+          "description": "Label/legend displayed for the fieldset."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the fieldset.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-fieldset/duet-fieldset.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-footer",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Footer\nname: duet-footer\nstatus: ready\nplatforms: Web only\naccessibility: Keyboard, Screen Reader\nreleased: 2.4.6\nexample_height: 360px\ninternationalization: Supported\nssr: Supported\ncategory: Navigation\nintro: Footer component is used as the global footer for all views. Contains\n  copyright data and links to related documents.\ndescription: Footer contains your application’s secondary menu items that\n  perform an action when clicked. Each action in the footer should navigate to a\n  href or trigger another action like a <a href=\"/components/modal/\">Modal\n  overlay</a>.\nexamples:\n  - name: footer\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default footer\n    file: fixtures/duet-footer_default_footer.html\n  - name: Footer with just logo and menu\n    file: fixtures/duet-footer_footer_with_just_logo_and_menu.html\n  - name: Footer using simple variation\n    file: fixtures/duet-footer_footer_using_simple_variation.html\n  - name: Footer with links that open to a new tab\n    file: fixtures/duet-footer_footer_with_links_that_open_to_a_new_tab.html\n  - name: Passing arrays and objects to Footer as JSON via attributes for SSR support\n    file: fixtures/duet-footer_passing_arrays_and_objects_to_footer_as_json_via_attributes_for_ssr_support.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label-external",
+          "description": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+        },
+        {
+          "name": "accessible-label-external-default",
+          "description": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+        },
+        {
+          "name": "items",
+          "description": "An array of items for the main footer links. Items have to include mandatory\n\"label\", \"href\" and \"icon\" fields to work. Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the logo to match the\nchosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "logo-href",
+          "description": "URL that the logo link points to."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "menu",
+          "description": "An array of  items for the small footer menu. Items have to include mandatory\n\"label\" and \"href\" fields to work. Additionally, you can pass an \"id\" that is\nadded as an HTML identifier for the anchor tag."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the navigation.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the footer.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "simple"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-footer/duet-footer.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-grid",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Grid\nname: duet-grid\nstatus: ready\nreleased: 2.7.0\nplatforms: Web only\naccessibility: N/A\nssr: Supported\ncategory: Structure\nintro: Grid component provides structure for other components using Flexbox\n  based layout system. Grid allows nesting and defining the direction of the\n  content.\ndescription: While the <a href=\"/components/grid-item/\">Grid Item</a> component\n  makes it possible set additional parameters for Grid’s cells, this component\n  can be used without <code>&lt;duet-grid-item/&gt;</code> as well. In that case\n  the direct child elements of Grid will be considered as Grid cells.\nexample_height: 300px\nexamples:\n  - name: grid\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default grid behaviour\n    file: fixtures/duet-grid_default_grid_behaviour.html\n  - name: Grid using center distribution\n    file: fixtures/duet-grid_grid_using_center_distribution.html\n  - name: Grid using right distribution\n    file: fixtures/duet-grid_grid_using_right_distribution.html\n  - name: Grid using space-between distribution\n    file: fixtures/duet-grid_grid_using_space-between_distribution.html\n  - name: Grid using space-around distribution\n    file: fixtures/duet-grid_grid_using_space-around_distribution.html\n  - name: Grid using space-evenly distribution\n    file: fixtures/duet-grid_grid_using_space-evenly_distribution.html\n  - name: Grid using top alignment\n    file: fixtures/duet-grid_grid_using_top_alignment.html\n  - name: Grid using center alignment\n    file: fixtures/duet-grid_grid_using_center_alignment.html\n  - name: Grid using bottom alignment\n    file: fixtures/duet-grid_grid_using_bottom_alignment.html\n  - name: Grid using stretch alignment\n    file: fixtures/duet-grid_grid_using_stretch_alignment.html\n  - name: Grid using baseline alignment\n    file: fixtures/duet-grid_grid_using_baseline_alignment.html\n  - name: Grid where one item takes the remaining space\n    file: fixtures/duet-grid_grid_where_one_item_takes_the_remaining_space.html\n  - name: Grid where one item has fixed side\n    file: fixtures/duet-grid_grid_where_one_item_has_fixed_side.html\n  - name: Grid with same sized responsive items\n    file: fixtures/duet-grid_grid_with_same_sized_responsive_items.html\n  - name: Vertical grid\n    file: fixtures/duet-grid_vertical_grid.html\n  - name: Nested grids\n    file: fixtures/duet-grid_nested_grids.html\n  - name: Splitting form into columns with grid\n    file: fixtures/duet-grid_splitting_form_into_columns_with_grid.html\n  - name: Grids using different breakpoints\n    file: fixtures/duet-grid_grids_using_different_breakpoints.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "alignment",
+          "description": "Adjusts the vertical alignment of the grid items.",
+          "values": [
+            {
+              "name": "baseline"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "stretch"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "breakpoint",
+          "description": "Switch the breakpoint used to trigger the content stacking. These match to\nsimilar media query tokens: $media-query-small and $media-query-medium.",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            }
+          ]
+        },
+        {
+          "name": "direction",
+          "description": "Direction of the grid items.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "distribution",
+          "description": "Adjusts the horizontal distribution of the grid items.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "space-around"
+            },
+            {
+              "name": "space-between"
+            },
+            {
+              "name": "space-evenly"
+            }
+          ]
+        },
+        {
+          "name": "mobile",
+          "description": "Adjusts the horizontal alignment of the grid items on mobile (575px and under).",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "responsive",
+          "description": "Enable or disable the automatic responsive behaviour of the grid component.\nSetting this option to \"true\" makes sure that contents are stacked vertically\non mobile (575px and under)."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-grid/duet-grid.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-grid-item",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Grid Item\nname: duet-grid-item\nstatus: ready\nreleased: 2.7.0\nplatforms: Web only\naccessibility: N/A\nssr: Supported\ncategory: Structure\nintro: Grid Item is a component used inside the Grid that makes it possible set\n  additional parameters for items. For concrete usage examples, please see <a\n  href=\"/components/grid/\">Grid component</a>.\nexample_height: 300px\nexamples:\n  - name: grid item\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "fill",
+          "description": "Make the grid item fill the remaining available grid space."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "Sets the maximum width for the grid item using any valid numeric CSS\nvalue. E.g. \"300px\"."
+        },
+        {
+          "name": "min-width",
+          "description": "Sets the minimum width for the grid item using any valid numeric CSS\nvalue. E.g. \"33.333%\"."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the grid item.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-grid-item/duet-grid-item.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-header",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Header\nname: duet-header\nstatus: ready\nreleased: 3.0.0\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Navigation\nintro: Header is used to display the logo, primary navigation and utility menus.\n  It’s always visible at the top of the interface and can be configured to show\n  just the logo and a back link.\ndescription: Header contains your application’s primary navigation items that\n  perform an action when clicked. Each action in the header should navigate to a\n  href or trigger another action like a <a href=\"/components/modal/\">Modal\n  overlay</a>.\nplatforms: Web only\ntags:\n  - docs-components\nexamples:\n  - name: header\n    code: This first example creates the actual href and DOCS, hence it needs to be\n      here.\n  - name: Basic header with different options\n    file: fixtures/duet-header_basic_header_with_different_options.html\n  - name: Header in English without region and contact menu\n    file: fixtures/duet-header_header_in_english_without_region_and_contact_menu.html\n  - name: In Swedish with just the main navigation and logout link\n    file: fixtures/duet-header_in_swedish_with_just_the_main_navigation_and_logout_link.html\n  - name: Header showing only the logo and a back button\n    file: fixtures/duet-header_header_showing_only_the_logo_and_a_back_button.html\n  - name: Logged out version that only shows the logo and a login link\n    file: fixtures/duet-header_logged_out_version_that_only_shows_the_logo_and_a_login_link.html\n  - name: Passing arrays and objects to Header as JSON via attributes for SSR support\n    file: fixtures/duet-header_passing_arrays_and_objects_to_header_as_json_via_attributes_for_ssr_support.html\n  - name: Using the logo-utility slot\n    file: fixtures/duet-header_using_the_logo-utility_slot.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-labels-default",
+          "description": "Default strings for accessibleI18nLabels"
+        },
+        {
+          "name": "accessible-label",
+          "description": "Accessible label that is shown for screen reader users in the mobile\nnavigation toggle. Not visible for normal users."
+        },
+        {
+          "name": "accessible-label-default",
+          "description": "Property to change accessibleLabel defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabel when needed"
+        },
+        {
+          "name": "accessible-label-external",
+          "description": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+        },
+        {
+          "name": "accessible-label-external-default",
+          "description": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+        },
+        {
+          "name": "back",
+          "description": "An object that includes mandatory \"label\" and \"href\" fields for the back link.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for the\nelement. If nothing is passed, back link won’t be shown. **NOTE: The back link\nshould be ONLY used in combination with language and logoHref props.**"
+        },
+        {
+          "name": "contact",
+          "description": "Label of the contact menu. If empty, contact menu will be hidden."
+        },
+        {
+          "name": "contact-items",
+          "description": "An array of items for the contact menu. \"label\" and \"href\" are mandatory.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for\nthe element, and pass an \"external\" flag if the link is to open in a new window."
+        },
+        {
+          "name": "current-href",
+          "description": "The href of the current page item that is shown as “active”."
+        },
+        {
+          "name": "items",
+          "description": "An array of items for the main navigation. Items have to include mandatory\n\"label\" and \"href\" fields to work. Additionally, you can pass an \"id\" that is\nadded as an HTML identifier for the element."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting also changes the logo to match\nthe chosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "language-items",
+          "description": "An array of items for the language menu. If empty, the language menu will\nbe hidden. \"label\", \"country\" and \"href\" are mandatory. Additionally you\ncan pass an \"id\" that is added as an HTML identifier for the element."
+        },
+        {
+          "name": "logo-href",
+          "description": "URL that the logo link points to."
+        },
+        {
+          "name": "region",
+          "description": "Region that is shown next to the logo. If empty, region will be hidden."
+        },
+        {
+          "name": "session",
+          "description": "An object that includes mandatory \"label\", \"href\" and \"type\" fields for the\nsession login/logout link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element. If nothing is passed, this link won’t\nbe shown."
+        },
+        {
+          "name": "skip-to-id",
+          "description": "The ID of the element where \"skip to content\" link should take the user.\nIf empty, the functionality won’t be rendered in the DOM."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the header.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "user",
+          "description": "An object that includes mandatory \"label\" and \"href\" fields for the user\nprofile link. Additionally, you can pass an \"id\" that is added as an HTML\nidentifier for the element. If nothing is passed, user won’t be shown."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-header/duet-header.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-heading",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Heading\nname: duet-heading\nstatus: ready\nreleased: 1.5.4\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Text\nintro: Headings are used as the titles of each major section of a page in the\n  interface. For example, templates generally use headings as their title.\ndescription: Heading element provides an option to change the level of the\n  heading. Heading also includes an option that allows you to make e.g. h1\n  visually look like h3, but still keep it h1 in the HTML markup.\nplatforms: Web only\nexample_height: 400px\ntags:\n  - docs-components\nexamples:\n  - name: heading\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default headings\n    file: fixtures/duet-heading_default_headings.html\n  - name: Headings with border\n    file: fixtures/duet-heading_headings_with_border.html\n  - name: Headings that visually looks like h3\n    file: fixtures/duet-heading_headings_that_visually_looks_like_h3.html\n  - name: Headings without margins\n    file: fixtures/duet-heading_headings_without_margins.html\n  - name: Headings using color tokens\n    file: fixtures/duet-heading_headings_using_color_tokens.html\n  - name: Using semibold for headings\n    file: fixtures/duet-heading_using_semibold_for_headings.html\n  - name: Heading with hyphenation\n    file: fixtures/duet-heading_heading_with_hyphenation.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "border",
+          "description": "Enable or disable the border underneath the heading."
+        },
+        {
+          "name": "color",
+          "description": "Custom color for the heading as a design token entered in camelCase or\nkebab-case. Example: \"color-primary\"."
+        },
+        {
+          "name": "hyphenate",
+          "description": "Enable hyphenation for long titles. Useful when there is no control over content e.g. user-generated content."
+        },
+        {
+          "name": "level",
+          "description": "The actual heading level used in the HTML markup.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the heading.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "visual-level",
+          "description": "Make the visual style mimic a specific heading level. This option allows\nyou to make e.g. h1 visually look like h3, but still keep it h1 in the\nmarkup.",
+          "values": [
+            {
+              "name": "h0"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            }
+          ]
+        },
+        {
+          "name": "weight",
+          "description": "This property allows you to set semibold font weight for all sizes\nwhen needed.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "semibold"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-heading/duet-heading.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-hero",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Hero Area\nname: duet-hero\nstatus: ready\nreleased: 1.1.6\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Structure\nintro: When placed at the top of the page hero areas are often the first thing\n  user sees, making them a great place to catch user’s attention with catchy\n  content.\ndescription: Hero areas can include an illustration in addition to a title, a\n  description, and an action button. Please note that this component takes care\n  of its top and bottom spacing so there should be no need to write custom CSS.\nexample_height: 500px\nexamples:\n  - name: hero\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default hero\n    file: fixtures/duet-hero_default_hero.html\n  - name: Hero area using light variation\n    file: fixtures/duet-hero_hero_area_using_light_variation.html\n  - name: Hero area using gray variation\n    file: fixtures/duet-hero_hero_area_using_gray_variation.html\n  - name: Gray hero area with meta data and actions\n    file: fixtures/duet-hero_gray_hero_area_with_meta_data_and_actions.html\n  - name: Gray hero area utilizing pre-heading\n    file: fixtures/duet-hero_gray_hero_area_utilizing_pre-heading.html\n  - name: Gray hero area with meta data but without back button\n    file: fixtures/duet-hero_gray_hero_area_with_meta_data_but_without_back_button.html\n  - name: Gray hero area with meta data but without actions\n    file: fixtures/duet-hero_gray_hero_area_with_meta_data_but_without_actions.html\n  - name: Hero area with a badge\n    file: fixtures/duet-hero_hero_area_with_a_badge.html\n  - name: Hero area using image variation\n    file: fixtures/duet-hero_hero_area_using_image_variation.html\n  - name: Hero without illustration and centered text\n    file: fixtures/duet-hero_hero_without_illustration_and_centered_text.html\n  - name: Passing arrays and objects to Hero as JSON via attributes for SSR support\n    file: fixtures/duet-hero_passing_arrays_and_objects_to_hero_as_json_via_attributes_for_ssr_support.html\n  - name: Minimal variation with slot\n    file: fixtures/duet-hero_hero_area_using_minimal_variation_and_slot.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label-external",
+          "description": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+        },
+        {
+          "name": "accessible-label-external-default",
+          "description": "Defaults for accessibleLabelExternal"
+        },
+        {
+          "name": "actions",
+          "description": "An array of items for the main actions. Items have to include mandatory\n\"label\", \"href\" and \"icon\" fields to work. Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
+        },
+        {
+          "name": "back",
+          "description": "An object that includes mandatory \"label\" and \"href\" fields for the back link.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for the\nelement. If nothing is passed, back link won’t be shown. **NOTE: The back link\ncan be ONLY used in combination with \"gray\" style variation.**"
+        },
+        {
+          "name": "button-id",
+          "description": "ID for the button."
+        },
+        {
+          "name": "button-label",
+          "description": "Text label shown inside the button. If empty, button will be hidden."
+        },
+        {
+          "name": "button-url",
+          "description": "URL that the button links to."
+        },
+        {
+          "name": "category-icon",
+          "description": "Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden."
+        },
+        {
+          "name": "category-icon-color",
+          "description": "Icon color to use for the category icon that can be used in gray hero area variation."
+        },
+        {
+          "name": "description",
+          "description": "The description of the hero area, rendered in a P tag. If empty, description\nwill be hidden."
+        },
+        {
+          "name": "heading",
+          "description": "The heading of the hero area, rendered in an H1 tag. P.S. you can control\nthe level of the HTML heading by using “level” prop. If empty, heading\nwill be hidden."
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display to the left of the button content. If empty, icon will be hidden."
+        },
+        {
+          "name": "icon-right",
+          "description": "Show icon on the right side of the button content."
+        },
+        {
+          "name": "icon-size",
+          "description": "Icon size for the button.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            }
+          ]
+        },
+        {
+          "name": "image",
+          "description": "URL of the image shown inside the hero area. The width of the displayed image\nshould be 800px. Optimal aspect ratio is 3:2. When using “image” variation of\nHero Area the required image size is 1200x1200px (1:1 ratio). If this\nproperty is left empty, image will be hidden."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the accessible labels to match the\nchosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "left-align",
+          "description": "Forces all items in the header to be leftAligned\nThis can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices\nor allways leftAligned (you must manually switch this parameter if you need special breakpoints)\nthis nullifies textCenter prop"
+        },
+        {
+          "name": "level",
+          "description": "The level of the heading.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            }
+          ]
+        },
+        {
+          "name": "list-items",
+          "description": "An array of items for the definition list inside hero. Items have to\ninclude mandatory \"label\" and \"value\" fields to work."
+        },
+        {
+          "name": "pre-heading",
+          "description": "The headline shown before heading."
+        },
+        {
+          "name": "text-center",
+          "description": "Centers the text in hero area."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the hero area.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the hero area.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "gray"
+            },
+            {
+              "name": "image"
+            },
+            {
+              "name": "light"
+            },
+            {
+              "name": "minimal"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-hero/duet-hero.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-icon",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Icon\nname: duet-icon\nstatus: ready\nreleased: 2.7.0\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Images and icons\nintro: Icons are used to provide additional meaning or in places where text\n  label doesn’t fit. Icon component allows you to customize the size and color\n  of the icon.\ndescription: You can use any of the icons listed under <a\n  href=\"/iconography/\">Iconography section</a>. By default the icon will inherit\n  the text color from the parent element, but you can use the color property to\n  override this behaviour.\nplatforms: Web only\nexamples:\n  - name: icon\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Circular icons\n    file: fixtures/duet-icon_circular_icons.html\n  - name: Circular outline icons\n    file: fixtures/duet-icon_circular_outline_icons.html\n  - name: Basic icons in different sizes\n    file: fixtures/duet-icon_basic_icons_in_different_sizes.html\n  - name: Outline and filled icons in different sizes\n    file: fixtures/duet-icon_outline_and_filled_icons_in_different_sizes.html\n  - name: Combining background and color properties\n    file: fixtures/duet-icon_combining_background_and_color_properties.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "background",
+          "description": "Custom color to be used for a circular background, as a design token entered\nin camelCase or kebab-case. Using this option the icon will always be resized\nto $size-icon-medium on mobile viewports. Example: \"color-primary\"."
+        },
+        {
+          "name": "color",
+          "description": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"color-primary\". This property can also be set to\n\"currentColor\" which forces the icon to use the CSS text color of parent\nelement instead. Useful when you want to control the color in stylesheet\ninstead."
+        },
+        {
+          "name": "icon",
+          "description": "A raw SVG string."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Icon name from Duet to display."
+        },
+        {
+          "name": "outline",
+          "description": "Custom color to be used for a circular border and icon outline, as a design\ntoken entered in camelCase or kebab-case. Using this option the icon will\nalways be resized to $size-icon-medium on mobile viewports.\nExample: \"color-primary\"."
+        },
+        {
+          "name": "responsive",
+          "description": "Whether the icon changes its size responsively or not."
+        },
+        {
+          "name": "size",
+          "description": "Icon size. Entered as one of the icon size design tokens.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "x-small"
+            },
+            {
+              "name": "xx-large"
+            },
+            {
+              "name": "xx-small"
+            },
+            {
+              "name": "xxx-large"
+            },
+            {
+              "name": "xxx-small"
+            }
+          ]
+        },
+        {
+          "name": "src",
+          "description": "A URL from which to load an icon."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the icon. This setting will be overridden when you set the color\nproperty",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-icon/duet-icon.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-input",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Input\nname: duet-input\nstatus: ready\nreleased: 1.3.0\nplatforms: Web only\ninternationalization: Supported\nssr: Supported\ncategory: Forms\naccessibility: Keyboard, Screen Reader\nintro: Inputs are used to allow users to provide text input when the expected\n  input is short. Input component has a range of options and supports several\n  text formats including numbers.\ndescription: You can use native HTML5 validation with Input component via\n  validation properties. This allows you to specify rules like whether a value\n  needs to be filled in, the minimum and maximum length of the data, whether it\n  needs to be a number, and a pattern that it must match.\nexamples:\n  - name: input\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Text input\n    file: fixtures/duet-input_text_input.html\n  - name: Input using expand property\n    file: fixtures/duet-input_input_using_expand_property.html\n  - name: Text input that only allows numbers and commas\n    file: fixtures/duet-input_text_input_that_only_allows_numbers_and_commas.html\n  - name: Tel input\n    file: fixtures/duet-input_tel_input.html\n  - name: Email input\n    file: fixtures/duet-input_email_input.html\n  - name: Search input\n    file: fixtures/duet-input_search_input.html\n  - name: Password input\n    file: fixtures/duet-input_password_input.html\n  - name: Disabled input\n    file: fixtures/duet-input_disabled_input.html\n  - name: Disabled input with a custom icon\n    file: fixtures/duet-input_disabled_input_with_a_custom_icon.html\n  - name: Input with an error\n    file: fixtures/duet-input_input_with_an_error.html\n  - name: Input with a tooltip\n    file: fixtures/duet-input_input_with_a_tooltip.html\n  - name: Input with a top caption and echoing of placeholders\n    file: fixtures/duet-input_text_input_caption_and_echoing_placeholders.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-autocomplete",
+          "description": "Indicates what kind of user input completion suggestions are provided."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the input."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the input."
+        },
+        {
+          "name": "auto-complete",
+          "description": "Enable or disable automatic completion by the browser"
+        },
+        {
+          "name": "caption",
+          "description": "Caption (underneath label) that can be set as a way of adding extra information"
+        },
+        {
+          "name": "component",
+          "description": "Used internally in Duet to adjust whether this component acts as e.g. number input.",
+          "values": [
+            {
+              "name": "date"
+            },
+            {
+              "name": "input"
+            },
+            {
+              "name": "number"
+            }
+          ]
+        },
+        {
+          "name": "debounce",
+          "description": "Set the amount of time, in milliseconds, to wait to trigger the duetChange\nevent after each keystroke."
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "disallow-pattern",
+          "description": "A regular expression that matches any characters which should be *disallowed*.\nThis differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.\ne.g. the following will disallow any non-numeric characters `[^0-9]`"
+        },
+        {
+          "name": "echo-placeholder",
+          "description": "If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
+        },
+        {
+          "name": "error",
+          "description": "Display the input in error state along with an error message."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the input to fill 100% of the container width."
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display on the right side (from Duet’s icons). Example: \"form-location\""
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the input."
+        },
+        {
+          "name": "label",
+          "description": "Label for the input."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "maxlength",
+          "description": "Use maxlength to specify the maximum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+        },
+        {
+          "name": "minlength",
+          "description": "Use minlength to specify the minimum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+        },
+        {
+          "name": "name",
+          "description": "Name of the input."
+        },
+        {
+          "name": "numeric-keyboard",
+          "description": "Enable numeric keyboard for the input."
+        },
+        {
+          "name": "pattern",
+          "description": "A regular expression to check the value against. Please note that this\nuses native HTML5 pattern validation."
+        },
+        {
+          "name": "placeholder",
+          "description": "Hint text to display."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the input."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the input.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip to display next to the label of the input."
+        },
+        {
+          "name": "tooltip-direction",
+          "description": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Type of the input.",
+          "values": [
+            {
+              "name": "email"
+            },
+            {
+              "name": "password"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Value of the input."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-input/duet-input.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-label",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Label\nname: duet-label\nstatus: ready\nreleased: 1.0.14\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Forms\nintro: Labels are used to create text labels for items in an interface. Most\n  commonly used inside other form components.\nexamples:\n  - name: label\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default label\n    file: fixtures/duet-label_default_label.html\n  - name: Small label\n    file: fixtures/duet-label_small_label.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "for",
+          "description": "ID of the component that the label is labelling."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Controls the size of the label.",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the label.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-label/duet-label.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-layout",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Layout\nname: duet-layout\nstatus: ready\nreleased: 1.4.0\nplatforms: Web only\nexample_height: 380px\nssr: Supported\ncategory: Structure\nintro: Layout component, while not visible in the user interface itself,\n  provides a structure for other components using a one or two column layout\n  system.\nexamples:\n  - name: layout\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Full-width layout\n    file: fixtures/duet-layout_full-width_layout.html\n  - name: Full-width layout with top section\n    file: fixtures/duet-layout_full-width_layout_with_top_section.html\n  - name: Full-width layout with sidebar\n    file: fixtures/duet-layout_full-width_layout_with_sidebar.html\n  - name: Full-width layout with sidebar and top section\n    file: fixtures/duet-layout_full-width_layout_with_sidebar_and_top_section.html\n  - name: Narrow layout\n    file: fixtures/duet-layout_narrow_layout.html\n  - name: Narrow layout with top section\n    file: fixtures/duet-layout_narrow_layout_with_top_section.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "center",
+          "description": "Center align all direct children of this component."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "middle",
+          "description": "Align container vertically in the middle when the space allows it."
+        },
+        {
+          "name": "sticky",
+          "description": "Makes the sidebar stick to the top of the window when scrolling down."
+        },
+        {
+          "name": "sticky-distance",
+          "description": "Adjust sticky sidebar’s distance to duet navigation component using this property.",
+          "values": [
+            {
+              "name": "with-links"
+            },
+            {
+              "name": "without-links"
+            }
+          ]
+        },
+        {
+          "name": "tabs",
+          "description": "If set to true, the sidebar position will be adjusted to take tabs inside main content\narea into account."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-layout/duet-layout.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-link",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Link\nname: duet-link\nstatus: ready\nreleased: 1.0.21\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Navigation\nintro: Links are used in content paragraphs to create pathways from one page to\n  another. If you need a link with semi bold font-weight and/or icon, please use\n  <a href=\"/components/button/\">Button component</a> instead.\nexamples:\n  - name: link\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default link\n    file: fixtures/duet-link_default_link.html\n  - name: Link that opens into new window\n    file: fixtures/duet-link_link_that_opens_into_new_window.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label",
+          "description": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+        },
+        {
+          "name": "accessible-label-external",
+          "description": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+        },
+        {
+          "name": "accessible-label-external-default",
+          "description": "Defaults for accessibleLabelExternal"
+        },
+        {
+          "name": "external",
+          "description": "Forces URL to open in a new browser tab. Used together with URL prop."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the link. Please note that with this particular\ncomponent this id is added inside Shadow DOM. If you need an id on the html\nelement, use regular id attribute instead."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the external link\naccessible label to match the chosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the button.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "url",
+          "description": "A destination to link to, rendered in the href attribute of a link."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-link/duet-link.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-list",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: List\nname: duet-list\nstatus: ready\nreleased: 3.3.0\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\ncategory: Lists and tables\nssr: Supported\nintro: Lists are used to display name/value pairs such as terms and definitions.\n  Particularly useful for glossaries.\nplatforms: Web only\ntags:\n  - docs-components\nexamples:\n  - name: list\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Striped list\n    file: fixtures/duet-list_striped_list.html\n  - name: Basic list\n    file: fixtures/duet-list_basic_list.html\n  - name: Lists with alternative column widths\n    file: fixtures/duet-list_lists_with_alternative_column_widths.html\n  - name: List inside a card\n    file: fixtures/duet-list_list_inside_a_card.html\n  - name: List using large breakpoint and centered text on mobile\n    file: fixtures/duet-list_list_using_large_breakpoint_and_centered_text_on_mobile.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "breakpoint",
+          "description": "Switch the breakpoint used to trigger the content stacking. These match to\nsimilar media query tokens: $media-query-small and $media-query-large.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "label-width",
+          "description": "Set the column width of the first column in percentages.",
+          "values": [
+            {
+              "name": "30"
+            },
+            {
+              "name": "50"
+            },
+            {
+              "name": "70"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "mobile",
+          "description": "Adjusts the alignment of the list items on mobile breakpoint.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            }
+          ]
+        },
+        {
+          "name": "padding",
+          "description": "Controls the padding of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the list.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the list.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "striped"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-list/duet-list.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-list-item",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: List Item\nname: duet-list-item\nstatus: ready\nreleased: 3.3.0\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\ncategory: Lists and tables\nssr: Supported\nintro: List Item is a component used inside List. For concrete usage examples,\n  please see the <a href=\"/components/list/\">List component</a>.\nplatforms: Web only\ntags:\n  - docs-components\nexamples:\n  - name: list item\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-list-item/duet-list-item.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-logo",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Logo\nname: duet-logo\nstatus: ready\nreleased: 1.0.49\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Images and icons\nintro: Logo is a component used inside the <a\n  href=\"/components/hader/\">Header</a> and <a\n  href=\"/components/footer/\">Footer</a> components. Logo prodives options to\n  customize the language and appearance in addition to theme.\nplatforms: Web only\ntags:\n  - docs-components\nexamples:\n  - name: logo\n    code: This first example creates the actual href and DOCS, hence it needs to be\n      here.\n  - name: LähiTapiola logo\n    file: fixtures/duet-logo_lahitapiola_logo.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "href",
+          "description": "Where the logo links to."
+        },
+        {
+          "name": "inverse",
+          "description": "Use inverse version of the logo (white logo on dark background)."
+        },
+        {
+          "name": "language",
+          "description": "The language of the logo.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size variation of the logo.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the logo.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-logo/duet-logo.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-modal",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Modal\nname: duet-modal\nstatus: ready\nreleased: 3.1.3\ncategory: Overlays\naccessibility: Keyboard, Screen Reader\ninternationalization: Supported\nssr: Supported\nintro: Modals are used to display content that temporarily blocks interactions\n  with the main view of an application. Modals should be used sparingly only\n  when necessary.\ndescription: Modal component is positioned over everything else in the\n  application preventing scrolling of the main document, making only the modal’s\n  content scrollable. Duet only supports one modal dialog at a time as nested\n  modals are often a sign of bad user experience.\nplatforms: Web only\nexample_height: 600px\ntags:\n  - docs-components\nexamples:\n  - name: modal\n    code: This first example creates the actual href and DOCS, hence it needs to be\n      here.\n  - name: Small modal dialog\n    file: fixtures/duet-modal_small_modal_dialog.html\n  - name: Small modal dialog confirmation\n    file: fixtures/duet-modal_small_modal_dialog_confirmation.html\n  - name: Medium modal dialog with form\n    file: fixtures/duet-modal_medium_modal_dialog_with_form.html\n  - name: Medium modal dialog with text content\n    file: fixtures/duet-modal_medium_modal_dialog_with_text_content.html\n  - name: Large modal dialog with text content\n    file: fixtures/duet-modal_large_modal_dialog_with_text_content.html\n  - name: Small modal dialog with Top Slot in use and Small gutter\n    file: fixtures/duet-modal_large_top_slot_small_gutter.html\n  - name:  Medium modal dialog with Top Slot in use and Medium gutter\n    file: fixtures/duet-modal_large_top_slot_medium_gutter.html\n  - name:  Large modal dialog with Top Slot in use and large gutter\n    file: fixtures/duet-modal_large_top_slot_large_gutter.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-close-label",
+          "description": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!\nSwedish translation for this property is “Stäng fönstret”."
+        },
+        {
+          "name": "accessible-close-label-default",
+          "description": "Defaults for accessibleCloseLabel"
+        },
+        {
+          "name": "active",
+          "description": "Use this property when you need to have the modal dialog initially active."
+        },
+        {
+          "name": "color",
+          "description": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"primary\"."
+        },
+        {
+          "name": "gutter-size",
+          "description": "Size of the modal window.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "heading",
+          "description": "Accessible heading displayed in the modal. The modal marks this as the\nlabel of the modal when used. This helps screen reader users which is\nwhy this is a required property."
+        },
+        {
+          "name": "heading-level",
+          "description": "Accessible heading size",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            }
+          ]
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display above the heading (from Duet’s icons). Example:\n\"form-location\""
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting also changes the logo to match\nthe chosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size of the modal window.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the modal.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-modal/duet-modal.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-notification",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Notification\nname: duet-notification\nstatus: new\nreleased: 4.12.0\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Navigation\nexample_height: 365px\nintro: Notifications encourage users to take an action related to a recent\n  update or an opportunity. They are most commonly displayed inside <a\n  href=\"/components/notification-drawer/\">Notification Drawer</a>.\ndescription: Notification is a component intended for use inside Notification\n  Drawer. A&nbsp;notification consists of a link, a date, and content. For more\n  usage examples, please see the <a\n  href=\"/components/notification-drawer/\">Notification Drawer</a> component.\nplatforms: Web only\nexamples:\n  - name: notification\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Multiple notifications\n    file: fixtures/duet-notification_multiple_notifications.html\n  - name: Single notification\n    file: fixtures/duet-notification_single_notification.html\n  - name: Notifications without paragraph\n    file: fixtures/duet-notification_notifications_without_paragraph.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label-unread",
+          "description": "Adds accessible label for tooltip that is shown over unread counter"
+        },
+        {
+          "name": "date",
+          "description": "The date of the notification."
+        },
+        {
+          "name": "external",
+          "description": "Should the link open in a new window?"
+        },
+        {
+          "name": "highlight",
+          "description": "Should the notification be visually highlighted?"
+        },
+        {
+          "name": "language",
+          "description": "The currently active language.\nUsed for announcing unread notifications to screen readers.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the notification.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "url",
+          "description": "The url to open on notification click."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-notification/duet-notification.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-notification-drawer",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Notification Drawer\nname: duet-notification-drawer\nstatus: new\nreleased: 4.12.0\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Navigation\nintro: Notification Drawer informs users about recent notification messages.\n  Notification Drawer can be used to display up to 20 notification messages.\ndescription: Notification Drawer is most commonly used inside the <a\n  href=\"/components/header/\">Header component</a>. Notification Drawer consists\n  of a toggle button and dropdown list of notifications. Please see the <a\n  href=\"/components/notification/\">Notification</a> component for additional\n  info.\nplatforms: Web only\nexample_height: 550px\ntags:\n  - docs-components\nexamples:\n  - name: notification-drawer\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic notification drawer usage\n    file: fixtures/duet-notification-drawer_basic_notification_drawer_usage.html\n  - name: Using notification drawer inside header\n    file: fixtures/duet-notification-drawer_using_notification_drawer_inside_header.html\n  - name: Notification drawer with only headings\n    file: fixtures/duet-notification-drawer_notification_drawer_with_only_headings.html\n  - name: Empty notification drawer\n    file: fixtures/duet-notification-drawer_empty_notification_drawer.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label-notifications",
+          "description": "Adds accessible label for tooltip that is shown for notifications"
+        },
+        {
+          "name": "accessible-label-notification-default",
+          "description": "Defaults for accessibleLabelNotifications"
+        },
+        {
+          "name": "badge",
+          "description": "Show a badge that indicates something has changed."
+        },
+        {
+          "name": "direction",
+          "description": "Which direction should the drawer open in?",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "icon",
+          "description": "Icon to display to the left of the drawer button."
+        },
+        {
+          "name": "label",
+          "description": "Label for the drawer button."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language.\nUsed to determine the message displayed when there are no notifications.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the notification drawer.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-number-input",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Number Input\nname: duet-number-input\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\ncategory: Forms\nssr: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 3.4.8\nintro: Number input lets user specify a numeric value using plus and minus\n  buttons which must be no less than a given value, and no more than another\n  given value.\ndescription: Number Input allows you to listen for duetChange event that is\n  triggered whenever the user presses the plus and minus buttons, or exits the\n  input after editing the number manually.\nexamples:\n  - name: number input\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default number input\n    file: fixtures/duet-number-input_default_number_input.html\n  - name: Number input without initial value\n    file: fixtures/duet-number-input_number_input_without_initial_value.html\n  - name: Number input with output field and custom aria-live messaging\n    file: fixtures/duet-number-input_number_input_with_output_field_and_custom_aria-live_messaging.html\n  - name: Number input using expand property\n    file: fixtures/duet-number-input_number_input_using_expand_property.html\n  - name: Number input with an error\n    file: fixtures/duet-number-input_number_input_with_an_error.html\n  - name: Number input with a tooltip\n    file: fixtures/duet-number-input_number_input_with_a_tooltip.html\n  - name: Number input using different locale\n    file: fixtures/duet-number-input_number_input_using_different_locale.html\n  - name: Number input with step dependent on value\n    file: fixtures/duet-number-input_number_input_with_step_dependent_on_value.html\n  - name: Number input where min value is not a multiple of the step\n    file: fixtures/duet-number-input_number_input_where_min_value_is_not_a_multiple_of_the_step.html\n  - name: Number input that does not round to a multiple of the step\n    file: fixtures/duet-number-input_number_input_that_does_not_round_to_a_multiple_of_the_step.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-add",
+          "description": "Accessible label for the add button that is read for screen reader users."
+        },
+        {
+          "name": "accessible-add-default",
+          "description": "Defaults for accessibleAdd"
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the input."
+        },
+        {
+          "name": "accessible-live",
+          "description": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
+        },
+        {
+          "name": "accessible-live-default",
+          "description": "Defaults for accessibleLive"
+        },
+        {
+          "name": "accessible-live-enabled",
+          "description": "Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the input."
+        },
+        {
+          "name": "accessible-subtract",
+          "description": "Accessible label for the subtract button that is read for screen reader users."
+        },
+        {
+          "name": "accessible-subtract-defaults",
+          "description": "Defaults for accessibleSubtract"
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the number input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "error",
+          "description": "Display the input in error state along with an error message."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the input to fill 100% of the container width."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the input."
+        },
+        {
+          "name": "label",
+          "description": "Label for the number input."
+        },
+        {
+          "name": "label-default",
+          "description": "Defaults for Label"
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the accessible labels to match the\nchosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "locale",
+          "description": "Locale used to format the entered value.",
+          "values": [
+            {
+              "name": "en-GB"
+            },
+            {
+              "name": "en-US"
+            },
+            {
+              "name": "fi-FI"
+            },
+            {
+              "name": "sv-SE"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "max",
+          "description": "Maximum value."
+        },
+        {
+          "name": "min",
+          "description": "Minimum value."
+        },
+        {
+          "name": "name",
+          "description": "Name of the input."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the input."
+        },
+        {
+          "name": "rounding",
+          "description": "Controls whether or not value gets rounded to the nearest\nmultiple of a step on blur. Set to \"false\" to disable this behaviour."
+        },
+        {
+          "name": "step",
+          "description": "Step amount."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the input.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip to display next to the label of the input."
+        },
+        {
+          "name": "unit",
+          "description": "Unit for the number input."
+        },
+        {
+          "name": "value",
+          "description": "Value of the input. This is passed as a string since Number Input uses Duet’s Input component internally and we need the value to support spaces and the unit as well."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-paragraph",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Paragraph\nname: duet-paragraph\nstatus: ready\nreleased: 1.3.0\ninternationalization: Supported\nssr: Supported\naccessibility: Keyboard, Screen Reader\ncategory: Text\nintro: Paragraphs are blocks of text separated from adjacent blocks by blank lines.\nplatforms: Web only\ntags:\n  - docs-components\nexamples:\n  - name: paragraph\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default paragraph\n    file: fixtures/duet-paragraph_default_paragraph.html\n  - name: Intro paragraph\n    file: fixtures/duet-paragraph_intro_paragraph.html\n  - name: Small paragraph\n    file: fixtures/duet-paragraph_small_paragraph.html\n  - name: Paragraph using color token\n    file: fixtures/duet-paragraph_paragraph_using_color_token.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Custom color to be used for text, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\"."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Controls the size of the paragraph.",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the card.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the paragraph.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "intro"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-radio",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Radio\nname: duet-radio\nstatus: ready\nreleased: 1.3.0\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Forms\nintro: Radio Buttons are graphical interface elements that allow user to choose\n  only one of a predefined set of mutually exclusive options.\nexamples:\n  - name: radio\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Checked radio\n    file: fixtures/duet-radio_checked_radio.html\n  - name: Unchecked radio\n    file: fixtures/duet-radio_unchecked_radio.html\n  - name: Disabled radio\n    file: fixtures/duet-radio_disabled_radio.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the radio."
+        },
+        {
+          "name": "accessible-index",
+          "description": "Control the tabindex of checkbox. In most cases this should never be used!\nIt exists only for Duet’s internal needs."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the radio."
+        },
+        {
+          "name": "block-events",
+          "description": "Stops the components from emitting events"
+        },
+        {
+          "name": "checked",
+          "description": "Check state of the radio."
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the radio component disabled. This prevents users from being able to\ninteract with the radio, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the radio."
+        },
+        {
+          "name": "label",
+          "description": "Label for the radio."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name of the radio."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the input."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the radio.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the radio input does not mean if it's checked or not, use the checked\nproperty for that."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-radio/duet-radio.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-radio-group",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Radio Group\nname: duet-radio-group\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\nreleased: 1.3.0\ncategory: Forms\nintro: Radio group allows user to select one option from a set of options. Use\n  value on group to set the selected option.\nexamples:\n  - name: radio group\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Vertical radio group\n    file: fixtures/duet-radio-group_vertical_radio_group.html\n  - name: Horizontal radio group\n    file: fixtures/duet-radio-group_horizontal_radio_group.html\n  - name: Disabled radio group\n    file: fixtures/duet-radio-group_disabled_radio_group.html\n  - name: Radio group with tooltip\n    file: fixtures/duet-radio-group_radio_group_with_tooltip.html\n  - name: Radio group with tooltip and caption\n    file: fixtures/duet-radio-group_radio_group_with_tooltip_and_caption.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "caption",
+          "description": "Additional caption to show inside the label of the radio group."
+        },
+        {
+          "name": "direction",
+          "description": "Direction of the radio group.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Determines, whether the control is disabled or not."
+        },
+        {
+          "name": "error",
+          "description": "Display radio group in error state along with an error message."
+        },
+        {
+          "name": "label",
+          "description": "Legend displayed for the radio buttons in this group."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name for the radio buttons within this group. **This must be unique amongst all other inputs.**"
+        },
+        {
+          "name": "responsive",
+          "description": "Enable or disable the automatic responsive behaviour of the radio group\ncomponent when horizontal setting is used. Setting this option to \"true\"\nmakes sure that contents are stacked vertically on mobile."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the radio group.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip to display next to the label of the radio group."
+        },
+        {
+          "name": "tooltip-direction",
+          "description": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the selected radio button."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-radio-group/duet-radio-group.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-range-slider",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Range Slider\nname: duet-range-slider\nstatus: ready\nreleased: 1.3.2\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Forms\nintro: Range Slider lets user specify a numeric value using a slider which must\n  be no less than a given value, and no more than another given value.\nexamples:\n  - name: range slider\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default range slider\n    file: fixtures/duet-range-slider_default_range_slider.html\n  - name: Range slider using expand property\n    file: fixtures/duet-range-slider_range_slider_using_expand_property.html\n  - name: Range slider using hidden label\n    file: fixtures/duet-range-slider_range_slider_using_hidden_label.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the input."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the input."
+        },
+        {
+          "name": "debounce",
+          "description": "Set the amount of time, in milliseconds, to wait to trigger the duetChange\nevent after each keystroke."
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the input to fill 100% of the container width."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the input."
+        },
+        {
+          "name": "label",
+          "description": "Label for the range slider."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "locale",
+          "description": "Locale used to format the entered value.",
+          "values": [
+            {
+              "name": "en-GB"
+            },
+            {
+              "name": "en-US"
+            },
+            {
+              "name": "fi-FI"
+            },
+            {
+              "name": "sv-SE"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "max",
+          "description": "Maximum value."
+        },
+        {
+          "name": "min",
+          "description": "Minimum value."
+        },
+        {
+          "name": "name",
+          "description": "Name of the input."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "step",
+          "description": "Step amount."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the input.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "unit",
+          "description": "Unit for the range slider."
+        },
+        {
+          "name": "value",
+          "description": "Value of the input."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-select",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Select\nname: duet-select\nstatus: ready\nreleased: 1.3.0\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Forms\nintro: Select lets user choose one option from an options menu. Consider using\n  select when you have 6 or more options. Select component supports any content\n  type.\nexamples:\n  - name: select\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default select\n    file: fixtures/duet-select_default_select.html\n  - name: Select using expand property\n    file: fixtures/duet-select_select_using_expand_property.html\n  - name: Preselected value in select\n    file: fixtures/duet-select_preselected_value_in_select.html\n  - name: Disabled select\n    file: fixtures/duet-select_disabled_select.html\n  - name: Passing items to select as JSON via attribute for SSR support\n    file: fixtures/duet-select_passing_items_to_select_as_json_via_attribute_for_ssr_support.html\n  - name: Grouping options\n    file: fixtures/duet-select_grouping_options.html\n  - name: Disabled options\n    file: fixtures/duet-select_disabled_options.html\n  - name: Grouping options with echoing placeholder\n    file: fixtures/duet-select_grouping_echo_placeholder_caption.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to indicate\nthe id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the input."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the select."
+        },
+        {
+          "name": "caption",
+          "description": "Caption (underneath label) that can be set as a way of adding extra information"
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the select component disabled. This prevents users from being able\nto interact with the select, and conveys its inactive state to assistive\ntechnologies."
+        },
+        {
+          "name": "echo-placeholder",
+          "description": "If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
+        },
+        {
+          "name": "error",
+          "description": "Display the select in error state along with an error message."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the input to fill 100% of the container width."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the select."
+        },
+        {
+          "name": "items",
+          "description": "An array of items to choose from"
+        },
+        {
+          "name": "label",
+          "description": "Label for the select."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name of the select."
+        },
+        {
+          "name": "placeholder",
+          "description": "Hint text to display."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the select."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the select.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip to display next to the label of the input."
+        },
+        {
+          "name": "tooltip-direction",
+          "description": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The selected value of the select"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-select/duet-select.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-spacer",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Spacer\nname: duet-spacer\nstatus: ready\nreleased: 1.0.19\nssr: Supported\ncategory: Structure\nintro: Spacer component is used to give additional white space between two\n  components in an interface. You can customize the size and direction with the\n  provided properties.\nplatforms: Web only\nexample_height: 300px\nexamples:\n  - name: spacer\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Vertical spacers\n    file: fixtures/duet-spacer_vertical_spacers.html\n  - name: Horizontal spacers\n    file: fixtures/duet-spacer_horizontal_spacers.html\n  - name: Spacers using responsive breakpoints\n    file: fixtures/duet-spacer_spacers_using_responsive_breakpoints.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "breakpoint",
+          "description": "Adjusts the breakpoint where the spacer is shown in. The functionality\nfollows 1:1 the media queries defined in design tokens.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "x-small"
+            },
+            {
+              "name": "xx-large"
+            },
+            {
+              "name": "xx-small"
+            }
+          ]
+        },
+        {
+          "name": "direction",
+          "description": "Direction of the space added.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size variation of the spacer. Can be any of the spacing tokens.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "x-small"
+            },
+            {
+              "name": "xx-large"
+            },
+            {
+              "name": "xx-small"
+            },
+            {
+              "name": "xxx-large"
+            },
+            {
+              "name": "xxxx-large"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-spinner",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Spinner\nname: duet-spinner\nstatus: ready\nreleased: 1.0.15\ninternationalization: Supported\nssr: Supported\ncategory: Messaging\nintro: Spinners are used to indicate users that their action is being processed.\n  Duet’s spinner is built entirely with HTML and CSS, and doesn’t rely on\n  JavaScript.\ndescription: \"You can customize the size and color of the spinner with the\n  provided properties. Spinner comes in three sizes: small, medium and large.\"\nplatforms: Web only\nappearance: negative\nexamples:\n  - name: spinner\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Small spinner\n    file: fixtures/duet-spinner_small_spinner.html\n  - name: Medium spinner\n    file: fixtures/duet-spinner_medium_spinner.html\n  - name: Large spinner\n    file: fixtures/duet-spinner_large_spinner.html\n  - name: Spinner using text color\n    file: fixtures/duet-spinner_spinner_using_text_color.html\n  - name: Spinner using color token\n    file: fixtures/duet-spinner_spinner_using_color_token.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label",
+          "description": "Adds accessible label for the spinner that is only shown for screen readers."
+        },
+        {
+          "name": "color",
+          "description": "Color of the spinner, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\". This property can also be set to \"currentColor\"\nwhich forces the icon to use the CSS text color of parent element instead.\nUseful when you want to control the color in stylesheet instead."
+        },
+        {
+          "name": "size",
+          "description": "Size variation of the spinner.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the spinner. When used this will override the color setting and\nuse \"primary\" or \"primary-turva\" as the color depending on which theme\nis chosen.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-spinner/duet-spinner.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-step",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Step\nname: duet-step\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 3.2.0\nssr: Supported\nintro: Step is a component used inside Stepper. A step consists of a numbered\n  heading and content. For concrete usage examples, please see the <a\n  href=\"/components/stepper/\">Stepper component</a>.\nexamples:\n  - name: step\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "heading",
+          "description": "Set the heading for the step."
+        },
+        {
+          "name": "heading-level",
+          "description": "Set the heading level used in the HTML markup.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the component.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-step/duet-step.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-stepper",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Stepper\nname: duet-stepper\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 3.2.0\nssr: Supported\nintro: Stepper is used to create wizard-like workflows by dividing content into\n  logical steps. The user can navigate backwards by clicking on the header of a\n  completed step.\nexample_height: 580px\nexamples:\n  - name: stepper\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic stepper usage\n    file: fixtures/duet-stepper_basic_stepper_usage.html\n  - name: Steps with additional content in heading\n    file: fixtures/duet-stepper_steps_with_additional_content_in_heading.html\n  - name: Using events to prevent navigation to previous steps\n    file: fixtures/duet-stepper_using_events_to_prevent_navigation_to_previous_steps.html\n  - name: Creating additional custom steps using CSS Framework and Design Tokens\n    file: fixtures/duet-stepper_creating_additional_custom_steps_using_css_framework_and_design_tokens.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-live",
+          "description": "Format of message used to announce current step when navigating between steps.\nThe string {current} is replaced with current the step number.\nThe string {total} is replaced with the total number of steps."
+        },
+        {
+          "name": "back-disabled",
+          "description": "Controls whether navigation back to previous steps is allowed or not."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "selected",
+          "description": "The index of the current step."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the component.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-stepper/duet-stepper.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-tab",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Tab\nname: duet-tab\nstatus: ready\nreleased: 2.6.8\naccessibility: Keyboard, Screen Reader\ninternationalization: Supported\nssr: Supported\ncategory: Navigation\nintro: Tab is a component used inside the Tab Group to generate panels that can\n  be navigated using tabs. For concrete usage examples, please see <a\n  href=\"/components/tab-group/\">Tab Group component</a>.\nplatforms: Web only\nexamples:\n  - name: tab\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Label for the tab."
+        },
+        {
+          "name": "selected",
+          "description": "Selected state of the tab."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-tab/duet-tab.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-tab-group",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Tab Group\nname: duet-tab-group\nstatus: ready\nreleased: 2.6.8\naccessibility: Keyboard, Screen Reader\ninternationalization: Supported\nssr: Supported\ncategory: Navigation\nintro: Tab Group is used as a graphical interface element that allows multiple\n  panels to be contained within a single window, using tabs as a navigational\n  element.\ndescription: When there are 4 or more navigation items in the Tab Group it’s\n  automatically converted to a select menu on small viewports.\nplatforms: Web only\nexamples:\n  - name: tab group\n    code: This first example creates the actual URL and DOCS, hence it needs to be here.\n  - name: Simple tab group\n    file: fixtures/duet-tab-group_simple_tab_group.html\n  - name: Tabs that switch between cards\n    file: fixtures/duet-tab-group_tabs_that_switch_between_cards.html\n  - name: Nested tab groups\n    file: fixtures/duet-tab-group_nested_tab_groups.html\n  - name: Tabs with a visible label on mobile\n    file: fixtures/duet-tab-group_visible_label_on_mobile.html\n  - name: Plain tab variation\n    file: fixtures/duet-tab-group_plain_tab_variation.html\n  - name: Plain tab variation with centered tabs\n    file: fixtures/duet-tab-group_plain_tab_variation_with_centered_tabs.html\n  - name: Plain tab variation with background color for tab content\n    file: fixtures/duet-tab-group_plain_tab_variation_with_background_color_for_tab_content.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Label for the select element which gets shown on mobile."
+        },
+        {
+          "name": "label-default",
+          "description": "Defaults for Label"
+        },
+        {
+          "name": "label-hidden",
+          "description": "Determines whether the label for the select element shown on mobile is visually hidden."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the accessible labels to match the\nchosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "padding",
+          "description": "Controls the padding of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the component.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the tab group.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "plain"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-table",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Table\nname: duet-table\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 3.4.0\nssr: Supported\nintro: Table is a lightweight and un-opinionated component for enhancing tabular\n  data. It offers features like sticky headers, support for narrow viewport\n  widths, and table styles.\ndescription: It’s important to pay close attention to semantics when authoring\n  tables with Duet Table component. The markup in the examples below can be used\n  as a starting point for most tables. However, be aware that HTML tables have a\n  large feature set, which cannot be covered exhaustively here.\nexample_height: 400px\nexamples:\n  - name: table\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic table usage\n    file: fixtures/duet-table_basic_table_usage.html\n  - name: Plain table variation\n    file: fixtures/duet-table_plain_table_variation.html\n  - name: Table with right-aligned final column\n    file: fixtures/duet-table_table_with_right-aligned_final_column.html\n  - name: Table with a custom breakpoint\n    file: fixtures/duet-table_table_with_a_custom_breakpoint.html\n  - name: Table with a footer\n    file: fixtures/duet-table_table_with_a_footer.html\n  - name: Table with a sticky header\n    file: fixtures/duet-table_table_with_a_sticky_header.html\n  - name: Table with multiple bodies and sub-headings\n    file: fixtures/duet-table_table_with_multiple_bodies_and_sub-headings.html\n  - name: Comparison table\n    file: fixtures/duet-table_comparison_table.html\n  - name: Table with inline actions\n    file: fixtures/duet-table_table_with_inline_actions.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "breakpoint",
+          "description": "By default the table is responsive - it will be flattened at narrow viewport widths.\nThis prop controls the breakpoint at which the table should be rendered as a _regular_ table.\nSet to \"none\" to disable the responsive functionality.\nSet to \"none-scrollable\" to disable responsive functionality _and_ allow horizontal scrolling -\nthis is useful for comparison tables where it's important to maintain column and row layout.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "none-scrollable"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "xx-large"
+            },
+            {
+              "name": "xxx-large"
+            }
+          ]
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "sticky",
+          "description": "Controls whether the table has a sticky header.\nSticky headers are not compatible with breakpoint=\"none-scrollable\"."
+        },
+        {
+          "name": "sticky-distance",
+          "description": "Adjust the distance from top of the viewport (in pixels) when the\ntable header becomes sticky.",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "with-links"
+            },
+            {
+              "name": "without-links"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the table.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "Style variation of the table.",
+          "values": [
+            {
+              "name": "plain"
+            },
+            {
+              "name": "striped"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-table/duet-table.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-textarea",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Textarea\nname: duet-textarea\nstatus: ready\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nreleased: 1.3.0\nssr: Supported\ncategory: Forms\nexample_height: 320px\nintro: Textarea specifies a control that allows user to write text over multiple\n  rows. Used when the expected user input is long. For shorter input, use the\n  Input component.\ndescription: You can use native HTML5 validation with Textarea component via\n  validation properties. This allows you to specify rules like whether a value\n  needs to be filled in and the minimum and maximum length of the data.\nexamples:\n  - name: textarea\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default textarea\n    file: fixtures/duet-textarea_default_textarea.html\n  - name: Textarea without expand property\n    file: fixtures/duet-textarea_textarea_without_expand_property.html\n  - name: Disabled textarea\n    file: fixtures/duet-textarea_disabled_textarea.html\n  - name: Textarea with error\n    file: fixtures/duet-textarea_textarea_with_error.html\n  - name: Textarea with character counter\n    file: fixtures/duet-textarea_textarea_with_character_counter.html\n  - name: Textarea with character counter and error\n    file: fixtures/duet-textarea_textarea_with_character_counter_and_error.html\n  - name: Textarea that only allows numbers and commas\n    file: fixtures/duet-textarea_textarea_that_only_allows_numbers_and_commas.html\n  - name: Textarea that has caption and echoing placeholder\n    file: fixtures/duet-textarea_caption_and_echoing_placeholder.html\ntags:\n  - docs-components\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-autocomplete",
+          "description": "Indicates what kind of user input completion suggestions are provided."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the input."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the textarea."
+        },
+        {
+          "name": "caption",
+          "description": "Caption (underneath label) that can be set as a way of adding extra information"
+        },
+        {
+          "name": "counter",
+          "description": "Display character counter. Must be used in conjunction with\n**maxlength** and **counterLabel** properties."
+        },
+        {
+          "name": "counter-label",
+          "description": "Accessible label for character counter. Must be used in conjunction with\n**counter** property."
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the textarea component disabled. This prevents users from being able\nto interact with the textarea, and conveys its inactive state to assistive\ntechnologies."
+        },
+        {
+          "name": "disallow-pattern",
+          "description": "A regular expression that matches any characters which should be *disallowed*.\nThis differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.\ne.g. the following will disallow any non-numeric characters `[^0-9]`"
+        },
+        {
+          "name": "echo-placeholder",
+          "description": "If form input field has a placeholder text, and user types anything (causing the text to dissapear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
+        },
+        {
+          "name": "error",
+          "description": "Display the textarea in error state along with an error message."
+        },
+        {
+          "name": "expand",
+          "description": "Expands the textarea to fill 100% of the container width."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the textarea."
+        },
+        {
+          "name": "label",
+          "description": "Label for the textarea."
+        },
+        {
+          "name": "label-hidden",
+          "description": "Visually hide the label, but still show it to screen readers."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "maxlength",
+          "description": "Use maxlength to specify the maximum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+        },
+        {
+          "name": "minlength",
+          "description": "Use minlength to specify the minimum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+        },
+        {
+          "name": "name",
+          "description": "Name of the textarea."
+        },
+        {
+          "name": "placeholder",
+          "description": "Hint text to display."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the textarea is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the input."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the textarea.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip to display next to the label of the input."
+        },
+        {
+          "name": "tooltip-direction",
+          "description": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Value of the textarea."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-toggle",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Toggle\nname: duet-toggle\nstatus: ready\nreleased: 1.3.0\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Actions\nintro: Toggles are graphical interface switches that give user control over a\n  feature or option that can be turned on or off.\nplatforms: Web only\nexamples:\n  - name: toggle\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Checked toggle\n    file: fixtures/duet-toggle_checked_toggle.html\n  - name: Unchecked toggle\n    file: fixtures/duet-toggle_unchecked_toggle.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-active-descendant",
+          "description": "Indicates the id of a related component’s visually focused element."
+        },
+        {
+          "name": "accessible-controls",
+          "description": "Use this prop to add an aria-controls attribute. Use the attribute to indicate\nthe id of a component controlled by this component."
+        },
+        {
+          "name": "accessible-described-by",
+          "description": "Indicates the id of a component that describes the toggle."
+        },
+        {
+          "name": "accessible-owns",
+          "description": "Indicates the id of a component owned by the toggle."
+        },
+        {
+          "name": "checked",
+          "description": "Check state of the checkbox."
+        },
+        {
+          "name": "disabled",
+          "description": "Makes the input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        {
+          "name": "identifier",
+          "description": "Adds a unique identifier for the checkbox."
+        },
+        {
+          "name": "label",
+          "description": "Label for the toggle."
+        },
+        {
+          "name": "margin",
+          "description": "Controls the margin of the component.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name of the checkbox."
+        },
+        {
+          "name": "required",
+          "description": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set “novalidate” attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        {
+          "name": "role",
+          "description": "Defines a specific role attribute for the input."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the card.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the checkbox does not mean if it's checked or not, use the checked\nproperty for that."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-toggle/duet-toggle.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-tooltip",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Tooltip\nname: duet-tooltip\nstatus: ready\nreleased: 1.5.0\ninternationalization: Supported\nplatforms: Web only\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Messaging\nintro: Tooltips are floating labels that briefly explain the function of a user\n  interface element. They can be triggered when user clicks or navigates to it\n  via keyboard.\ndescription: Please keep in mind that when the screen width is under 768px this\n  component should always be positioned on the right side of the screen as it’s\n  going to open towards left.\nexample_height: 400px\nexamples:\n  - name: tooltip\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default tooltip\n    file: fixtures/duet-tooltip_default_tooltip.html\n  - name: Tooltip with a label\n    file: fixtures/duet-tooltip_tooltip_with_a_label.html\n  - name: Tooltip in input\n    file: fixtures/duet-tooltip_tooltip_in_input.html\n  - name: Tooltip using large breakpoint\n    file: fixtures/duet-tooltip_tooltip_using_large_breakpoint.html\n  - name: Tooltip that always opens to right\n    file: fixtures/duet-tooltip_tooltip_that_always_opens_to_right.html\n  - name: Tooltip that always opens to left\n    file: fixtures/duet-tooltip_tooltip_that_always_opens_to_left.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-close-label",
+          "description": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!"
+        },
+        {
+          "name": "accessible-close-label-default",
+          "description": "Default language strings for the accessibleCloseLabel"
+        },
+        {
+          "name": "accessible-label",
+          "description": "Adds accessible label for the info icon that is only shown for screen\nreaders. This property is always required to create an accessible interface!"
+        },
+        {
+          "name": "accessible-label-default",
+          "description": "Default language strings for the accessibleLabel"
+        },
+        {
+          "name": "active",
+          "description": "Toggle whether the tooltip is initially visible or not. This property should\nnot be used in production in most cases."
+        },
+        {
+          "name": "breakpoint",
+          "description": "Adjust the responsive breakpoint where tooltip starts opening towards left.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            }
+          ]
+        },
+        {
+          "name": "direction",
+          "description": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Label of the tooltip. If used, replaces the accessibleLabel option."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the accessible labels to match the\nchosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "position-horizontal",
+          "description": "Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a\nnegative value as well. E.g. \"-13px\"."
+        },
+        {
+          "name": "position-vertical",
+          "description": "Adjust the vertical positioning of the tooltip toggle in pixels. Can be a\nnegative value as well. E.g. \"-13px\"."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the tooltip.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-tray",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Tray\nname: duet-tray\nstatus: ready\nreleased: 4.2.0\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\nexample_height: 450px\ncategory: Forms\nintro: Tray component is used to reveal additional information on a small\n  viewport, that would normally be shown in the sticky sidebar of the <a\n  href=\"/components/layout/\">Layout</a> component.\ndescription: While many of the below examples show Tray on desktop viewports,\n  this component is primarily meant to be used on mobile viewports where the\n  main navigation bar isn’t visible. For more usage examples in real context,\n  please see <a href=\"/templates/stepper-components/\">Stepper template</a>.\nexamples:\n  - name: tray\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Tray that shows on all viewports\n    file: fixtures/duet-tray_tray_that_shows_on_all_viewports.html\n  - name: Tray that only shows on small viewports\n    file: fixtures/duet-tray_tray_that_only_shows_on_small_viewports.html\n  - name: Dismissible tray\n    file: fixtures/duet-tray_dismissible_tray.html\n  - name: Tray with expandable section\n    file: fixtures/duet-tray_tray_with_expandable_section.html\n  - name: Scroll to element on tray click\n    file: fixtures/duet-tray_scroll_to_element_on_tray_click.html\ntags:\n  - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-close-label",
+          "description": "Accessible label that is shown for screen reader users in the expandable\nclose toggle. Not visible for normal users."
+        },
+        {
+          "name": "accessible-close-label-default",
+          "description": "Defaults for accessibleCloseLabel"
+        },
+        {
+          "name": "accessible-open-label",
+          "description": "Accessible label that is shown for screen reader users in the expandable\nopen toggle. Not visible for normal users."
+        },
+        {
+          "name": "accessible-open-label-default",
+          "description": "Defaults for accessibleOpenLabel"
+        },
+        {
+          "name": "active",
+          "description": "Toggle whether the info panel is visible or not. You can use this\nproperty e.g. when pricing information is revealed to the user."
+        },
+        {
+          "name": "auto-hide",
+          "description": "Hide the info panel when user scrolls back to the top of the viewport."
+        },
+        {
+          "name": "language",
+          "description": "The currently active language. This setting changes the accessible labels to match the\nchosen language.",
+          "values": [
+            {
+              "name": "en"
+            },
+            {
+              "name": "fi"
+            },
+            {
+              "name": "sv"
+            }
+          ]
+        },
+        {
+          "name": "responsive",
+          "description": "Enable or disable the automatic responsive behaviour which\nmakes the info panel hide on larger viewports. Settings this to\n\"false\" means that the header panel is visible on all device sizes."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the info panel.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-tray/duet-tray.tsx"
+        }
+      ]
+    },
+    {
+      "name": "duet-visually-hidden",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Visually Hidden\nname: duet-visually-hidden\nstatus: ready\nreleased: 1.0.28\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Text\nintro: Visually Hidden is used when an element needs to be available to\n  assistive technology, but otherwise hidden.\ndescription: The visually hidden component hides text visually from screen, but\n  keeps it available to assistive technologies, such as screen readers. The\n  component shouldn’t be used to hide interactive content.\nplatforms: Web only\ntags:\n  - docs-components\nexamples:\n  - name: visually hidden\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default visually hidden\n    file: fixtures/duet-visually-hidden_default_visually_hidden.html\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-visually-hidden/duet-visually-hidden.tsx"
+        }
+      ]
+    }
+  ]
+}