LingChair/mdui_patched/web-types.en.json

{
  "$schema": "http://json.schemastore.org/web-types",
  "name": "mdui",
  "version": "2.1.4",
  "js-types-syntax": "typescript",
  "description-markup": "markdown",
  "framework-config": {
    "enable-when": {
      "node-packages": [
        "mdui"
      ]
    }
  },
  "contributions": {
    "html": {
      "elements": [
        {
          "name": "mdui-avatar",
          "description": "Avatar Component \n\n```html\n<mdui-avatar src=\"https://avatars githubusercontent com/u/3030330?s=40&v=4\"></mdui-avatar>\n```",
          "attributes": [
            {
              "name": "src",
              "description": "URL of the avatar image.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-src"
            },
            {
              "name": "fit",
              "description": "Image resizing method, similar to the native CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). Possible values:\n\n* `contain`: Scales the image to fit within the box while maintaining the aspect ratio. The image will be \"letterboxed\" if the aspect ratios do not match.\n* `cover`: Scales the image to fill the box while maintaining the aspect ratio. The image will be clipped if the aspect ratios do not match.\n* `fill`: Default. Scales the image to fill the box. The image will be stretched if the aspect ratios do not match.\n* `none`: No resizing.\n* `scale-down`: Scales as if `none` or `contain` were specified, choosing the smaller result.",
              "value": {
                "type": [
                  "'contain'",
                  "'cover'",
                  "'fill'",
                  "'none'",
                  "'scale-down'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-fit"
            },
            {
              "name": "icon",
              "description": "The Material Icons name for the avatar.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-icon"
            },
            {
              "name": "label",
              "description": "Text description of the avatar.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-label"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/avatar",
          "slots": [
            {
              "name": "",
              "description": "Custom avatar content, such as letters, `<img>` elements, icons, etc.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "src",
                "description": "URL of the avatar image.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-src"
              },
              {
                "name": "fit",
                "description": "Image resizing method, similar to the native CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). Possible values:\n\n* `contain`: Scales the image to fit within the box while maintaining the aspect ratio. The image will be \"letterboxed\" if the aspect ratios do not match.\n* `cover`: Scales the image to fill the box while maintaining the aspect ratio. The image will be clipped if the aspect ratios do not match.\n* `fill`: Default. Scales the image to fill the box. The image will be stretched if the aspect ratios do not match.\n* `none`: No resizing.\n* `scale-down`: Scales as if `none` or `contain` were specified, choosing the smaller result.",
                "value": {
                  "type": [
                    "'contain'",
                    "'cover'",
                    "'fill'",
                    "'none'",
                    "'scale-down'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-fit"
              },
              {
                "name": "icon",
                "description": "The Material Icons name for the avatar.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-icon"
              },
              {
                "name": "label",
                "description": "Text description of the avatar.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-label"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#cssProperties-shape-corner"
              }
            ],
            "parts": [
              {
                "name": "image",
                "description": "Internal `<img>` element when using an image avatar.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#cssParts-image"
              },
              {
                "name": "icon",
                "description": "Internal `<mdui-icon>` element when using an icon avatar.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/avatar#cssParts-icon"
              }
            ]
          }
        },
        {
          "name": "mdui-badge",
          "description": "Badge Component \n\n```html\n<mdui-badge>12</mdui-badge>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the badge shape. Possible values:\n* `small`: A small badge without text.\n* `large`: A large badge with displayed text.",
              "value": {
                "type": [
                  "'small'",
                  "'large'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/badge#attributes-variant"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/badge",
          "slots": [
            {
              "name": "",
              "description": "The text to be displayed.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/badge#slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the badge shape. Possible values:\n* `small`: A small badge without text.\n* `large`: A large badge with displayed text.",
                "value": {
                  "type": [
                    "'small'",
                    "'large'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/badge#attributes-variant"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/badge#cssProperties-shape-corner"
              }
            ]
          }
        },
        {
          "name": "mdui-bottom-app-bar",
          "description": "Bottom App Bar Component \n\n```html\n<mdui-bottom-app-bar>\n  <mdui-button-icon icon=\"check_box--outlined\"></mdui-button-icon>\n  <mdui-button-icon icon=\"edit--outlined\"></mdui-button-icon>\n  <mdui-button-icon icon=\"mic_none--outlined\"></mdui-button-icon>\n  <mdui-button-icon icon=\"image--outlined\"></mdui-button-icon>\n  <div style=\"flex-grow: 1\"></div>\n  <mdui-fab icon=\"add\"></mdui-fab>\n</mdui-bottom-app-bar>\n```",
          "attributes": [
            {
              "name": "hide",
              "description": "Hides the bottom app bar when set.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-hide"
            },
            {
              "name": "fab-detach",
              "description": "When set, detaches the [`<mdui-fab>`](https://www.mdui.org/en/docs/2/components/fab) from the bottom app bar. The [`<mdui-fab>`](https://www.mdui.org/en/docs/2/components/fab) remains on the page even after the app bar is hidden.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-fab-detach"
            },
            {
              "name": "scroll-behavior",
              "description": "Defines the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
              "value": {
                "type": [
                  "'hide'",
                  "'shrink'",
                  "'elevate'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scroll-behavior"
            },
            {
              "name": "scroll-target",
              "description": "The element that listens for scroll events. Accepts a CSS selector, DOM element, or [JQ object](https://www.mdui.org/en/docs/2/functions/jq). Defaults to `window`.",
              "value": {
                "type": [
                  "string",
                  "HTMLElement",
                  "JQ<HTMLElement>"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scroll-target"
            },
            {
              "name": "scroll-threshold",
              "description": "The scroll distance (in pixels) that triggers the scroll behavior.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scroll-threshold"
            },
            {
              "name": "order",
              "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-order"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar",
          "slots": [
            {
              "name": "",
              "description": "Elements within the bottom app bar.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "hide",
                "description": "Hides the bottom app bar when set.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-hide"
              },
              {
                "name": "fabDetach",
                "description": "When set, detaches the [`<mdui-fab>`](https://www.mdui.org/en/docs/2/components/fab) from the bottom app bar. The [`<mdui-fab>`](https://www.mdui.org/en/docs/2/components/fab) remains on the page even after the app bar is hidden.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-fabDetach"
              },
              {
                "name": "scrollBehavior",
                "description": "Defines the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
                "value": {
                  "type": [
                    "'hide'",
                    "'shrink'",
                    "'elevate'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scrollBehavior"
              },
              {
                "name": "scrollTarget",
                "description": "The element that listens for scroll events. Accepts a CSS selector, DOM element, or [JQ object](https://www.mdui.org/en/docs/2/functions/jq). Defaults to `window`.",
                "value": {
                  "type": [
                    "string",
                    "HTMLElement",
                    "JQ<HTMLElement>"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scrollTarget"
              },
              {
                "name": "scrollThreshold",
                "description": "The scroll distance (in pixels) that triggers the scroll behavior.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scrollThreshold"
              },
              {
                "name": "order",
                "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-order"
              }
            ],
            "events": [
              {
                "name": "show",
                "description": "Emitted when the bottom app bar starts to show. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-show"
              },
              {
                "name": "shown",
                "description": "Emitted after the bottom app bar has shown and animations are complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-shown"
              },
              {
                "name": "hide",
                "description": "Emitted when the bottom app bar starts to hide. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-hide"
              },
              {
                "name": "hidden",
                "description": "Emitted after the bottom app bar has hidden and animations are complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-hidden"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#cssProperties-shape-corner"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#cssProperties-z-index"
              }
            ]
          }
        },
        {
          "name": "mdui-button-icon",
          "description": "Icon Button Component \n\n```html\n<mdui-button-icon icon=\"search\"></mdui-button-icon>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the icon button style. Possible values:\n* `standard`: For low-priority actions.\n* `filled`: Has the strongest visual effect, suitable for high-priority actions.\n* `tonal`: A visual effect between `filled` and `outlined`, suitable for medium to high-priority actions.\n* `outlined`: For medium-priority actions.",
              "value": {
                "type": [
                  "'standard'",
                  "'filled'",
                  "'tonal'",
                  "'outlined'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-variant"
            },
            {
              "name": "icon",
              "description": "Specifies the Material Icons name. Alternatively, use the default slot.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-icon"
            },
            {
              "name": "selected-icon",
              "description": "Specifies the Material Icons name when selected. Alternatively, use `slot=\"selected-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selected-icon"
            },
            {
              "name": "selectable",
              "description": "Indicates if the button is selectable.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selectable"
            },
            {
              "name": "selected",
              "description": "Indicates if the button is selected.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selected"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-tabindex"
            },
            {
              "name": "disabled",
              "description": "Disables the element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-disabled"
            },
            {
              "name": "loading",
              "description": "Indicates that the element is in a loading state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-loading"
            },
            {
              "name": "name",
              "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-name"
            },
            {
              "name": "value",
              "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-value"
            },
            {
              "name": "type",
              "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": [
                  "'submit'",
                  "'reset'",
                  "'button'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-type"
            },
            {
              "name": "form",
              "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-form"
            },
            {
              "name": "formaction",
              "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formaction"
            },
            {
              "name": "formenctype",
              "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'application/x-www-form-urlencoded'",
                  "'multipart/form-data'",
                  "'text/plain'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formenctype"
            },
            {
              "name": "formmethod",
              "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'post'",
                  "'get'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formmethod"
            },
            {
              "name": "formnovalidate",
              "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formnovalidate"
            },
            {
              "name": "formtarget",
              "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'_self'",
                  "'_blank'",
                  "'_parent'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formtarget"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon",
          "slots": [
            {
              "name": "",
              "description": "Icon component.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#slots-default"
            },
            {
              "name": "selected-icon",
              "description": "Icon in the selected state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#slots-selected-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the icon button style. Possible values:\n* `standard`: For low-priority actions.\n* `filled`: Has the strongest visual effect, suitable for high-priority actions.\n* `tonal`: A visual effect between `filled` and `outlined`, suitable for medium to high-priority actions.\n* `outlined`: For medium-priority actions.",
                "value": {
                  "type": [
                    "'standard'",
                    "'filled'",
                    "'tonal'",
                    "'outlined'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-variant"
              },
              {
                "name": "icon",
                "description": "Specifies the Material Icons name. Alternatively, use the default slot.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-icon"
              },
              {
                "name": "selectedIcon",
                "description": "Specifies the Material Icons name when selected. Alternatively, use `slot=\"selected-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selectedIcon"
              },
              {
                "name": "selectable",
                "description": "Indicates if the button is selectable.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selectable"
              },
              {
                "name": "selected",
                "description": "Indicates if the button is selected.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selected"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-tabIndex"
              },
              {
                "name": "disabled",
                "description": "Disables the element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-disabled"
              },
              {
                "name": "loading",
                "description": "Indicates that the element is in a loading state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-loading"
              },
              {
                "name": "name",
                "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-name"
              },
              {
                "name": "value",
                "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-value"
              },
              {
                "name": "type",
                "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": [
                    "'submit'",
                    "'reset'",
                    "'button'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-type"
              },
              {
                "name": "form",
                "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-form"
              },
              {
                "name": "formAction",
                "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formAction"
              },
              {
                "name": "formEnctype",
                "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'application/x-www-form-urlencoded'",
                    "'multipart/form-data'",
                    "'text/plain'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formEnctype"
              },
              {
                "name": "formMethod",
                "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'post'",
                    "'get'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formMethod"
              },
              {
                "name": "formNoValidate",
                "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formNoValidate"
              },
              {
                "name": "formTarget",
                "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'_self'",
                    "'_blank'",
                    "'_parent'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formTarget"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-validationMessage"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the button gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the button loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the selected state changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-change"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-invalid"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssProperties-shape-corner"
              }
            ],
            "parts": [
              {
                "name": "button",
                "description": "Internal `<button>` or `<a>` element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-button"
              },
              {
                "name": "icon",
                "description": "Icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-icon"
              },
              {
                "name": "selected-icon",
                "description": "Icon in the selected state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-selected-icon"
              },
              {
                "name": "loading",
                "description": "The `<mdui-circular-progress>` element for the loading state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-loading"
              }
            ]
          }
        },
        {
          "name": "mdui-button",
          "description": "Button Component \n\n```html\n<mdui-button>Button</mdui-button>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the button style. Possible values:\n* `elevated`: A shadowed button for visual distinction.\n* `filled`: Used for final actions like 'Save' or 'Confirm'.\n* `tonal`: A mix between `filled` and `outlined`, suitable for medium to high-priority actions.\n* `outlined`: A bordered button for medium-priority and secondary actions.\n* `text`: A text button for low-priority actions.",
              "value": {
                "type": [
                  "'elevated'",
                  "'filled'",
                  "'tonal'",
                  "'outlined'",
                  "'text'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-variant"
            },
            {
              "name": "full-width",
              "description": "If set, the button will fill the width of its parent element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-full-width"
            },
            {
              "name": "icon",
              "description": "Specifies the Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-icon"
            },
            {
              "name": "end-icon",
              "description": "Specifies the Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-end-icon"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Specifies that the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-tabindex"
            },
            {
              "name": "disabled",
              "description": "Disables the element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-disabled"
            },
            {
              "name": "loading",
              "description": "Indicates that the element is in a loading state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-loading"
            },
            {
              "name": "name",
              "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-name"
            },
            {
              "name": "value",
              "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-value"
            },
            {
              "name": "type",
              "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": [
                  "'submit'",
                  "'reset'",
                  "'button'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-type"
            },
            {
              "name": "form",
              "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-form"
            },
            {
              "name": "formaction",
              "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formaction"
            },
            {
              "name": "formenctype",
              "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'application/x-www-form-urlencoded'",
                  "'multipart/form-data'",
                  "'text/plain'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formenctype"
            },
            {
              "name": "formmethod",
              "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'post'",
                  "'get'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formmethod"
            },
            {
              "name": "formnovalidate",
              "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formnovalidate"
            },
            {
              "name": "formtarget",
              "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'_self'",
                  "'_blank'",
                  "'_parent'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formtarget"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/button",
          "slots": [
            {
              "name": "",
              "description": "Button text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#slots-default"
            },
            {
              "name": "icon",
              "description": "Element on the left side of the button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#slots-icon"
            },
            {
              "name": "end-icon",
              "description": "Element on the right side of the button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/button#slots-end-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the button style. Possible values:\n* `elevated`: A shadowed button for visual distinction.\n* `filled`: Used for final actions like 'Save' or 'Confirm'.\n* `tonal`: A mix between `filled` and `outlined`, suitable for medium to high-priority actions.\n* `outlined`: A bordered button for medium-priority and secondary actions.\n* `text`: A text button for low-priority actions.",
                "value": {
                  "type": [
                    "'elevated'",
                    "'filled'",
                    "'tonal'",
                    "'outlined'",
                    "'text'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-variant"
              },
              {
                "name": "fullWidth",
                "description": "If set, the button will fill the width of its parent element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-fullWidth"
              },
              {
                "name": "icon",
                "description": "Specifies the Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-icon"
              },
              {
                "name": "endIcon",
                "description": "Specifies the Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-endIcon"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Specifies that the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-tabIndex"
              },
              {
                "name": "disabled",
                "description": "Disables the element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-disabled"
              },
              {
                "name": "loading",
                "description": "Indicates that the element is in a loading state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-loading"
              },
              {
                "name": "name",
                "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-name"
              },
              {
                "name": "value",
                "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-value"
              },
              {
                "name": "type",
                "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": [
                    "'submit'",
                    "'reset'",
                    "'button'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-type"
              },
              {
                "name": "form",
                "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-form"
              },
              {
                "name": "formAction",
                "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formAction"
              },
              {
                "name": "formEnctype",
                "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'application/x-www-form-urlencoded'",
                    "'multipart/form-data'",
                    "'text/plain'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formEnctype"
              },
              {
                "name": "formMethod",
                "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'post'",
                    "'get'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formMethod"
              },
              {
                "name": "formNoValidate",
                "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formNoValidate"
              },
              {
                "name": "formTarget",
                "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'_self'",
                    "'_blank'",
                    "'_parent'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formTarget"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-validationMessage"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the button gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the button loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#events-blur"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#events-invalid"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#cssProperties-shape-corner"
              }
            ],
            "parts": [
              {
                "name": "button",
                "description": "Internal `<button>` or `<a>` element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-button"
              },
              {
                "name": "label",
                "description": "Button text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-label"
              },
              {
                "name": "icon",
                "description": "Icon on the left side of the button.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-icon"
              },
              {
                "name": "end-icon",
                "description": "Icon on the right side of the button.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-end-icon"
              },
              {
                "name": "loading",
                "description": "The `<mdui-circular-progress>` element for the loading state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-loading"
              }
            ]
          }
        },
        {
          "name": "mdui-card",
          "description": "Card Component \n\n```html\n<mdui-card>card content</mdui-card>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the card style. Possible values:\n* `elevated`: Shadowed, providing more visual separation from the background than `filled`, but less than `outlined`.\n* `filled`: Provides minimal visual separation from the background.\n* `outlined`: Bordered, providing maximum visual separation from the background.",
              "value": {
                "type": [
                  "'elevated'",
                  "'filled'",
                  "'outlined'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-variant"
            },
            {
              "name": "clickable",
              "description": "Makes the card clickable. When set, a mouse hover effect and click ripple effect are added.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-clickable"
            },
            {
              "name": "disabled",
              "description": "Disables the card.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-disabled"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/card",
          "slots": [
            {
              "name": "",
              "description": "Card content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/card#slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the card style. Possible values:\n* `elevated`: Shadowed, providing more visual separation from the background than `filled`, but less than `outlined`.\n* `filled`: Provides minimal visual separation from the background.\n* `outlined`: Bordered, providing maximum visual separation from the background.",
                "value": {
                  "type": [
                    "'elevated'",
                    "'filled'",
                    "'outlined'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-variant"
              },
              {
                "name": "clickable",
                "description": "Makes the card clickable. When set, a mouse hover effect and click ripple effect are added.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-clickable"
              },
              {
                "name": "disabled",
                "description": "Disables the card.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-disabled"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the card gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the card loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#events-blur"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/card#cssProperties-shape-corner"
              }
            ]
          }
        },
        {
          "name": "mdui-checkbox",
          "description": "Checkbox Component \n\n```html\n<mdui-checkbox>Checkbox</mdui-checkbox>\n```",
          "attributes": [
            {
              "name": "disabled",
              "description": "Dsiables the checkbox.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-disabled"
            },
            {
              "name": "checked",
              "description": "Sets the checkbox to the checked state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checked"
            },
            {
              "name": "indeterminate",
              "description": "Sets the checkbox to an indeterminate state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminate"
            },
            {
              "name": "required",
              "description": "Requires the checkbox to be checked for form submission.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-required"
            },
            {
              "name": "form",
              "description": "Associates the checkbox with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the checkbox is associated with its parent `<form>`, if any.\n\nThis attribute allows checkbox elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-form"
            },
            {
              "name": "name",
              "description": "Sets the checkbox's name, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-name"
            },
            {
              "name": "value",
              "description": "Sets the checkbox's value, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-value"
            },
            {
              "name": "unchecked-icon",
              "description": "Sets the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-unchecked-icon"
            },
            {
              "name": "checked-icon",
              "description": "Sets the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checked-icon"
            },
            {
              "name": "indeterminate-icon",
              "description": "Sets the Material Icons name for the indeterminate state. Alternatively, use `slot=\"indeterminate-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminate-icon"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox",
          "slots": [
            {
              "name": "",
              "description": "Text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-default"
            },
            {
              "name": "unchecked-icon",
              "description": "Icon for the unchecked state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-unchecked-icon"
            },
            {
              "name": "checked-icon",
              "description": "Icon for the checked state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-checked-icon"
            },
            {
              "name": "indeterminate-icon",
              "description": "Icon for the indeterminate state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-indeterminate-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "disabled",
                "description": "Dsiables the checkbox.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-disabled"
              },
              {
                "name": "checked",
                "description": "Sets the checkbox to the checked state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checked"
              },
              {
                "name": "defaultChecked",
                "description": "Sets the default checked state. Resets to this state when the form is reset. Can only be set via JavaScript property.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-defaultChecked"
              },
              {
                "name": "indeterminate",
                "description": "Sets the checkbox to an indeterminate state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminate"
              },
              {
                "name": "required",
                "description": "Requires the checkbox to be checked for form submission.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-required"
              },
              {
                "name": "form",
                "description": "Associates the checkbox with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the checkbox is associated with its parent `<form>`, if any.\n\nThis attribute allows checkbox elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-form"
              },
              {
                "name": "name",
                "description": "Sets the checkbox's name, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-name"
              },
              {
                "name": "value",
                "description": "Sets the checkbox's value, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-value"
              },
              {
                "name": "uncheckedIcon",
                "description": "Sets the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-uncheckedIcon"
              },
              {
                "name": "checkedIcon",
                "description": "Sets the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checkedIcon"
              },
              {
                "name": "indeterminateIcon",
                "description": "Sets the Material Icons name for the indeterminate state. Alternatively, use `slot=\"indeterminate-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminateIcon"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-validationMessage"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the checkbox gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the checkbox loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the checked state changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-change"
              },
              {
                "name": "input",
                "description": "Emitted when the checked state changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-input"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-invalid"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "control",
                "description": "Container for the left icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-control"
              },
              {
                "name": "unchecked-icon",
                "description": "Icon for the unchecked state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-unchecked-icon"
              },
              {
                "name": "checked-icon",
                "description": "Icon for the checked state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-checked-icon"
              },
              {
                "name": "indeterminate-icon",
                "description": "Icon for the indeterminate state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-indeterminate-icon"
              },
              {
                "name": "label",
                "description": "Text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-label"
              }
            ]
          }
        },
        {
          "name": "mdui-chip",
          "description": "Chip Component \n\n```html\n<mdui-chip>Chip</mdui-chip>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the chip type. Possible values:\n\n* `assist`: Displays auxiliary actions related to the context, such as sharing and favoriting on a meal ordering page.\n* `filter`: Filters content, like search results on a search results page.\n* `input`: Represents fragments of user input, such as contacts in the 'To' field in Gmail.\n* `suggestion`: Provides dynamically generated suggestions to simplify user actions, like message predictions in a chat application.",
              "value": {
                "type": [
                  "'assist'",
                  "'filter'",
                  "'input'",
                  "'suggestion'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-variant"
            },
            {
              "name": "elevated",
              "description": "Gives the chip a shadow.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-elevated"
            },
            {
              "name": "selectable",
              "description": "Makes the chip selectable.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selectable"
            },
            {
              "name": "selected",
              "description": "Marks the chip as selected.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selected"
            },
            {
              "name": "deletable",
              "description": "Makes the chip deletable. When set, a delete icon appears on the right.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-deletable"
            },
            {
              "name": "icon",
              "description": "Sets the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-icon"
            },
            {
              "name": "selected-icon",
              "description": "Sets the Material Icons name for the left icon when selected. Alternatively, use `slot=\"selected-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selected-icon"
            },
            {
              "name": "end-icon",
              "description": "Sets the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-end-icon"
            },
            {
              "name": "delete-icon",
              "description": "Sets the Material Icons name for the delete icon when deletable. Alternatively, use `slot=\"delete-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-delete-icon"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Specifies that the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-tabindex"
            },
            {
              "name": "disabled",
              "description": "Disables the element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-disabled"
            },
            {
              "name": "loading",
              "description": "Indicates that the element is in a loading state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-loading"
            },
            {
              "name": "name",
              "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-name"
            },
            {
              "name": "value",
              "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-value"
            },
            {
              "name": "type",
              "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": [
                  "'submit'",
                  "'reset'",
                  "'button'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-type"
            },
            {
              "name": "form",
              "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-form"
            },
            {
              "name": "formaction",
              "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formaction"
            },
            {
              "name": "formenctype",
              "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'application/x-www-form-urlencoded'",
                  "'multipart/form-data'",
                  "'text/plain'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formenctype"
            },
            {
              "name": "formmethod",
              "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'post'",
                  "'get'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formmethod"
            },
            {
              "name": "formnovalidate",
              "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formnovalidate"
            },
            {
              "name": "formtarget",
              "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'_self'",
                  "'_blank'",
                  "'_parent'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formtarget"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/chip",
          "slots": [
            {
              "name": "",
              "description": "Text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-default"
            },
            {
              "name": "icon",
              "description": "Left icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-icon"
            },
            {
              "name": "end-icon",
              "description": "Right icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-end-icon"
            },
            {
              "name": "selected-icon",
              "description": "Left icon when selected.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-selected-icon"
            },
            {
              "name": "delete-icon",
              "description": "Delete icon when deletable.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-delete-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the chip type. Possible values:\n\n* `assist`: Displays auxiliary actions related to the context, such as sharing and favoriting on a meal ordering page.\n* `filter`: Filters content, like search results on a search results page.\n* `input`: Represents fragments of user input, such as contacts in the 'To' field in Gmail.\n* `suggestion`: Provides dynamically generated suggestions to simplify user actions, like message predictions in a chat application.",
                "value": {
                  "type": [
                    "'assist'",
                    "'filter'",
                    "'input'",
                    "'suggestion'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-variant"
              },
              {
                "name": "elevated",
                "description": "Gives the chip a shadow.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-elevated"
              },
              {
                "name": "selectable",
                "description": "Makes the chip selectable.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selectable"
              },
              {
                "name": "selected",
                "description": "Marks the chip as selected.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selected"
              },
              {
                "name": "deletable",
                "description": "Makes the chip deletable. When set, a delete icon appears on the right.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-deletable"
              },
              {
                "name": "icon",
                "description": "Sets the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-icon"
              },
              {
                "name": "selectedIcon",
                "description": "Sets the Material Icons name for the left icon when selected. Alternatively, use `slot=\"selected-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selectedIcon"
              },
              {
                "name": "endIcon",
                "description": "Sets the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-endIcon"
              },
              {
                "name": "deleteIcon",
                "description": "Sets the Material Icons name for the delete icon when deletable. Alternatively, use `slot=\"delete-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-deleteIcon"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Specifies that the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-tabIndex"
              },
              {
                "name": "disabled",
                "description": "Disables the element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-disabled"
              },
              {
                "name": "loading",
                "description": "Indicates that the element is in a loading state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-loading"
              },
              {
                "name": "name",
                "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-name"
              },
              {
                "name": "value",
                "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-value"
              },
              {
                "name": "type",
                "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": [
                    "'submit'",
                    "'reset'",
                    "'button'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-type"
              },
              {
                "name": "form",
                "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-form"
              },
              {
                "name": "formAction",
                "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formAction"
              },
              {
                "name": "formEnctype",
                "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'application/x-www-form-urlencoded'",
                    "'multipart/form-data'",
                    "'text/plain'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formEnctype"
              },
              {
                "name": "formMethod",
                "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'post'",
                    "'get'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formMethod"
              },
              {
                "name": "formNoValidate",
                "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formNoValidate"
              },
              {
                "name": "formTarget",
                "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'_self'",
                    "'_blank'",
                    "'_parent'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formTarget"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-validationMessage"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the chip gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the chip loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-blur"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-invalid"
              },
              {
                "name": "change",
                "description": "Emitted when the selected state changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-change"
              },
              {
                "name": "delete",
                "description": "Emitted when the delete icon is clicked.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-delete"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssProperties-shape-corner"
              }
            ],
            "parts": [
              {
                "name": "button",
                "description": "Internal `<button>` or `<a>` element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-button"
              },
              {
                "name": "label",
                "description": "Text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-label"
              },
              {
                "name": "icon",
                "description": "Left icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-icon"
              },
              {
                "name": "end-icon",
                "description": "Right icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-end-icon"
              },
              {
                "name": "selected-icon",
                "description": "Left icon when selected.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-selected-icon"
              },
              {
                "name": "delete-icon",
                "description": "Delete icon on the right.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-delete-icon"
              },
              {
                "name": "loading",
                "description": "The `<mdui-circular-progress>` element for the loading state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-loading"
              }
            ]
          }
        },
        {
          "name": "mdui-circular-progress",
          "description": "Circular Progress Component \n\n```html\n<mdui-circular-progress></mdui-circular-progress>\n```",
          "attributes": [
            {
              "name": "max",
              "description": "Sets the maximum value for the progress indicator. The default value is `1`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-max"
            },
            {
              "name": "value",
              "description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-value"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress",
          "js": {
            "properties": [
              {
                "name": "max",
                "description": "Sets the maximum value for the progress indicator. The default value is `1`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-max"
              },
              {
                "name": "value",
                "description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-value"
              }
            ]
          }
        },
        {
          "name": "mdui-collapse-item",
          "description": "Collapse Item Component  It should be used in conjunction with the `<mdui-collapse>` component \n\n```html\n<mdui-collapse>\n  <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n  <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
          "attributes": [
            {
              "name": "value",
              "description": "Specifies the value of the collapsible panel item.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-value"
            },
            {
              "name": "header",
              "description": "Sets the header text for the collapsible panel item.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-header"
            },
            {
              "name": "disabled",
              "description": "Disables the collapsible panel item.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-disabled"
            },
            {
              "name": "trigger",
              "description": "Identifies the element that triggers the collapse on click. This can be a CSS selector, a DOM element, or a [JQ object](https://www.mdui.org/en/docs/2/functions/jq). By default, the entire header area is the trigger.",
              "value": {
                "type": [
                  "string",
                  "HTMLElement",
                  "JQ<HTMLElement>"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-trigger"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/collapse",
          "slots": [
            {
              "name": "",
              "description": "Main content of the collapsible panel item.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-slots-default"
            },
            {
              "name": "header",
              "description": "Content of the collapsible panel item's header.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-slots-header"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "value",
                "description": "Specifies the value of the collapsible panel item.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-value"
              },
              {
                "name": "header",
                "description": "Sets the header text for the collapsible panel item.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-header"
              },
              {
                "name": "disabled",
                "description": "Disables the collapsible panel item.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-disabled"
              },
              {
                "name": "trigger",
                "description": "Identifies the element that triggers the collapse on click. This can be a CSS selector, a DOM element, or a [JQ object](https://www.mdui.org/en/docs/2/functions/jq). By default, the entire header area is the trigger.",
                "value": {
                  "type": [
                    "string",
                    "HTMLElement",
                    "JQ<HTMLElement>"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-trigger"
              }
            ],
            "events": [
              {
                "name": "open",
                "description": "Emitted when the collapse item starts to open.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-open"
              },
              {
                "name": "opened",
                "description": "Emitted after the collapse item has opened and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-opened"
              },
              {
                "name": "close",
                "description": "Emitted when the collapse item starts to close.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-close"
              },
              {
                "name": "closed",
                "description": "Emitted after the collapse item has closed and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-closed"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "header",
                "description": "Content of the collapsible panel's header.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-cssParts-header"
              },
              {
                "name": "body",
                "description": "Content of the collapsible panel's body.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-cssParts-body"
              }
            ]
          }
        },
        {
          "name": "mdui-collapse",
          "description": "Collapse Panel Component  It should be used in conjunction with the `<mdui-collapse-item>` component \n\n```html\n<mdui-collapse>\n  <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n  <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
          "attributes": [
            {
              "name": "accordion",
              "description": "Activates accordion mode.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-accordion"
            },
            {
              "name": "value",
              "description": "Specifies the open `<mdui-collapse-item>` value.\n\nNote: The HTML attribute is always a string and can only be initially set when `accordion` is `true`. The JavaScript property value is a string when `accordion` is `true` and a string array when `accordion` is `false`. To modify this value when `accordion` is `false`, you must change the JavaScript property.",
              "value": {
                "type": [
                  "string",
                  "string[]"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-value"
            },
            {
              "name": "disabled",
              "description": "Disables the collapsible panel.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-disabled"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/collapse",
          "slots": [
            {
              "name": "",
              "description": "The `<mdui-collapse-item>` components.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "accordion",
                "description": "Activates accordion mode.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-accordion"
              },
              {
                "name": "value",
                "description": "Specifies the open `<mdui-collapse-item>` value.\n\nNote: The HTML attribute is always a string and can only be initially set when `accordion` is `true`. The JavaScript property value is a string when `accordion` is `true` and a string array when `accordion` is `false`. To modify this value when `accordion` is `false`, you must change the JavaScript property.",
                "value": {
                  "type": [
                    "string",
                    "string[]"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-value"
              },
              {
                "name": "disabled",
                "description": "Disables the collapsible panel.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-disabled"
              }
            ],
            "events": [
              {
                "name": "change",
                "description": "Emitted when the open collapsible panel item changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-events-change"
              }
            ]
          }
        },
        {
          "name": "mdui-dialog",
          "description": "Dialog Component \n\n```html\n<mdui-dialog>content</mdui-dialog>\n```",
          "attributes": [
            {
              "name": "icon",
              "description": "Sets the Material Icons name for the top icon. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-icon"
            },
            {
              "name": "headline",
              "description": "Sets the dialog title. Alternatively, use `slot=\"headline\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-headline"
            },
            {
              "name": "description",
              "description": "Sets the text below the title. Alternatively, use `slot=\"description\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-description"
            },
            {
              "name": "open",
              "description": "Opens the dialog.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-open"
            },
            {
              "name": "fullscreen",
              "description": "Sets the dialog to full-screen.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-fullscreen"
            },
            {
              "name": "close-on-esc",
              "description": "Closes the dialog when the ESC key is pressed.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-close-on-esc"
            },
            {
              "name": "close-on-overlay-click",
              "description": "Closes the dialog when the overlay is clicked.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-close-on-overlay-click"
            },
            {
              "name": "stacked-actions",
              "description": "Stacks the bottom action buttons vertically.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-stacked-actions"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/dialog",
          "slots": [
            {
              "name": "header",
              "description": "Top element, contains the `icon` slot and `headline` slot by default.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-header"
            },
            {
              "name": "icon",
              "description": "Top icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-icon"
            },
            {
              "name": "headline",
              "description": "Top headline.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-headline"
            },
            {
              "name": "description",
              "description": "Text below the title.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-description"
            },
            {
              "name": "",
              "description": "Main content of the dialog.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-default"
            },
            {
              "name": "action",
              "description": "Elements in the bottom action bar.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-action"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "icon",
                "description": "Sets the Material Icons name for the top icon. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-icon"
              },
              {
                "name": "headline",
                "description": "Sets the dialog title. Alternatively, use `slot=\"headline\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-headline"
              },
              {
                "name": "description",
                "description": "Sets the text below the title. Alternatively, use `slot=\"description\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-description"
              },
              {
                "name": "open",
                "description": "Opens the dialog.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-open"
              },
              {
                "name": "fullscreen",
                "description": "Sets the dialog to full-screen.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-fullscreen"
              },
              {
                "name": "closeOnEsc",
                "description": "Closes the dialog when the ESC key is pressed.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-closeOnEsc"
              },
              {
                "name": "closeOnOverlayClick",
                "description": "Closes the dialog when the overlay is clicked.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-closeOnOverlayClick"
              },
              {
                "name": "stackedActions",
                "description": "Stacks the bottom action buttons vertically.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-stackedActions"
              }
            ],
            "events": [
              {
                "name": "open",
                "description": "Emitted when the dialog starts to open. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-open"
              },
              {
                "name": "opened",
                "description": "Emitted after the dialog has opened and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-opened"
              },
              {
                "name": "close",
                "description": "Emitted when the dialog starts to close. Can be prevented with `event.preventDefault().`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-close"
              },
              {
                "name": "closed",
                "description": "Emitted after the dialog has closed and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-closed"
              },
              {
                "name": "overlay-click",
                "description": "Emitted when the overlay is clicked.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-overlay-click"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssProperties-shape-corner"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssProperties-z-index"
              }
            ],
            "parts": [
              {
                "name": "overlay",
                "description": "Overlay layer.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-overlay"
              },
              {
                "name": "panel",
                "description": "Dialog container.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-panel"
              },
              {
                "name": "header",
                "description": "Dialog header, includes icon and headline.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-header"
              },
              {
                "name": "icon",
                "description": "Top icon in header.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-icon"
              },
              {
                "name": "headline",
                "description": "Top headline in header.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-headline"
              },
              {
                "name": "body",
                "description": "Dialog body.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-body"
              },
              {
                "name": "description",
                "description": "Subtext in body.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-description"
              },
              {
                "name": "action",
                "description": "Bottom action buttons.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-action"
              }
            ]
          }
        },
        {
          "name": "mdui-divider",
          "description": "Divider Component \n\n```html\n<mdui-divider></mdui-divider>\n```",
          "attributes": [
            {
              "name": "vertical",
              "description": "Displays the divider vertically.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-vertical"
            },
            {
              "name": "inset",
              "description": "Adds an inset from the left side.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-inset"
            },
            {
              "name": "middle",
              "description": "Adds insets from both the left and right sides.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-middle"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/divider",
          "js": {
            "properties": [
              {
                "name": "vertical",
                "description": "Displays the divider vertically.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-vertical"
              },
              {
                "name": "inset",
                "description": "Adds an inset from the left side.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-inset"
              },
              {
                "name": "middle",
                "description": "Adds insets from both the left and right sides.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-middle"
              }
            ]
          }
        },
        {
          "name": "mdui-dropdown",
          "description": "Dropdown Component \n\n```html\n<mdui-dropdown>\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```",
          "attributes": [
            {
              "name": "open",
              "description": "Opens the dropdown.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open"
            },
            {
              "name": "disabled",
              "description": "Disables the dropdown.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-disabled"
            },
            {
              "name": "trigger",
              "description": "Defines the trigger method for the dropdown. Supports multiple space-separated values. Possible values:\n\n* `click`: Trigger on click.\n* `hover`: Trigger on mouse hover.\n* `focus`: Trigger on focus.\n* `contextmenu`: Trigger on right-click or touch long press.\n* `manual`: If used, the dropdown can only be opened and closed programmatically, and no other trigger methods can be specified.",
              "value": {
                "type": [
                  "'click'",
                  "'hover'",
                  "'focus'",
                  "'contextmenu'",
                  "'manual'",
                  "string"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-trigger"
            },
            {
              "name": "placement",
              "description": "Sets the position of the dropdown. Possible values:\n\n* `auto`: Automatically determine the position.\n* `top-start`: Above and left-aligned.\n* `top`: Above and centered.\n* `top-end`: Above and right-aligned.\n* `bottom-start`: Below and left-aligned.\n* `bottom`: Below and centered.\n* `bottom-end`: Below and right-aligned.\n* `left-start`: Left and top-aligned.\n* `left`: Left and centered.\n* `left-end`: Left and bottom-aligned.\n* `right-start`: Right and top-aligned.\n* `right`: Right and centered.\n* `right-end`: Right and bottom-aligned.",
              "value": {
                "type": [
                  "'auto'",
                  "'top-start'",
                  "'top'",
                  "'top-end'",
                  "'bottom-start'",
                  "'bottom'",
                  "'bottom-end'",
                  "'left-start'",
                  "'left'",
                  "'left-end'",
                  "'right-start'",
                  "'right'",
                  "'right-end'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-placement"
            },
            {
              "name": "stay-open-on-click",
              "description": "Keeps the dropdown open after clicking an [`<mdui-menu-item>`](https://www.mdui.org/en/docs/2/components/menu#menu-item-api).",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-stay-open-on-click"
            },
            {
              "name": "open-delay",
              "description": "Sets the delay (in ms) for opening the dropdown on hover.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open-delay"
            },
            {
              "name": "close-delay",
              "description": "Sets the delay (in ms) for closing the dropdown on hover.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-close-delay"
            },
            {
              "name": "open-on-pointer",
              "description": "Opens the dropdown at the cursor position. This is typically used for context menus.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open-on-pointer"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown",
          "slots": [
            {
              "name": "",
              "description": "The content of the dropdown.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#slots-default"
            },
            {
              "name": "trigger",
              "description": "The element that triggers the dropdown, such as an [`<mdui-button>`](https://www.mdui.org/en/docs/2/components/button) element.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#slots-trigger"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "open",
                "description": "Opens the dropdown.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open"
              },
              {
                "name": "disabled",
                "description": "Disables the dropdown.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-disabled"
              },
              {
                "name": "trigger",
                "description": "Defines the trigger method for the dropdown. Supports multiple space-separated values. Possible values:\n\n* `click`: Trigger on click.\n* `hover`: Trigger on mouse hover.\n* `focus`: Trigger on focus.\n* `contextmenu`: Trigger on right-click or touch long press.\n* `manual`: If used, the dropdown can only be opened and closed programmatically, and no other trigger methods can be specified.",
                "value": {
                  "type": [
                    "'click'",
                    "'hover'",
                    "'focus'",
                    "'contextmenu'",
                    "'manual'",
                    "string"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-trigger"
              },
              {
                "name": "placement",
                "description": "Sets the position of the dropdown. Possible values:\n\n* `auto`: Automatically determine the position.\n* `top-start`: Above and left-aligned.\n* `top`: Above and centered.\n* `top-end`: Above and right-aligned.\n* `bottom-start`: Below and left-aligned.\n* `bottom`: Below and centered.\n* `bottom-end`: Below and right-aligned.\n* `left-start`: Left and top-aligned.\n* `left`: Left and centered.\n* `left-end`: Left and bottom-aligned.\n* `right-start`: Right and top-aligned.\n* `right`: Right and centered.\n* `right-end`: Right and bottom-aligned.",
                "value": {
                  "type": [
                    "'auto'",
                    "'top-start'",
                    "'top'",
                    "'top-end'",
                    "'bottom-start'",
                    "'bottom'",
                    "'bottom-end'",
                    "'left-start'",
                    "'left'",
                    "'left-end'",
                    "'right-start'",
                    "'right'",
                    "'right-end'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-placement"
              },
              {
                "name": "stayOpenOnClick",
                "description": "Keeps the dropdown open after clicking an [`<mdui-menu-item>`](https://www.mdui.org/en/docs/2/components/menu#menu-item-api).",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-stayOpenOnClick"
              },
              {
                "name": "openDelay",
                "description": "Sets the delay (in ms) for opening the dropdown on hover.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-openDelay"
              },
              {
                "name": "closeDelay",
                "description": "Sets the delay (in ms) for closing the dropdown on hover.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-closeDelay"
              },
              {
                "name": "openOnPointer",
                "description": "Opens the dropdown at the cursor position. This is typically used for context menus.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-openOnPointer"
              }
            ],
            "events": [
              {
                "name": "open",
                "description": "Emitted when the dropdown starts to open. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-open"
              },
              {
                "name": "opened",
                "description": "Emitted after the dropdown has opened and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-opened"
              },
              {
                "name": "close",
                "description": "Emitted when the dropdown starts to close. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-close"
              },
              {
                "name": "closed",
                "description": "Emitted after the dropdown has closed and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-closed"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#cssProperties-z-index"
              }
            ],
            "parts": [
              {
                "name": "trigger",
                "description": "The container of the element that triggers the dropdown, i.e., the container of the `trigger` slot.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#cssParts-trigger"
              },
              {
                "name": "panel",
                "description": "The container of the dropdown content.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#cssParts-panel"
              }
            ]
          }
        },
        {
          "name": "mdui-fab",
          "description": "Floating Action Button Component \n\n```html\n<mdui-fab icon=\"edit\"></mdui-fab>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Sets the FAB color. Possible values:\n\n* `primary`: Uses the primary container background color.\n* `surface`: Uses the surface container high background color.\n* `secondary`: Uses the secondary container background color.\n* `tertiary`: Uses the tertiary container background color.",
              "value": {
                "type": [
                  "'primary'",
                  "'surface'",
                  "'secondary'",
                  "'tertiary'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-variant"
            },
            {
              "name": "size",
              "description": "Sets the FAB size. Possible values:\n* `normal`: Sets the FAB to a normal size.\n* `small`: Sets the FAB to a small size.\n* `large`: Sets the FAB to a large size.",
              "value": {
                "type": [
                  "'normal'",
                  "'small'",
                  "'large'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-size"
            },
            {
              "name": "icon",
              "description": "Sets the Material Icons name. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-icon"
            },
            {
              "name": "extended",
              "description": "Indicates if the FAB is in the extended state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-extended"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Specifies that the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-tabindex"
            },
            {
              "name": "disabled",
              "description": "Disables the element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-disabled"
            },
            {
              "name": "loading",
              "description": "Indicates that the element is in a loading state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-loading"
            },
            {
              "name": "name",
              "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-name"
            },
            {
              "name": "value",
              "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-value"
            },
            {
              "name": "type",
              "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": [
                  "'submit'",
                  "'reset'",
                  "'button'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-type"
            },
            {
              "name": "form",
              "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-form"
            },
            {
              "name": "formaction",
              "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formaction"
            },
            {
              "name": "formenctype",
              "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'application/x-www-form-urlencoded'",
                  "'multipart/form-data'",
                  "'text/plain'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formenctype"
            },
            {
              "name": "formmethod",
              "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'post'",
                  "'get'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formmethod"
            },
            {
              "name": "formnovalidate",
              "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formnovalidate"
            },
            {
              "name": "formtarget",
              "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'_self'",
                  "'_blank'",
                  "'_parent'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formtarget"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/fab",
          "slots": [
            {
              "name": "",
              "description": "Text content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#slots-default"
            },
            {
              "name": "icon",
              "description": "Icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/fab#slots-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Sets the FAB color. Possible values:\n\n* `primary`: Uses the primary container background color.\n* `surface`: Uses the surface container high background color.\n* `secondary`: Uses the secondary container background color.\n* `tertiary`: Uses the tertiary container background color.",
                "value": {
                  "type": [
                    "'primary'",
                    "'surface'",
                    "'secondary'",
                    "'tertiary'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-variant"
              },
              {
                "name": "size",
                "description": "Sets the FAB size. Possible values:\n* `normal`: Sets the FAB to a normal size.\n* `small`: Sets the FAB to a small size.\n* `large`: Sets the FAB to a large size.",
                "value": {
                  "type": [
                    "'normal'",
                    "'small'",
                    "'large'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-size"
              },
              {
                "name": "icon",
                "description": "Sets the Material Icons name. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-icon"
              },
              {
                "name": "extended",
                "description": "Indicates if the FAB is in the extended state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-extended"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Specifies that the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-tabIndex"
              },
              {
                "name": "disabled",
                "description": "Disables the element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-disabled"
              },
              {
                "name": "loading",
                "description": "Indicates that the element is in a loading state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-loading"
              },
              {
                "name": "name",
                "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-name"
              },
              {
                "name": "value",
                "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-value"
              },
              {
                "name": "type",
                "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": [
                    "'submit'",
                    "'reset'",
                    "'button'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-type"
              },
              {
                "name": "form",
                "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-form"
              },
              {
                "name": "formAction",
                "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formAction"
              },
              {
                "name": "formEnctype",
                "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'application/x-www-form-urlencoded'",
                    "'multipart/form-data'",
                    "'text/plain'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formEnctype"
              },
              {
                "name": "formMethod",
                "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'post'",
                    "'get'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formMethod"
              },
              {
                "name": "formNoValidate",
                "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formNoValidate"
              },
              {
                "name": "formTarget",
                "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'_self'",
                    "'_blank'",
                    "'_parent'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formTarget"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-validationMessage"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the FAB gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the FAB loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#events-blur"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#events-invalid"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner-small",
                "description": "The size of the component corner when `size=\"small\"`. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssProperties-shape-corner-small"
              },
              {
                "name": "--shape-corner-normal",
                "description": "The size of the component corner when `size=\"normal\"`. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssProperties-shape-corner-normal"
              },
              {
                "name": "--shape-corner-large",
                "description": "The size of the component corner when `size=\"large\"`. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssProperties-shape-corner-large"
              }
            ],
            "parts": [
              {
                "name": "button",
                "description": "Internal `<button>` or `<a>` element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-button"
              },
              {
                "name": "label",
                "description": "Text on the right side.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-label"
              },
              {
                "name": "icon",
                "description": "Icon on the left side.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-icon"
              },
              {
                "name": "loading",
                "description": "The `<mdui-circular-progress>` element for the loading state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-loading"
              }
            ]
          }
        },
        {
          "name": "mdui-icon",
          "description": "Icon Component \n\n```html\n<mdui-icon name=\"search\"></mdui-icon>\n```",
          "attributes": [
            {
              "name": "name",
              "description": "Specifies the name of the Material Icons.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-name"
            },
            {
              "name": "src",
              "description": "Specifies the path of the SVG icon.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-src"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/icon",
          "slots": [
            {
              "name": "",
              "description": "The SVG icon content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/icon#slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "name",
                "description": "Specifies the name of the Material Icons.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-name"
              },
              {
                "name": "src",
                "description": "Specifies the path of the SVG icon.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-src"
              }
            ]
          }
        },
        {
          "name": "mdui-layout-item",
          "description": "Layout Item Component \n\n```html\n<mdui-layout>\n  <mdui-layout-item></mdui-layout-item>\n  <mdui-layout-item></mdui-layout-item>\n  <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
          "attributes": [
            {
              "name": "placement",
              "description": "Determines the component's position. Possible values:\n\n* `top`: Positions the component at the top.\n* `bottom`: Positions the component at the bottom.\n* `left`: Positions the component on the left.\n* `right`: Positions the component on the right.",
              "value": {
                "type": [
                  "'top'",
                  "'bottom'",
                  "'left'",
                  "'right'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-placement"
            },
            {
              "name": "order",
              "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-order"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/layout",
          "slots": [
            {
              "name": "",
              "description": "Can contains any content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "placement",
                "description": "Determines the component's position. Possible values:\n\n* `top`: Positions the component at the top.\n* `bottom`: Positions the component at the bottom.\n* `left`: Positions the component on the left.\n* `right`: Positions the component on the right.",
                "value": {
                  "type": [
                    "'top'",
                    "'bottom'",
                    "'left'",
                    "'right'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-placement"
              },
              {
                "name": "order",
                "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-order"
              }
            ]
          }
        },
        {
          "name": "mdui-layout-main",
          "description": "Layout Main Component \n\n```html\n<mdui-layout>\n  <mdui-layout-item></mdui-layout-item>\n  <mdui-layout-item></mdui-layout-item>\n  <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
          "attributes": [],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/layout",
          "slots": [
            {
              "name": "",
              "description": "Can contains any content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-main-slots-default"
            }
          ],
          "js": {
            "properties": []
          }
        },
        {
          "name": "mdui-layout",
          "description": "Layout Component \n\n```html\n<mdui-layout>\n  <mdui-layout-item></mdui-layout-item>\n  <mdui-layout-item></mdui-layout-item>\n  <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
          "attributes": [
            {
              "name": "full-height",
              "description": "Sets the layout height to 100%.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-attributes-full-height"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/layout",
          "slots": [
            {
              "name": "",
              "description": "Can contain elements such as [`<mdui-top-app-bar>`](https://www.mdui.org/en/docs/2/components/top-app-bar), [`<mdui-bottom-app-bar>`](https://www.mdui.org/en/docs/2/components/bottom-app-bar), [`<mdui-navigation-bar>`](https://www.mdui.org/en/docs/2/components/navigation-bar), [`<mdui-navigation-drawer>`](https://www.mdui.org/en/docs/2/components/navigation-drawer), [`<mdui-navigation-rail>`](https://www.mdui.org/en/docs/2/components/navigation-rail), `<mdui-layout-item>`, and `<mdui-layout-main>`.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "fullHeight",
                "description": "Sets the layout height to 100%.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-attributes-fullHeight"
              }
            ]
          }
        },
        {
          "name": "mdui-linear-progress",
          "description": "Linear Progress Component \n\n```html\n<mdui-linear-progress></mdui-linear-progress>\n```",
          "attributes": [
            {
              "name": "max",
              "description": "Sets the maximum value for the progress indicator. The default value is `1`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-max"
            },
            {
              "name": "value",
              "description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-value"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress",
          "js": {
            "properties": [
              {
                "name": "max",
                "description": "Sets the maximum value for the progress indicator. The default value is `1`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-max"
              },
              {
                "name": "value",
                "description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-value"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#cssProperties-shape-corner"
              }
            ],
            "parts": [
              {
                "name": "indicator",
                "description": "The indicator part.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#cssParts-indicator"
              }
            ]
          }
        },
        {
          "name": "mdui-list-item",
          "description": "List Item Component  It should be used in conjunction with the `<mdui-list>` component \n\n```html\n<mdui-list>\n  <mdui-list-subheader>Subheader</mdui-list-subheader>\n  <mdui-list-item>Item 1</mdui-list-item>\n  <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
          "attributes": [
            {
              "name": "headline",
              "description": "Main text. Alternatively, use the default slot.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headline"
            },
            {
              "name": "headline-line",
              "description": "Line limit for main text. Truncates after exceeding. Default is no limit. Possible values:\n\n* `1`: Single-line text, truncates after exceeding\n* `2`: Double-line text, truncates after exceeding.\n* `3`: Triple-line text, truncates after exceeding.",
              "value": {
                "type": [
                  "1",
                  "2",
                  "3"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headline-line"
            },
            {
              "name": "description",
              "description": "Subtext. Alternatively, use `slot=\"description\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-description"
            },
            {
              "name": "description-line",
              "description": "Line limit for subtext. Truncates after exceeding. Default is no limit. Possible values:\n\n* `1`: Single-line text, truncates after exceeding\n* `2`: Double-line text, truncates after exceeding.\n* `3`: Triple-line text, truncates after exceeding.",
              "value": {
                "type": [
                  "1",
                  "2",
                  "3"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-description-line"
            },
            {
              "name": "icon",
              "description": "Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-icon"
            },
            {
              "name": "end-icon",
              "description": "Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-end-icon"
            },
            {
              "name": "disabled",
              "description": "Disables the list item. Grays out the item and disables elements like [`<mdui-checkbox>`](https://www.mdui.org/en/docs/2/components/checkbox), [`<mdui-radio>`](https://www.mdui.org/en/docs/2/components/radio), [`<mdui-switch>`](https://www.mdui.org/en/docs/2/components/switch).",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-disabled"
            },
            {
              "name": "active",
              "description": "Activates the list item.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-active"
            },
            {
              "name": "nonclickable",
              "description": "Makes the list item non-clickable. Elements like [`<mdui-checkbox>`](https://www.mdui.org/en/docs/2/components/checkbox), [`<mdui-radio>`](https://www.mdui.org/en/docs/2/components/radio), [`<mdui-switch>`](https://www.mdui.org/en/docs/2/components/switch) remain interactive.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-nonclickable"
            },
            {
              "name": "rounded",
              "description": "Applies rounded style to the list item.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rounded"
            },
            {
              "name": "alignment",
              "description": "Vertical alignment of the list item. Possible values:\n\n* `start`: Top alignment.\n* `center`: Center alignment.\n* `end`: Bottom alignment.",
              "value": {
                "type": [
                  "'start'",
                  "'center'",
                  "'end'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-alignment"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/list",
          "slots": [
            {
              "name": "",
              "description": "Main text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-default"
            },
            {
              "name": "description",
              "description": "Subtext.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-description"
            },
            {
              "name": "icon",
              "description": "Element on the left of the list item.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-icon"
            },
            {
              "name": "end-icon",
              "description": "Element on the right of the list item.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-end-icon"
            },
            {
              "name": "custom",
              "description": "Any custom content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-custom"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "headline",
                "description": "Main text. Alternatively, use the default slot.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headline"
              },
              {
                "name": "headlineLine",
                "description": "Line limit for main text. Truncates after exceeding. Default is no limit. Possible values:\n\n* `1`: Single-line text, truncates after exceeding\n* `2`: Double-line text, truncates after exceeding.\n* `3`: Triple-line text, truncates after exceeding.",
                "value": {
                  "type": [
                    "1",
                    "2",
                    "3"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headlineLine"
              },
              {
                "name": "description",
                "description": "Subtext. Alternatively, use `slot=\"description\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-description"
              },
              {
                "name": "descriptionLine",
                "description": "Line limit for subtext. Truncates after exceeding. Default is no limit. Possible values:\n\n* `1`: Single-line text, truncates after exceeding\n* `2`: Double-line text, truncates after exceeding.\n* `3`: Triple-line text, truncates after exceeding.",
                "value": {
                  "type": [
                    "1",
                    "2",
                    "3"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-descriptionLine"
              },
              {
                "name": "icon",
                "description": "Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-icon"
              },
              {
                "name": "endIcon",
                "description": "Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-endIcon"
              },
              {
                "name": "disabled",
                "description": "Disables the list item. Grays out the item and disables elements like [`<mdui-checkbox>`](https://www.mdui.org/en/docs/2/components/checkbox), [`<mdui-radio>`](https://www.mdui.org/en/docs/2/components/radio), [`<mdui-switch>`](https://www.mdui.org/en/docs/2/components/switch).",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-disabled"
              },
              {
                "name": "active",
                "description": "Activates the list item.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-active"
              },
              {
                "name": "nonclickable",
                "description": "Makes the list item non-clickable. Elements like [`<mdui-checkbox>`](https://www.mdui.org/en/docs/2/components/checkbox), [`<mdui-radio>`](https://www.mdui.org/en/docs/2/components/radio), [`<mdui-switch>`](https://www.mdui.org/en/docs/2/components/switch) remain interactive.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-nonclickable"
              },
              {
                "name": "rounded",
                "description": "Applies rounded style to the list item.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rounded"
              },
              {
                "name": "alignment",
                "description": "Vertical alignment of the list item. Possible values:\n\n* `start`: Top alignment.\n* `center`: Center alignment.\n* `end`: Bottom alignment.",
                "value": {
                  "type": [
                    "'start'",
                    "'center'",
                    "'end'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-alignment"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the list item gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the list item loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-events-blur"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssProperties-shape-corner"
              },
              {
                "name": "--shape-corner-rounded",
                "description": "The size of the component corner when `rounded` is specified. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssProperties-shape-corner-rounded"
              }
            ],
            "parts": [
              {
                "name": "container",
                "description": "List item container.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-container"
              },
              {
                "name": "icon",
                "description": "Left icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-icon"
              },
              {
                "name": "end-icon",
                "description": "Right icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-end-icon"
              },
              {
                "name": "body",
                "description": "Middle part.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-body"
              },
              {
                "name": "headline",
                "description": "Main title.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-headline"
              },
              {
                "name": "description",
                "description": "Subtitle.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-description"
              }
            ]
          }
        },
        {
          "name": "mdui-list-subheader",
          "description": "List Subheader Component  It should be used in conjunction with the `<mdui-list>` component \n\n```html\n<mdui-list>\n  <mdui-list-subheader>Subheader</mdui-list-subheader>\n  <mdui-list-item>Item 1</mdui-list-item>\n  <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
          "attributes": [],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/list",
          "slots": [
            {
              "name": "",
              "description": "Subheader text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-subheader-slots-default"
            }
          ],
          "js": {
            "properties": []
          }
        },
        {
          "name": "mdui-list",
          "description": "List Component  It should be used in conjunction with the `<mdui-list-item>` component \n\n```html\n<mdui-list>\n  <mdui-list-subheader>Subheader</mdui-list-subheader>\n  <mdui-list-item>Item 1</mdui-list-item>\n  <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
          "attributes": [],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/list",
          "slots": [
            {
              "name": "",
              "description": "Contains `<mdui-list-item>` elements.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/list#list-slots-default"
            }
          ],
          "js": {
            "properties": []
          }
        },
        {
          "name": "mdui-menu-item",
          "description": "Menu Item Component \n\n```html\n<mdui-menu>\n  <mdui-menu-item>Item 1</mdui-menu-item>\n  <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
          "attributes": [
            {
              "name": "value",
              "description": "The value of the menu item.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-value"
            },
            {
              "name": "disabled",
              "description": "Disables the menu item.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-disabled"
            },
            {
              "name": "icon",
              "description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`. An empty string reserves space for an icon.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-icon"
            },
            {
              "name": "end-icon",
              "description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-end-icon"
            },
            {
              "name": "end-text",
              "description": "Specifies the right text. Alternatively, use `slot=\"end-text\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-end-text"
            },
            {
              "name": "selected-icon",
              "description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-selected-icon"
            },
            {
              "name": "submenu-open",
              "description": "Opens the submenu.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-submenu-open"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/menu",
          "slots": [
            {
              "name": "",
              "description": "Menu item text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-default"
            },
            {
              "name": "icon",
              "description": "Left icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-icon"
            },
            {
              "name": "end-icon",
              "description": "Right icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-end-icon"
            },
            {
              "name": "end-text",
              "description": "Right text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-end-text"
            },
            {
              "name": "selected-icon",
              "description": "Icon for the selected state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-selected-icon"
            },
            {
              "name": "submenu",
              "description": "Submenu.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-submenu"
            },
            {
              "name": "custom",
              "description": "Any custom content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-custom"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "value",
                "description": "The value of the menu item.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-value"
              },
              {
                "name": "disabled",
                "description": "Disables the menu item.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-disabled"
              },
              {
                "name": "icon",
                "description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`. An empty string reserves space for an icon.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-icon"
              },
              {
                "name": "endIcon",
                "description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-endIcon"
              },
              {
                "name": "endText",
                "description": "Specifies the right text. Alternatively, use `slot=\"end-text\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-endText"
              },
              {
                "name": "selectedIcon",
                "description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-selectedIcon"
              },
              {
                "name": "submenuOpen",
                "description": "Opens the submenu.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-submenuOpen"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the menu item gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the menu item loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-blur"
              },
              {
                "name": "submenu-open",
                "description": "Emitted when the submenu starts to open. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-open"
              },
              {
                "name": "submenu-opened",
                "description": "Emitted after the submenu has opened and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-opened"
              },
              {
                "name": "submenu-close",
                "description": "Emitted when the submenu starts to close. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-close"
              },
              {
                "name": "submenu-closed",
                "description": "Emitted after the submenu has closed and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-closed"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "container",
                "description": "Menu item container.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-container"
              },
              {
                "name": "icon",
                "description": "Left icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-icon"
              },
              {
                "name": "label",
                "description": "Text content.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-label"
              },
              {
                "name": "end-icon",
                "description": "Right icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-end-icon"
              },
              {
                "name": "end-text",
                "description": "Right text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-end-text"
              },
              {
                "name": "selected-icon",
                "description": "Icon for the selected state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-selected-icon"
              },
              {
                "name": "submenu",
                "description": "Submenu element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-submenu"
              }
            ]
          }
        },
        {
          "name": "mdui-menu",
          "description": "Menu Component  It should be used in conjunction with the `<mdui-menu-item>` component \n\n```html\n<mdui-menu>\n  <mdui-menu-item>Item 1</mdui-menu-item>\n  <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
          "attributes": [
            {
              "name": "selects",
              "description": "Defines the selectable state of menu items. Defaults to non-selectable. Possible values:\n\n* `single`: Only one item can be selected at a time.\n* `multiple`: Multiple items can be selected.",
              "value": {
                "type": [
                  "'single'",
                  "'multiple'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-selects"
            },
            {
              "name": "value",
              "description": "The value of the selected `<mdui-menu-item>`.\n\nNote: The HTML attribute is always a string and can only be set as an initial value when `selects=\"single\"`. The JavaScript property value is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. In `selects=\"multiple\"`, this value can only be modified by changing the JavaScript property.",
              "value": {
                "type": [
                  "string",
                  "string[]"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-value"
            },
            {
              "name": "dense",
              "description": "Indicates whether the menu items use a compact layout.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-dense"
            },
            {
              "name": "submenu-trigger",
              "description": "Defines the trigger method for submenus. Supports multiple values separated by spaces. Possible values:\n\n* `click`: Open submenu when clicking on a menu item.\n* `hover`: Open submenu when hovering over a menu item.\n* `focus`: Open submenu when focusing on a menu item.\n* `manual`: Only programmatically open and close submenus, no other trigger methods can be specified.",
              "value": {
                "type": [
                  "'click'",
                  "'hover'",
                  "'focus'",
                  "'manual'",
                  "string"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenu-trigger"
            },
            {
              "name": "submenu-open-delay",
              "description": "Specifies the delay (in milliseconds) for opening a submenu via hover.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenu-open-delay"
            },
            {
              "name": "submenu-close-delay",
              "description": "Specifies the delay (in milliseconds) for closing a submenu via hover.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenu-close-delay"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/menu",
          "slots": [
            {
              "name": "",
              "description": "Submenu items (`<mdui-menu-item>`), dividers ([`<mdui-divider>`](https://www.mdui.org/en/docs/2/components/divider)), and other elements.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "selects",
                "description": "Defines the selectable state of menu items. Defaults to non-selectable. Possible values:\n\n* `single`: Only one item can be selected at a time.\n* `multiple`: Multiple items can be selected.",
                "value": {
                  "type": [
                    "'single'",
                    "'multiple'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-selects"
              },
              {
                "name": "value",
                "description": "The value of the selected `<mdui-menu-item>`.\n\nNote: The HTML attribute is always a string and can only be set as an initial value when `selects=\"single\"`. The JavaScript property value is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. In `selects=\"multiple\"`, this value can only be modified by changing the JavaScript property.",
                "value": {
                  "type": [
                    "string",
                    "string[]"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-value"
              },
              {
                "name": "dense",
                "description": "Indicates whether the menu items use a compact layout.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-dense"
              },
              {
                "name": "submenuTrigger",
                "description": "Defines the trigger method for submenus. Supports multiple values separated by spaces. Possible values:\n\n* `click`: Open submenu when clicking on a menu item.\n* `hover`: Open submenu when hovering over a menu item.\n* `focus`: Open submenu when focusing on a menu item.\n* `manual`: Only programmatically open and close submenus, no other trigger methods can be specified.",
                "value": {
                  "type": [
                    "'click'",
                    "'hover'",
                    "'focus'",
                    "'manual'",
                    "string"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenuTrigger"
              },
              {
                "name": "submenuOpenDelay",
                "description": "Specifies the delay (in milliseconds) for opening a submenu via hover.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenuOpenDelay"
              },
              {
                "name": "submenuCloseDelay",
                "description": "Specifies the delay (in milliseconds) for closing a submenu via hover.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenuCloseDelay"
              }
            ],
            "events": [
              {
                "name": "change",
                "description": "Emitted when the selected state of menu items changes",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-events-change"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-cssProperties-shape-corner"
              }
            ]
          }
        },
        {
          "name": "mdui-navigation-bar-item",
          "description": "Navigation Bar Item Component  It should be used in conjunction with the `<mdui-navigation-bar>` component \n\n```html\n<mdui-navigation-bar>\n  <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
          "attributes": [
            {
              "name": "icon",
              "description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
            },
            {
              "name": "active-icon",
              "description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-active-icon"
            },
            {
              "name": "value",
              "description": "The value of the navigation item.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar",
          "slots": [
            {
              "name": "",
              "description": "Text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-default"
            },
            {
              "name": "icon",
              "description": "Icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-icon"
            },
            {
              "name": "active-icon",
              "description": "Icon for the active state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-active-icon"
            },
            {
              "name": "badge",
              "description": "Badge.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-badge"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "icon",
                "description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
              },
              {
                "name": "activeIcon",
                "description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-activeIcon"
              },
              {
                "name": "value",
                "description": "The value of the navigation item.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the navigation bar item gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the navigation bar item loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-events-blur"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner-indicator",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssProperties-shape-corner-indicator"
              }
            ],
            "parts": [
              {
                "name": "container",
                "description": "Container for the navigation item.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-container"
              },
              {
                "name": "indicator",
                "description": "Indicator.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-indicator"
              },
              {
                "name": "badge",
                "description": "Badge.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-badge"
              },
              {
                "name": "icon",
                "description": "Icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-icon"
              },
              {
                "name": "active-icon",
                "description": "Icon for the active state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-active-icon"
              },
              {
                "name": "label",
                "description": "Text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-label"
              }
            ]
          }
        },
        {
          "name": "mdui-navigation-bar",
          "description": "Navigation Bar Component  It should be used in conjunction with the `<mdui-navigation-bar-item>` component \n\n```html\n<mdui-navigation-bar>\n  <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
          "attributes": [
            {
              "name": "hide",
              "description": "Hides the navigation bar when set.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
            },
            {
              "name": "label-visibility",
              "description": "Specifies the visibility of the text. Possible values:\n\n* `auto`: Visible if there are 3 or fewer options, otherwise only the selected state is visible.\n* `selected`: Only visible in the selected state.\n* `labeled`: Always visible.\n* `unlabeled`: Never visible.",
              "value": {
                "type": [
                  "'auto'",
                  "'selected'",
                  "'labeled'",
                  "'unlabeled'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-label-visibility"
            },
            {
              "name": "value",
              "description": "The value of the selected `<mdui-navigation-bar-item>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-value"
            },
            {
              "name": "scroll-behavior",
              "description": "Defines the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
              "value": {
                "type": [
                  "'hide'",
                  "'shrink'",
                  "'elevate'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-behavior"
            },
            {
              "name": "scroll-target",
              "description": "The element that listens for scroll events. Accepts a CSS selector, DOM element, or [JQ object](https://www.mdui.org/en/docs/2/functions/jq). Defaults to `window`.",
              "value": {
                "type": [
                  "string",
                  "HTMLElement",
                  "JQ<HTMLElement>"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-target"
            },
            {
              "name": "scroll-threshold",
              "description": "The scroll distance (in pixels) that triggers the scroll behavior.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-threshold"
            },
            {
              "name": "order",
              "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-order"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar",
          "slots": [
            {
              "name": "",
              "description": "Contains `<mdui-navigation-bar-item>` components.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "hide",
                "description": "Hides the navigation bar when set.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
              },
              {
                "name": "labelVisibility",
                "description": "Specifies the visibility of the text. Possible values:\n\n* `auto`: Visible if there are 3 or fewer options, otherwise only the selected state is visible.\n* `selected`: Only visible in the selected state.\n* `labeled`: Always visible.\n* `unlabeled`: Never visible.",
                "value": {
                  "type": [
                    "'auto'",
                    "'selected'",
                    "'labeled'",
                    "'unlabeled'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-labelVisibility"
              },
              {
                "name": "value",
                "description": "The value of the selected `<mdui-navigation-bar-item>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-value"
              },
              {
                "name": "scrollBehavior",
                "description": "Defines the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
                "value": {
                  "type": [
                    "'hide'",
                    "'shrink'",
                    "'elevate'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scrollBehavior"
              },
              {
                "name": "scrollTarget",
                "description": "The element that listens for scroll events. Accepts a CSS selector, DOM element, or [JQ object](https://www.mdui.org/en/docs/2/functions/jq). Defaults to `window`.",
                "value": {
                  "type": [
                    "string",
                    "HTMLElement",
                    "JQ<HTMLElement>"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scrollTarget"
              },
              {
                "name": "scrollThreshold",
                "description": "The scroll distance (in pixels) that triggers the scroll behavior.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scrollThreshold"
              },
              {
                "name": "order",
                "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-order"
              }
            ],
            "events": [
              {
                "name": "change",
                "description": "Emitted when the value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-change"
              },
              {
                "name": "show",
                "description": "Emitted when the navigation bar starts to show. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-show"
              },
              {
                "name": "shown",
                "description": "Emitted after the navigation bar has shown and animations are complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-shown"
              },
              {
                "name": "hide",
                "description": "Emitted when the navigation bar starts to hide. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-hide"
              },
              {
                "name": "hidden",
                "description": "Emitted after the navigation bar has hidden and animations are complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-hidden"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-cssProperties-shape-corner"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-cssProperties-z-index"
              }
            ]
          }
        },
        {
          "name": "mdui-navigation-drawer",
          "description": "Navigation Drawer Component \n\n```html\n<mdui-navigation-drawer>content</mdui-navigation-drawer>\n```",
          "attributes": [
            {
              "name": "open",
              "description": "Opens the navigation drawer.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-open"
            },
            {
              "name": "modal",
              "description": "Displays an overlay when open.\n\nOn narrow devices (screen width < [`--mdui-breakpoint-md`](https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint)), the overlay always displays.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-modal"
            },
            {
              "name": "close-on-esc",
              "description": "Closes the drawer when the ESC key is pressed and an overlay is present.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-close-on-esc"
            },
            {
              "name": "close-on-overlay-click",
              "description": "Closes the drawer when the overlay is clicked.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-close-on-overlay-click"
            },
            {
              "name": "placement",
              "description": "Sets the drawer's display position. Possible values:\n\n* `left`: Display on the left side.\n* `right`: Display on the right side.",
              "value": {
                "type": [
                  "'left'",
                  "'right'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-placement"
            },
            {
              "name": "contained",
              "description": "By default, the navigation drawer displays relative to the `body` element. When set, it displays relative to its parent element.\n\nNote: You must add `position: relative; overflow: hidden;` style to the parent element when this attribute is set.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-contained"
            },
            {
              "name": "order",
              "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-order"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer",
          "slots": [
            {
              "name": "",
              "description": "Contents of the navigation drawer.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "open",
                "description": "Opens the navigation drawer.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-open"
              },
              {
                "name": "modal",
                "description": "Displays an overlay when open.\n\nOn narrow devices (screen width < [`--mdui-breakpoint-md`](https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint)), the overlay always displays.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-modal"
              },
              {
                "name": "closeOnEsc",
                "description": "Closes the drawer when the ESC key is pressed and an overlay is present.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-closeOnEsc"
              },
              {
                "name": "closeOnOverlayClick",
                "description": "Closes the drawer when the overlay is clicked.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-closeOnOverlayClick"
              },
              {
                "name": "placement",
                "description": "Sets the drawer's display position. Possible values:\n\n* `left`: Display on the left side.\n* `right`: Display on the right side.",
                "value": {
                  "type": [
                    "'left'",
                    "'right'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-placement"
              },
              {
                "name": "contained",
                "description": "By default, the navigation drawer displays relative to the `body` element. When set, it displays relative to its parent element.\n\nNote: You must add `position: relative; overflow: hidden;` style to the parent element when this attribute is set.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-contained"
              },
              {
                "name": "order",
                "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-order"
              }
            ],
            "events": [
              {
                "name": "open",
                "description": "Emitted when the navigation drawer starts to open. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-open"
              },
              {
                "name": "opened",
                "description": "Emitted after the navigation drawer has opened and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-opened"
              },
              {
                "name": "close",
                "description": "Emitted when the navigation drawer starts to close. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-close"
              },
              {
                "name": "closed",
                "description": "Emitted after the navigation drawer has closed and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-closed"
              },
              {
                "name": "overlay-click",
                "description": "Emitted when the overlay is clicked.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-overlay-click"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssProperties-shape-corner"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssProperties-z-index"
              }
            ],
            "parts": [
              {
                "name": "overlay",
                "description": "Overlay element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssParts-overlay"
              },
              {
                "name": "panel",
                "description": "Container for the navigation drawer.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssParts-panel"
              }
            ]
          }
        },
        {
          "name": "mdui-navigation-rail-item",
          "description": "Navigation Rail Item Component  It should be used in conjunction with the `<mdui-navigation-rail>` component \n\n```html\n<mdui-navigation-rail>\n  <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n  <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n  <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
          "attributes": [
            {
              "name": "icon",
              "description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
            },
            {
              "name": "active-icon",
              "description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-active-icon"
            },
            {
              "name": "value",
              "description": "The value of the navigation item.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail",
          "slots": [
            {
              "name": "",
              "description": "Text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-default"
            },
            {
              "name": "icon",
              "description": "Icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-icon"
            },
            {
              "name": "active-icon",
              "description": "Icon for the active state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-active-icon"
            },
            {
              "name": "badge",
              "description": "Badge.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-badge"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "icon",
                "description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
              },
              {
                "name": "activeIcon",
                "description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-activeIcon"
              },
              {
                "name": "value",
                "description": "The value of the navigation item.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to treat the linked URL as a download.\n\n**Note**:  This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to display the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent exists.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors exist.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: Author of the current document or article.\n* `bookmark`: Permanent link for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: Link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the navigation rail item gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the navigation rail item loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-events-blur"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner-indicator",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssProperties-shape-corner-indicator"
              }
            ],
            "parts": [
              {
                "name": "container",
                "description": "Container for the navigation item.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-container"
              },
              {
                "name": "indicator",
                "description": "Indicator.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-indicator"
              },
              {
                "name": "badge",
                "description": "Badge.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-badge"
              },
              {
                "name": "icon",
                "description": "Icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-icon"
              },
              {
                "name": "active-icon",
                "description": "Icon for the active state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-active-icon"
              },
              {
                "name": "label",
                "description": "Text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-label"
              }
            ]
          }
        },
        {
          "name": "mdui-navigation-rail",
          "description": "Navigation Rail Component  It should be used in conjunction with the `<mdui-navigation-rail-item>` component \n\n```html\n<mdui-navigation-rail>\n  <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n  <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n  <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
          "attributes": [
            {
              "name": "value",
              "description": "The value of the selected `<mdui-navigation-rail-item>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-value"
            },
            {
              "name": "placement",
              "description": "Sets the navigation bar's position. Possible values:\n\n* `left`: Display on the left.\n* `right`: Display on the right.",
              "value": {
                "type": [
                  "'left'",
                  "'right'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
            },
            {
              "name": "alignment",
              "description": "Sets the alignment of `<mdui-navigation-rail-item>`. Possible values:\n\n* `start`: Aligns to the top.\n* `center`: Aligns to the center.\n* `end`: Aligns to the bottom.",
              "value": {
                "type": [
                  "'start'",
                  "'center'",
                  "'end'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
            },
            {
              "name": "contained",
              "description": "By default, the navigation rail displays relative to the `body` element. When set, it displays relative to its parent element.\n\nNote: You must add `position: relative; overflow: hidden;` style to the parent element when this attribute is set.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
            },
            {
              "name": "divider",
              "description": "Adds a divider between the navigation bar and the page content.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
            },
            {
              "name": "order",
              "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-order"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail",
          "slots": [
            {
              "name": "",
              "description": "Contains `<mdui-navigation-rail-item>` components.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-slots-default"
            },
            {
              "name": "top",
              "description": "Top element.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-slots-top"
            },
            {
              "name": "bottom",
              "description": "Bottom element.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-slots-bottom"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "value",
                "description": "The value of the selected `<mdui-navigation-rail-item>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-value"
              },
              {
                "name": "placement",
                "description": "Sets the navigation bar's position. Possible values:\n\n* `left`: Display on the left.\n* `right`: Display on the right.",
                "value": {
                  "type": [
                    "'left'",
                    "'right'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
              },
              {
                "name": "alignment",
                "description": "Sets the alignment of `<mdui-navigation-rail-item>`. Possible values:\n\n* `start`: Aligns to the top.\n* `center`: Aligns to the center.\n* `end`: Aligns to the bottom.",
                "value": {
                  "type": [
                    "'start'",
                    "'center'",
                    "'end'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
              },
              {
                "name": "contained",
                "description": "By default, the navigation rail displays relative to the `body` element. When set, it displays relative to its parent element.\n\nNote: You must add `position: relative; overflow: hidden;` style to the parent element when this attribute is set.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
              },
              {
                "name": "divider",
                "description": "Adds a divider between the navigation bar and the page content.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
              },
              {
                "name": "order",
                "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-order"
              }
            ],
            "events": [
              {
                "name": "change",
                "description": "Emitted when the value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-events-change"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssProperties-shape-corner"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssProperties-z-index"
              }
            ],
            "parts": [
              {
                "name": "top",
                "description": "Container for the top element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssParts-top"
              },
              {
                "name": "bottom",
                "description": "Container for the bottom element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssParts-bottom"
              },
              {
                "name": "items",
                "description": "Container for `<mdui-navigation-rail-item>` components.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssParts-items"
              }
            ]
          }
        },
        {
          "name": "mdui-radio-group",
          "description": "Radio Group Component  It should be used in conjunction with the `<mdui-radio>` component \n\n```html\n<mdui-radio-group value=\"chinese\">\n  <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n  <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
          "attributes": [
            {
              "name": "disabled",
              "description": "Disables the radio group when set.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-disabled"
            },
            {
              "name": "form",
              "description": "Associates the radio group with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the radio group is associated with its parent `<form>`, if any.\n\nThis attribute allows radio group elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-form"
            },
            {
              "name": "name",
              "description": "The name of the radio group, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-name"
            },
            {
              "name": "value",
              "description": "The value of the selected radio button, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-value"
            },
            {
              "name": "required",
              "description": "Requires a radio selection when the form is submitted.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-required"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/radio",
          "slots": [
            {
              "name": "",
              "description": "`<mdui-radio>` elements.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "disabled",
                "description": "Disables the radio group when set.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-disabled"
              },
              {
                "name": "form",
                "description": "Associates the radio group with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the radio group is associated with its parent `<form>`, if any.\n\nThis attribute allows radio group elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-form"
              },
              {
                "name": "name",
                "description": "The name of the radio group, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-name"
              },
              {
                "name": "value",
                "description": "The value of the selected radio button, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-value"
              },
              {
                "name": "defaultValue",
                "description": "The default selected value. Resets to this value when form is reset. This value can only be set via JavaScript property.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-defaultValue"
              },
              {
                "name": "required",
                "description": "Requires a radio selection when the form is submitted.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-required"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-validationMessage"
              }
            ],
            "events": [
              {
                "name": "change",
                "description": "Emitted when the selected value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-events-change"
              },
              {
                "name": "input",
                "description": "Emitted when the selected value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-events-input"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-events-invalid"
              }
            ]
          }
        },
        {
          "name": "mdui-radio",
          "description": "Radio Component  It should be used in conjunction with the `<mdui-radio-group>` component \n\n```html\n<mdui-radio-group value=\"chinese\">\n  <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n  <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
          "attributes": [
            {
              "name": "value",
              "description": "Specifies the value of the radio.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-value"
            },
            {
              "name": "disabled",
              "description": "Disables the radio when set.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-disabled"
            },
            {
              "name": "checked",
              "description": "Sets the radio to the checked state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checked"
            },
            {
              "name": "unchecked-icon",
              "description": "Specifies the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-unchecked-icon"
            },
            {
              "name": "checked-icon",
              "description": "Specifies the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checked-icon"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/radio",
          "slots": [
            {
              "name": "",
              "description": "Text content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-slots-default"
            },
            {
              "name": "unchecked-icon",
              "description": "Icon for the unchecked state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-slots-unchecked-icon"
            },
            {
              "name": "checked-icon",
              "description": "Icon for the checked state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-slots-checked-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "value",
                "description": "Specifies the value of the radio.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-value"
              },
              {
                "name": "disabled",
                "description": "Disables the radio when set.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-disabled"
              },
              {
                "name": "checked",
                "description": "Sets the radio to the checked state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checked"
              },
              {
                "name": "uncheckedIcon",
                "description": "Specifies the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-uncheckedIcon"
              },
              {
                "name": "checkedIcon",
                "description": "Specifies the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checkedIcon"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the radio gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the radio loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the radio is selected.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-events-change"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "control",
                "description": "Container for the left icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-control"
              },
              {
                "name": "unchecked-icon",
                "description": "Icon for the unchecked state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-unchecked-icon"
              },
              {
                "name": "checked-icon",
                "description": "Icon for the checked state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-checked-icon"
              },
              {
                "name": "label",
                "description": "Text content.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-label"
              }
            ]
          }
        },
        {
          "name": "mdui-range-slider",
          "description": "Range Slider Component \n\n```html\n<mdui-range-slider></mdui-range-slider>\n```",
          "attributes": [
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tabindex"
            },
            {
              "name": "min",
              "description": "Specifies the minimum value. Default is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-min"
            },
            {
              "name": "max",
              "description": "Specifies the maximum value. Default is `100`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-max"
            },
            {
              "name": "step",
              "description": "Specifies the step interval. Default is `1`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-step"
            },
            {
              "name": "tickmarks",
              "description": "Adds tickmarks to the slider.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tickmarks"
            },
            {
              "name": "nolabel",
              "description": "Hides the tooltip.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-nolabel"
            },
            {
              "name": "disabled",
              "description": "Disables the slider.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-disabled"
            },
            {
              "name": "form",
              "description": "Associates the slider with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the slider is associated with its parent `<form>`, if any.\n\nThis attribute allows slider elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-form"
            },
            {
              "name": "name",
              "description": "Specifies the slider's name, which is submitted with the form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-name"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider",
          "js": {
            "properties": [
              {
                "name": "defaultValue",
                "description": "Specifies the default value. Resets to this state when the form is reset. This value can only be set via JavaScript property.",
                "value": {
                  "type": "number[]"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-defaultValue"
              },
              {
                "name": "value",
                "description": "Specifies the slider value in array format. This value is submitted with form data. It can't be set with HTML attributes initially, only via JavaScript property.",
                "value": {
                  "type": "number[]"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-value"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tabIndex"
              },
              {
                "name": "min",
                "description": "Specifies the minimum value. Default is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-min"
              },
              {
                "name": "max",
                "description": "Specifies the maximum value. Default is `100`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-max"
              },
              {
                "name": "step",
                "description": "Specifies the step interval. Default is `1`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-step"
              },
              {
                "name": "tickmarks",
                "description": "Adds tickmarks to the slider.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tickmarks"
              },
              {
                "name": "nolabel",
                "description": "Hides the tooltip.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-nolabel"
              },
              {
                "name": "disabled",
                "description": "Disables the slider.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-disabled"
              },
              {
                "name": "form",
                "description": "Associates the slider with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the slider is associated with its parent `<form>`, if any.\n\nThis attribute allows slider elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-form"
              },
              {
                "name": "name",
                "description": "Specifies the slider's name, which is submitted with the form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-name"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-validationMessage"
              },
              {
                "name": "labelFormatter",
                "description": "Specifies a function to format the tooltip's value. The function should take the slider's value as an argument and return a string to display in the tooltip.",
                "value": {
                  "type": "(value: number) => string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-labelFormatter"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the range slider gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the range slider loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the value changes and the range slider loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-change"
              },
              {
                "name": "input",
                "description": "Emitted when the value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-input"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-invalid"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "track-inactive",
                "description": "Track for the inactive state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-track-inactive"
              },
              {
                "name": "track-active",
                "description": "Track for the active state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-track-active"
              },
              {
                "name": "handle",
                "description": "Handle for interaction.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-handle"
              },
              {
                "name": "label",
                "description": "Tooltip text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-label"
              },
              {
                "name": "tickmark",
                "description": "Tick mark.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-tickmark"
              }
            ]
          }
        },
        {
          "name": "mdui-segmented-button-group",
          "description": "Segmented Button Group Component  It should be used in conjunction with the `<mdui-segmented-button>` component \n\n```html\n<mdui-segmented-button-group>\n  <mdui-segmented-button>Day</mdui-segmented-button>\n  <mdui-segmented-button>Week</mdui-segmented-button>\n  <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
          "attributes": [
            {
              "name": "full-width",
              "description": "If set, the segmented button group will fill the width of its parent element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-full-width"
            },
            {
              "name": "selects",
              "description": "Defines selectable states. Default is non-selectable. Possible values:\n\n* `single`: Only one can be selected.\n* `multiple`: Multiple selections are allowed.",
              "value": {
                "type": [
                  "'single'",
                  "'multiple'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
            },
            {
              "name": "disabled",
              "description": "Disables the segmented button group when set.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
            },
            {
              "name": "required",
              "description": "Requires a selection when the form is submitted.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-required"
            },
            {
              "name": "form",
              "description": "Associates the segmented button group with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the segmented button group is associated with its parent `<form>`, if any.\n\nThis attribute allows segmented button group elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-form"
            },
            {
              "name": "name",
              "description": "The name of the segmented button group, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-name"
            },
            {
              "name": "value",
              "description": "The value of the selected `<mdui-segmented-button>`. This value is submitted with form data.\n\nNote: The HTML attribute is always a string and can only be set as an initial value when `selects=\"single\"`. The JavaScript property is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. In `selects=\"multiple\"`, this value can only be modified by changing the JavaScript property.",
              "value": {
                "type": [
                  "string",
                  "string[]"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-value"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button",
          "slots": [
            {
              "name": "",
              "description": "`<mdui-segmented-button>` elements.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "fullWidth",
                "description": "If set, the segmented button group will fill the width of its parent element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-fullWidth"
              },
              {
                "name": "selects",
                "description": "Defines selectable states. Default is non-selectable. Possible values:\n\n* `single`: Only one can be selected.\n* `multiple`: Multiple selections are allowed.",
                "value": {
                  "type": [
                    "'single'",
                    "'multiple'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
              },
              {
                "name": "disabled",
                "description": "Disables the segmented button group when set.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
              },
              {
                "name": "required",
                "description": "Requires a selection when the form is submitted.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-required"
              },
              {
                "name": "form",
                "description": "Associates the segmented button group with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the segmented button group is associated with its parent `<form>`, if any.\n\nThis attribute allows segmented button group elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-form"
              },
              {
                "name": "name",
                "description": "The name of the segmented button group, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-name"
              },
              {
                "name": "value",
                "description": "The value of the selected `<mdui-segmented-button>`. This value is submitted with form data.\n\nNote: The HTML attribute is always a string and can only be set as an initial value when `selects=\"single\"`. The JavaScript property is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. In `selects=\"multiple\"`, this value can only be modified by changing the JavaScript property.",
                "value": {
                  "type": [
                    "string",
                    "string[]"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-value"
              },
              {
                "name": "defaultValue",
                "description": "The default selected value. Resets to this state when the form is reset. This value can only be set via JavaScript property.",
                "value": {
                  "type": [
                    "string",
                    "string[]"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-defaultValue"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-validationMessage"
              }
            ],
            "events": [
              {
                "name": "change",
                "description": "Emitted when the selected value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-events-change"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-events-invalid"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-cssProperties-shape-corner"
              }
            ]
          }
        },
        {
          "name": "mdui-segmented-button",
          "description": "Segmented Button Component  It should be used in conjunction with the `<mdui-segmented-button-group>` component \n\n```html\n<mdui-segmented-button-group>\n  <mdui-segmented-button>Day</mdui-segmented-button>\n  <mdui-segmented-button>Week</mdui-segmented-button>\n  <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
          "attributes": [
            {
              "name": "icon",
              "description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-icon"
            },
            {
              "name": "end-icon",
              "description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-end-icon"
            },
            {
              "name": "selected-icon",
              "description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-selected-icon"
            },
            {
              "name": "href",
              "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-href"
            },
            {
              "name": "download",
              "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-download"
            },
            {
              "name": "target",
              "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'_blank'",
                  "'_parent'",
                  "'_self'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-target"
            },
            {
              "name": "rel",
              "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
              "value": {
                "type": [
                  "'alternate'",
                  "'author'",
                  "'bookmark'",
                  "'external'",
                  "'help'",
                  "'license'",
                  "'me'",
                  "'next'",
                  "'nofollow'",
                  "'noreferrer'",
                  "'opener'",
                  "'prev'",
                  "'search'",
                  "'tag'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-rel"
            },
            {
              "name": "autofocus",
              "description": "Specifies that the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-tabindex"
            },
            {
              "name": "disabled",
              "description": "Disables the element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-disabled"
            },
            {
              "name": "loading",
              "description": "Indicates that the element is in a loading state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-loading"
            },
            {
              "name": "name",
              "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-name"
            },
            {
              "name": "value",
              "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-value"
            },
            {
              "name": "type",
              "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
              "value": {
                "type": [
                  "'submit'",
                  "'reset'",
                  "'button'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-type"
            },
            {
              "name": "form",
              "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-form"
            },
            {
              "name": "formaction",
              "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formaction"
            },
            {
              "name": "formenctype",
              "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'application/x-www-form-urlencoded'",
                  "'multipart/form-data'",
                  "'text/plain'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formenctype"
            },
            {
              "name": "formmethod",
              "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'post'",
                  "'get'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formmethod"
            },
            {
              "name": "formnovalidate",
              "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formnovalidate"
            },
            {
              "name": "formtarget",
              "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
              "value": {
                "type": [
                  "'_self'",
                  "'_blank'",
                  "'_parent'",
                  "'_top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formtarget"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button",
          "slots": [
            {
              "name": "",
              "description": "Text content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-default"
            },
            {
              "name": "icon",
              "description": "Left icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-icon"
            },
            {
              "name": "selected-icon",
              "description": "Icon for the selected state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-selected-icon"
            },
            {
              "name": "end-icon",
              "description": "Right icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-end-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "icon",
                "description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-icon"
              },
              {
                "name": "endIcon",
                "description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-endIcon"
              },
              {
                "name": "selectedIcon",
                "description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-selectedIcon"
              },
              {
                "name": "href",
                "description": "The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-href"
              },
              {
                "name": "download",
                "description": "Instructs the browser to download the linked URL.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-download"
              },
              {
                "name": "target",
                "description": "Defines where to open the linked URL. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context or `_self` if no parent.\n* `_self`: Opens in the current browsing context. (Default).\n* `_top`: Opens in the topmost browsing context or `_self` if no ancestors.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'_blank'",
                    "'_parent'",
                    "'_self'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-target"
              },
              {
                "name": "rel",
                "description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: Alternate versions of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.\n* `me`: Indicates that the current document represents the person who owns the linked content.\n* `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document.\n* `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document.\n* `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has \"`_blank`\" as `target` attribute value).\n* `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Gives a tag (identified by the given address) that applies to the current document.\n\n**Note**: This is only available when `href` is specified.",
                "value": {
                  "type": [
                    "'alternate'",
                    "'author'",
                    "'bookmark'",
                    "'external'",
                    "'help'",
                    "'license'",
                    "'me'",
                    "'next'",
                    "'nofollow'",
                    "'noreferrer'",
                    "'opener'",
                    "'prev'",
                    "'search'",
                    "'tag'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-rel"
              },
              {
                "name": "autofocus",
                "description": "Specifies that the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Defines the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-tabIndex"
              },
              {
                "name": "disabled",
                "description": "Disables the element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-disabled"
              },
              {
                "name": "loading",
                "description": "Indicates that the element is in a loading state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-loading"
              },
              {
                "name": "name",
                "description": "The button's name, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-name"
              },
              {
                "name": "value",
                "description": "The button's value, which is submitted with form data.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-value"
              },
              {
                "name": "type",
                "description": "Defines the button's default behavior. The default is `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Resets all the controls to their initial values.\n* `button`: No default behavior, does nothing when pressed by default.\n\n**Note**: This is only available when `href` is not specified.",
                "value": {
                  "type": [
                    "'submit'",
                    "'reset'",
                    "'button'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-type"
              },
              {
                "name": "form",
                "description": "Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any.\n\nThis attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.\n\n**Note**: Only available when `href` is not specified.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-form"
              },
              {
                "name": "formAction",
                "description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formAction"
              },
              {
                "name": "formEnctype",
                "description": "Specifies the form data encoding method. Possible values:\n\n* `application/x-www-form-urlencoded`: Default if the attribute is not used.\n* `multipart/form-data`: Used for `<input>` elements with `type` set to `file`.\n* `text/plain`: For debugging, not for real form submission.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'application/x-www-form-urlencoded'",
                    "'multipart/form-data'",
                    "'text/plain'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formEnctype"
              },
              {
                "name": "formMethod",
                "description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Form data included in HTTP request body.\n* `get`: Form data appended to `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'post'",
                    "'get'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formMethod"
              },
              {
                "name": "formNoValidate",
                "description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formNoValidate"
              },
              {
                "name": "formTarget",
                "description": "Specifies where to display the form submission response. Possible values:\n\n* `_self`: Current browsing context. (Default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context or `_self` if no parent.\n* `_top`: Topmost browsing context or `_self` if no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
                "value": {
                  "type": [
                    "'_self'",
                    "'_blank'",
                    "'_parent'",
                    "'_top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formTarget"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-validationMessage"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the segmented button gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the segmented button loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-events-blur"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-events-invalid"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "button",
                "description": "Internal `<button>` or `<a>` element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-button"
              },
              {
                "name": "icon",
                "description": "Left icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-icon"
              },
              {
                "name": "selected-icon",
                "description": "Icon for the selected state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-selected-icon"
              },
              {
                "name": "end-icon",
                "description": "Right icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-end-icon"
              },
              {
                "name": "label",
                "description": "Text content.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-label"
              },
              {
                "name": "loading",
                "description": "The `<mdui-circular-progress>` element for the loading state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-loading"
              }
            ]
          }
        },
        {
          "name": "mdui-select",
          "description": "Select Component  It should be used in conjunction with the `<mdui-menu-item>` component \n\n```html\n<mdui-select>\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the select style. Possible values:\n\n* `filled`: Solid background, strong visual emphasis.\n* `outlined`: Bordered, less visual emphasis.",
              "value": {
                "type": [
                  "'filled'",
                  "'outlined'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-variant"
            },
            {
              "name": "multiple",
              "description": "Enables multiple selections.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-multiple"
            },
            {
              "name": "name",
              "description": "Name of the select, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-name"
            },
            {
              "name": "value",
              "description": "Value of the select, which is submitted with form data.\n\nIf `multiple` is not set, the value is a string; if set, it's an array of strings. HTML attributes can only set string values; array values must be set via JavaScript property.",
              "value": {
                "type": [
                  "string",
                  "string[]"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-value"
            },
            {
              "name": "label",
              "description": "Label text.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-label"
            },
            {
              "name": "placeholder",
              "description": "Placeholder text.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placeholder"
            },
            {
              "name": "helper",
              "description": "Helper text displayed below the select. Alternatively, use `slot=\"helper\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-helper"
            },
            {
              "name": "clearable",
              "description": "Allows the select to be cleared.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clearable"
            },
            {
              "name": "clear-icon",
              "description": "Material Icons name for the clear button displayed on the right of the select when clearable. Alternatively, use `slot=\"clear-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clear-icon"
            },
            {
              "name": "placement",
              "description": "Select placement. Possible values:\n\n* `auto`: Automatically determined.\n* `bottom`: Below the input.\n* `top`: Above the input.",
              "value": {
                "type": [
                  "'auto'",
                  "'bottom'",
                  "'top'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placement"
            },
            {
              "name": "end-aligned",
              "description": "Aligns text to the right.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-end-aligned"
            },
            {
              "name": "prefix",
              "description": "Prefix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-prefix"
            },
            {
              "name": "suffix",
              "description": "Suffix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-suffix"
            },
            {
              "name": "icon",
              "description": "Material Icons name for the prefix icon. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-icon"
            },
            {
              "name": "end-icon",
              "description": "Material Icons name for the suffix icon. Alternatively, use `slot=\"end-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-end-icon"
            },
            {
              "name": "error-icon",
              "description": "Material Icons name displayed on the right when form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-error-icon"
            },
            {
              "name": "form",
              "description": "Associates the select with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the select is associated with its parent `<form>`, if any.\n\nThis attribute allows select elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-form"
            },
            {
              "name": "readonly",
              "description": "Makes the select read-only.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-readonly"
            },
            {
              "name": "disabled",
              "description": "Disables the select.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-disabled"
            },
            {
              "name": "required",
              "description": "Requires a selection when the form is submitted.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-required"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/select",
          "slots": [
            {
              "name": "",
              "description": "`<mdui-menu-item>` elements.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-default"
            },
            {
              "name": "icon",
              "description": "Left icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-icon"
            },
            {
              "name": "end-icon",
              "description": "Right icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-end-icon"
            },
            {
              "name": "error-icon",
              "description": "Right icon when validation fails.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-error-icon"
            },
            {
              "name": "prefix",
              "description": "Left text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-prefix"
            },
            {
              "name": "suffix",
              "description": "Right text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-suffix"
            },
            {
              "name": "clear-button",
              "description": "Clear button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-clear-button"
            },
            {
              "name": "clear-icon",
              "description": "Icon in the clear button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-clear-icon"
            },
            {
              "name": "helper",
              "description": "Bottom helper text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-helper"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the select style. Possible values:\n\n* `filled`: Solid background, strong visual emphasis.\n* `outlined`: Bordered, less visual emphasis.",
                "value": {
                  "type": [
                    "'filled'",
                    "'outlined'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-variant"
              },
              {
                "name": "multiple",
                "description": "Enables multiple selections.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-multiple"
              },
              {
                "name": "name",
                "description": "Name of the select, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-name"
              },
              {
                "name": "value",
                "description": "Value of the select, which is submitted with form data.\n\nIf `multiple` is not set, the value is a string; if set, it's an array of strings. HTML attributes can only set string values; array values must be set via JavaScript property.",
                "value": {
                  "type": [
                    "string",
                    "string[]"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-value"
              },
              {
                "name": "defaultValue",
                "description": "Default selected value. Resets to this value when form is reset. Can only be set via JavaScript property.",
                "value": {
                  "type": [
                    "string",
                    "string[]"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-defaultValue"
              },
              {
                "name": "label",
                "description": "Label text.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-label"
              },
              {
                "name": "placeholder",
                "description": "Placeholder text.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placeholder"
              },
              {
                "name": "helper",
                "description": "Helper text displayed below the select. Alternatively, use `slot=\"helper\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-helper"
              },
              {
                "name": "clearable",
                "description": "Allows the select to be cleared.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clearable"
              },
              {
                "name": "clearIcon",
                "description": "Material Icons name for the clear button displayed on the right of the select when clearable. Alternatively, use `slot=\"clear-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clearIcon"
              },
              {
                "name": "placement",
                "description": "Select placement. Possible values:\n\n* `auto`: Automatically determined.\n* `bottom`: Below the input.\n* `top`: Above the input.",
                "value": {
                  "type": [
                    "'auto'",
                    "'bottom'",
                    "'top'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placement"
              },
              {
                "name": "endAligned",
                "description": "Aligns text to the right.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-endAligned"
              },
              {
                "name": "prefix",
                "description": "Prefix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-prefix"
              },
              {
                "name": "suffix",
                "description": "Suffix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-suffix"
              },
              {
                "name": "icon",
                "description": "Material Icons name for the prefix icon. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-icon"
              },
              {
                "name": "endIcon",
                "description": "Material Icons name for the suffix icon. Alternatively, use `slot=\"end-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-endIcon"
              },
              {
                "name": "errorIcon",
                "description": "Material Icons name displayed on the right when form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-errorIcon"
              },
              {
                "name": "form",
                "description": "Associates the select with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the select is associated with its parent `<form>`, if any.\n\nThis attribute allows select elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-form"
              },
              {
                "name": "readonly",
                "description": "Makes the select read-only.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-readonly"
              },
              {
                "name": "disabled",
                "description": "Disables the select.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-disabled"
              },
              {
                "name": "required",
                "description": "Requires a selection when the form is submitted.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-required"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-validationMessage"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the select gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the select loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the selected value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#events-change"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#events-invalid"
              },
              {
                "name": "clear",
                "description": "Emitted when the clear button is clicked. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#events-clear"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "chips",
                "description": "Container for option chips when `multiple` is enabled.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chips"
              },
              {
                "name": "chip",
                "description": "Individual chip representing each multiselect option.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip"
              },
              {
                "name": "chip__button",
                "description": "The `<button>` element within the chip.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip__button"
              },
              {
                "name": "chip__label",
                "description": "Text part of the chip.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip__label"
              },
              {
                "name": "chip__delete-icon",
                "description": "Delete icon within the chip.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip__delete-icon"
              },
              {
                "name": "text-field",
                "description": "Text field, i.e., [`<mdui-text-field>`](https://www.mdui.org/en/docs/2/components/text-field) element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field"
              },
              {
                "name": "text-field__container",
                "description": "Container for the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__container"
              },
              {
                "name": "text-field__icon",
                "description": "Icon within the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__icon"
              },
              {
                "name": "text-field__end-icon",
                "description": "Right-side icon within the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__end-icon"
              },
              {
                "name": "text-field__error-icon",
                "description": "Icon displayed in the text field upon validation failure.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__error-icon"
              },
              {
                "name": "text-field__prefix",
                "description": "Text on the left side of the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__prefix"
              },
              {
                "name": "text-field__suffix",
                "description": "Text on the right side of the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__suffix"
              },
              {
                "name": "text-field__label",
                "description": "Label text displayed above the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__label"
              },
              {
                "name": "text-field__input",
                "description": "The `<input>` element within the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__input"
              },
              {
                "name": "text-field__clear-button",
                "description": "Clear button within the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__clear-button"
              },
              {
                "name": "text-field__clear-icon",
                "description": "Icon within the clear button of the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__clear-icon"
              },
              {
                "name": "text-field__supporting",
                "description": "Container for supporting information at the bottom of the text field, including helper and error messages.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__supporting"
              },
              {
                "name": "text-field__helper",
                "description": "Helper text displayed at the bottom of the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__helper"
              },
              {
                "name": "text-field__error",
                "description": "Error message displayed at the bottom of the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__error"
              },
              {
                "name": "menu",
                "description": "Dropdown menu, i.e., [`<mdui-menu>`](https://www.mdui.org/en/docs/2/components/menu) element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-menu"
              }
            ]
          }
        },
        {
          "name": "mdui-slider",
          "description": "Slider Component \n\n```html\n<mdui-slider></mdui-slider>\n```",
          "attributes": [
            {
              "name": "value",
              "description": "The value of the slider, which is submitted with form data.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-value"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tabindex"
            },
            {
              "name": "min",
              "description": "Specifies the minimum value. Default is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-min"
            },
            {
              "name": "max",
              "description": "Specifies the maximum value. Default is `100`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-max"
            },
            {
              "name": "step",
              "description": "Specifies the step interval. Default is `1`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-step"
            },
            {
              "name": "tickmarks",
              "description": "Adds tickmarks to the slider.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tickmarks"
            },
            {
              "name": "nolabel",
              "description": "Hides the tooltip.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-nolabel"
            },
            {
              "name": "disabled",
              "description": "Disables the slider.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-disabled"
            },
            {
              "name": "form",
              "description": "Associates the slider with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the slider is associated with its parent `<form>`, if any.\n\nThis attribute allows slider elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-form"
            },
            {
              "name": "name",
              "description": "Specifies the slider's name, which is submitted with the form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-name"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/slider",
          "js": {
            "properties": [
              {
                "name": "value",
                "description": "The value of the slider, which is submitted with form data.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-value"
              },
              {
                "name": "defaultValue",
                "description": "The default value. The slider resets to this value when the form is reset. This can only be set via a JavaScript property.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-defaultValue"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tabIndex"
              },
              {
                "name": "min",
                "description": "Specifies the minimum value. Default is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-min"
              },
              {
                "name": "max",
                "description": "Specifies the maximum value. Default is `100`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-max"
              },
              {
                "name": "step",
                "description": "Specifies the step interval. Default is `1`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-step"
              },
              {
                "name": "tickmarks",
                "description": "Adds tickmarks to the slider.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tickmarks"
              },
              {
                "name": "nolabel",
                "description": "Hides the tooltip.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-nolabel"
              },
              {
                "name": "disabled",
                "description": "Disables the slider.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-disabled"
              },
              {
                "name": "form",
                "description": "Associates the slider with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the slider is associated with its parent `<form>`, if any.\n\nThis attribute allows slider elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-form"
              },
              {
                "name": "name",
                "description": "Specifies the slider's name, which is submitted with the form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-name"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-validationMessage"
              },
              {
                "name": "labelFormatter",
                "description": "Specifies a function to format the tooltip's value. The function should take the slider's value as an argument and return a string to display in the tooltip.",
                "value": {
                  "type": "(value: number) => string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-labelFormatter"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the slider gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the slider loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the value changes and the slider loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-change"
              },
              {
                "name": "input",
                "description": "Emitted when the value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-input"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-invalid"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "track-inactive",
                "description": "Inactive track.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-track-inactive"
              },
              {
                "name": "track-active",
                "description": "Active track.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-track-active"
              },
              {
                "name": "handle",
                "description": "Slider handle.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-handle"
              },
              {
                "name": "label",
                "description": "Prompt text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-label"
              },
              {
                "name": "tickmark",
                "description": "Tick mark.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-tickmark"
              }
            ]
          }
        },
        {
          "name": "mdui-snackbar",
          "description": "Snackbar Component \n\n```html\n<mdui-snackbar>message</mdui-snackbar>\n```",
          "attributes": [
            {
              "name": "open",
              "description": "Opens the Snackbar.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-open"
            },
            {
              "name": "placement",
              "description": "Snackbar placement. Default is `bottom`. Possible values:\n\n* `top`: Top, centered.\n* `top-start`: Top, left-aligned.\n* `top-end`: Top, right-aligned.\n* `bottom`: Bottom, centered.\n* `bottom-start`: Bottom, left-aligned.\n* `bottom-end`: Bottom, right-aligned.",
              "value": {
                "type": [
                  "'top'",
                  "'top-start'",
                  "'top-end'",
                  "'bottom'",
                  "'bottom-start'",
                  "'bottom-end'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-placement"
            },
            {
              "name": "action",
              "description": "Text for the action button. Alternatively, use `slot=\"action\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-action"
            },
            {
              "name": "action-loading",
              "description": "Indicates if the action button is in the loading state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-action-loading"
            },
            {
              "name": "closeable",
              "description": "Shows a close button on the right.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeable"
            },
            {
              "name": "close-icon",
              "description": "Material Icons name for the close button. Alternatively, use `slot=\"close-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-close-icon"
            },
            {
              "name": "message-line",
              "description": "Maximum lines for message text. Default is unlimited. Possible values:\n\n* `1`: Single line.\n* `2`: Two lines.",
              "value": {
                "type": [
                  "1",
                  "2"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-message-line"
            },
            {
              "name": "auto-close-delay",
              "description": "Automatically closes the Snackbar after a specified time (in milliseconds). Set to `0` to disable auto-closing. Default is 5 seconds.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-auto-close-delay"
            },
            {
              "name": "close-on-outside-click",
              "description": "Closes the Snackbar when clicking or touching outside the Snackbar area.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-close-on-outside-click"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar",
          "slots": [
            {
              "name": "",
              "description": "Snackbar message.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-default"
            },
            {
              "name": "action",
              "description": "Right action button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-action"
            },
            {
              "name": "close-button",
              "description": "Right close button. Displayed if `closeable` is set",
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-close-button"
            },
            {
              "name": "close-icon",
              "description": "Icon in right close button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-close-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "open",
                "description": "Opens the Snackbar.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-open"
              },
              {
                "name": "placement",
                "description": "Snackbar placement. Default is `bottom`. Possible values:\n\n* `top`: Top, centered.\n* `top-start`: Top, left-aligned.\n* `top-end`: Top, right-aligned.\n* `bottom`: Bottom, centered.\n* `bottom-start`: Bottom, left-aligned.\n* `bottom-end`: Bottom, right-aligned.",
                "value": {
                  "type": [
                    "'top'",
                    "'top-start'",
                    "'top-end'",
                    "'bottom'",
                    "'bottom-start'",
                    "'bottom-end'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-placement"
              },
              {
                "name": "action",
                "description": "Text for the action button. Alternatively, use `slot=\"action\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-action"
              },
              {
                "name": "actionLoading",
                "description": "Indicates if the action button is in the loading state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-actionLoading"
              },
              {
                "name": "closeable",
                "description": "Shows a close button on the right.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeable"
              },
              {
                "name": "closeIcon",
                "description": "Material Icons name for the close button. Alternatively, use `slot=\"close-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeIcon"
              },
              {
                "name": "messageLine",
                "description": "Maximum lines for message text. Default is unlimited. Possible values:\n\n* `1`: Single line.\n* `2`: Two lines.",
                "value": {
                  "type": [
                    "1",
                    "2"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-messageLine"
              },
              {
                "name": "autoCloseDelay",
                "description": "Automatically closes the Snackbar after a specified time (in milliseconds). Set to `0` to disable auto-closing. Default is 5 seconds.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-autoCloseDelay"
              },
              {
                "name": "closeOnOutsideClick",
                "description": "Closes the Snackbar when clicking or touching outside the Snackbar area.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeOnOutsideClick"
              }
            ],
            "events": [
              {
                "name": "open",
                "description": "Emitted when the snackbar starts to open. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-open"
              },
              {
                "name": "opened",
                "description": "Emitted after the snackbar opens and animations complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-opened"
              },
              {
                "name": "close",
                "description": "Emitted when the snackbar starts to close. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-close"
              },
              {
                "name": "closed",
                "description": "Emitted after the snackbar closes and animations complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-closed"
              },
              {
                "name": "action-click",
                "description": "Emitted when the action button is clicked.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-action-click"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssProperties-shape-corner"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssProperties-z-index"
              }
            ],
            "parts": [
              {
                "name": "message",
                "description": "Message text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-message"
              },
              {
                "name": "action",
                "description": "Action button.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-action"
              },
              {
                "name": "close-button",
                "description": "Close button.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-close-button"
              },
              {
                "name": "close-icon",
                "description": "Icon in the close button.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-close-icon"
              }
            ]
          }
        },
        {
          "name": "mdui-switch",
          "description": "Switch Component \n\n```html\n<mdui-switch></mdui-switch>\n```",
          "attributes": [
            {
              "name": "disabled",
              "description": "Disables the switch.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-disabled"
            },
            {
              "name": "checked",
              "description": "Sets the switch to the checked state.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checked"
            },
            {
              "name": "unchecked-icon",
              "description": "The Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-unchecked-icon"
            },
            {
              "name": "checked-icon",
              "description": "The Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`. Defaults to the `check` icon; an empty string removes the default icon.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checked-icon"
            },
            {
              "name": "required",
              "description": "The switch must be checked when submitting the form.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-required"
            },
            {
              "name": "form",
              "description": "Associates the switch with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the switch is associated with its parent `<form>`, if any.\n\nThis attribute allows switch elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-form"
            },
            {
              "name": "name",
              "description": "The name of the switch, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-name"
            },
            {
              "name": "value",
              "description": "The value of the switch, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-value"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/switch",
          "slots": [
            {
              "name": "unchecked-icon",
              "description": "Element for the unchecked state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#slots-unchecked-icon"
            },
            {
              "name": "checked-icon",
              "description": "Element for the checked state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/switch#slots-checked-icon"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "disabled",
                "description": "Disables the switch.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-disabled"
              },
              {
                "name": "checked",
                "description": "Sets the switch to the checked state.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checked"
              },
              {
                "name": "defaultChecked",
                "description": "The default checked state. The switch resets to this state when the form is reset. This can only be set via a JavaScript property.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-defaultChecked"
              },
              {
                "name": "uncheckedIcon",
                "description": "The Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-uncheckedIcon"
              },
              {
                "name": "checkedIcon",
                "description": "The Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`. Defaults to the `check` icon; an empty string removes the default icon.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checkedIcon"
              },
              {
                "name": "required",
                "description": "The switch must be checked when submitting the form.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-required"
              },
              {
                "name": "form",
                "description": "Associates the switch with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the switch is associated with its parent `<form>`, if any.\n\nThis attribute allows switch elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-form"
              },
              {
                "name": "name",
                "description": "The name of the switch, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-name"
              },
              {
                "name": "value",
                "description": "The value of the switch, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-value"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-validationMessage"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the switch gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the switch loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the checked state changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-change"
              },
              {
                "name": "input",
                "description": "Emitted when the checked state changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-input"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-invalid"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The corner size of the track. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssProperties-shape-corner"
              },
              {
                "name": "--shape-corner-thumb",
                "description": "The corner size of the icon container. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssProperties-shape-corner-thumb"
              }
            ],
            "parts": [
              {
                "name": "track",
                "description": "Track.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-track"
              },
              {
                "name": "thumb",
                "description": "Icon container.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-thumb"
              },
              {
                "name": "unchecked-icon",
                "description": "Icon for the unchecked state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-unchecked-icon"
              },
              {
                "name": "checked-icon",
                "description": "Icon for the checked state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-checked-icon"
              }
            ]
          }
        },
        {
          "name": "mdui-tab-panel",
          "description": "Tab Panel Component  It should be used in conjunction with the `<mdui-tabs>` and `<mdui-tab>` components \n\n```html\n<mdui-tabs value=\"tab-1\">\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
          "attributes": [
            {
              "name": "value",
              "description": "Specifies the value of the tab panel.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-panel-attributes-value"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/tabs",
          "slots": [
            {
              "name": "",
              "description": "The content of the tab panel.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-panel-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "value",
                "description": "Specifies the value of the tab panel.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-panel-attributes-value"
              }
            ]
          }
        },
        {
          "name": "mdui-tab",
          "description": "Tab Component  It should be used in conjunction with the `<mdui-tabs>` and `<mdui-tab-panel>` components \n\n```html\n<mdui-tabs value=\"tab-1\">\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
          "attributes": [
            {
              "name": "value",
              "description": "Specifies the tab value.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-value"
            },
            {
              "name": "icon",
              "description": "Specifies the Material Icons name. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-icon"
            },
            {
              "name": "inline",
              "description": "Arranges the icon and text horizontally.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-inline"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/tabs",
          "slots": [
            {
              "name": "",
              "description": "Tab text.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-default"
            },
            {
              "name": "icon",
              "description": "Tab icon.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-icon"
            },
            {
              "name": "badge",
              "description": "Badge.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-badge"
            },
            {
              "name": "custom",
              "description": "Custom tab content.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-custom"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "value",
                "description": "Specifies the tab value.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-value"
              },
              {
                "name": "icon",
                "description": "Specifies the Material Icons name. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-icon"
              },
              {
                "name": "inline",
                "description": "Arranges the icon and text horizontally.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-inline"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the tab gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the tab loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-events-blur"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "container",
                "description": "Tab container.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-cssParts-container"
              },
              {
                "name": "icon",
                "description": "Tab icon.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-cssParts-icon"
              },
              {
                "name": "label",
                "description": "Tab text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-cssParts-label"
              }
            ]
          }
        },
        {
          "name": "mdui-tabs",
          "description": "Tabs Component  It should be used in conjunction with the `<mdui-tab>` and `<mdui-tab-panel>` components \n\n```html\n<mdui-tabs value=\"tab-1\">\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the tab shape. Possible values:\n\n* `primary`: Located below `<mdui-top-app-bar>`, used for switching between main application pages.\n* `secondary`: Located within the page, used for switching between related content groups.",
              "value": {
                "type": [
                  "'primary'",
                  "'secondary'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-variant"
            },
            {
              "name": "value",
              "description": "Specifies the active `<mdui-tab>` value.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-value"
            },
            {
              "name": "placement",
              "description": "Defines the tab position. Default is `top-start`. Possible values:\n\n* `top-start`: Top, left-aligned.\n* `top`: Top, center-aligned.\n* `top-end`: Top, right-aligned.\n* `bottom-start`: Bottom, left-aligned.\n* `bottom`: Bottom, center-aligned.\n* `bottom-end`: Bottom, right-aligned.\n* `left-start`: Left, top-aligned.\n* `left`: Left, center-aligned.\n* `left-end`: Left, bottom-aligned.\n* `right-start`: Right, top-aligned.\n* `right`: Right, center-aligned.\n* `right-end`: Right, bottom-aligned.",
              "value": {
                "type": [
                  "'top-start'",
                  "'top'",
                  "'top-end'",
                  "'bottom-start'",
                  "'bottom'",
                  "'bottom-end'",
                  "'left-start'",
                  "'left'",
                  "'left-end'",
                  "'right-start'",
                  "'right'",
                  "'right-end'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-placement"
            },
            {
              "name": "full-width",
              "description": "If set, the tabs will fill the width of its parent element.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-full-width"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/tabs",
          "slots": [
            {
              "name": "",
              "description": "`<mdui-tab>` elements.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-slots-default"
            },
            {
              "name": "panel",
              "description": "`<mdui-tab-panel>` elements.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-slots-panel"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the tab shape. Possible values:\n\n* `primary`: Located below `<mdui-top-app-bar>`, used for switching between main application pages.\n* `secondary`: Located within the page, used for switching between related content groups.",
                "value": {
                  "type": [
                    "'primary'",
                    "'secondary'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-variant"
              },
              {
                "name": "value",
                "description": "Specifies the active `<mdui-tab>` value.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-value"
              },
              {
                "name": "placement",
                "description": "Defines the tab position. Default is `top-start`. Possible values:\n\n* `top-start`: Top, left-aligned.\n* `top`: Top, center-aligned.\n* `top-end`: Top, right-aligned.\n* `bottom-start`: Bottom, left-aligned.\n* `bottom`: Bottom, center-aligned.\n* `bottom-end`: Bottom, right-aligned.\n* `left-start`: Left, top-aligned.\n* `left`: Left, center-aligned.\n* `left-end`: Left, bottom-aligned.\n* `right-start`: Right, top-aligned.\n* `right`: Right, center-aligned.\n* `right-end`: Right, bottom-aligned.",
                "value": {
                  "type": [
                    "'top-start'",
                    "'top'",
                    "'top-end'",
                    "'bottom-start'",
                    "'bottom'",
                    "'bottom-end'",
                    "'left-start'",
                    "'left'",
                    "'left-end'",
                    "'right-start'",
                    "'right'",
                    "'right-end'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-placement"
              },
              {
                "name": "fullWidth",
                "description": "If set, the tabs will fill the width of its parent element.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-fullWidth"
              }
            ],
            "events": [
              {
                "name": "change",
                "description": "Emitted when the selected value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-events-change"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "container",
                "description": "Container for `<mdui-tab>` elements.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-cssParts-container"
              },
              {
                "name": "indicator",
                "description": "Indicator for the active state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-cssParts-indicator"
              }
            ]
          }
        },
        {
          "name": "mdui-text-field",
          "description": "Text Field Component \n\n```html\n<mdui-text-field label=\"Text Field\"></mdui-text-field>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the text field style. Default is `filled`. Possible values:\n\n* `filled`: Text field with background color, providing a stronger visual effect.\n* `outlined`: Text field with border, providing a subtler visual effect.",
              "value": {
                "type": [
                  "'filled'",
                  "'outlined'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-variant"
            },
            {
              "name": "type",
              "description": "Specifies the text field type. Default is `text`. Possible values:\n\n* `text`: Standard text field.\n* `number`: Allows only numeric input. Devices with dynamic keyboards will display a numeric keyboard.\n* `password`: Masks the input for password confidentiality.\n* `url`: Validates URL format. Devices with dynamic keyboards will display a URL-specific keyboard.\n* `email`: Validates email format. Devices with dynamic keyboards will display an email-specific keyboard.\n* `search`: Changes the enter icon to a search icon on devices with dynamic keyboards.\n* `tel`: Displays a phone number keyboard on devices with dynamic keyboards.\n* `hidden`: Hides the control, but its value will still be submitted to the server.\n* `date`: Activates a date picker or a numeric scroll wheel for year, month, and day in supported browsers.\n* `datetime-local`: Activates a date and time picker in supported browsers, excluding time zone.\n* `month`: Allows input for year and month, excluding time zone.\n* `time`: Allows time input, excluding time zone.\n* `week`: Allows input for dates consisting of a year and week, excluding time zone.",
              "value": {
                "type": [
                  "'text'",
                  "'number'",
                  "'password'",
                  "'url'",
                  "'email'",
                  "'search'",
                  "'tel'",
                  "'hidden'",
                  "'date'",
                  "'datetime-local'",
                  "'month'",
                  "'time'",
                  "'week'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-type"
            },
            {
              "name": "name",
              "description": "The name of text field, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-name"
            },
            {
              "name": "value",
              "description": "The value of text field, which is submitted with form data.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-value"
            },
            {
              "name": "label",
              "description": "Label text.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-label"
            },
            {
              "name": "placeholder",
              "description": "Placeholder text.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-placeholder"
            },
            {
              "name": "helper",
              "description": "The helper text displayed at the bottom of the text field. Alternatively, use `slot=\"helper\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helper"
            },
            {
              "name": "helper-on-focus",
              "description": "If set, the helper text is only displayed when the text field is focused.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helper-on-focus"
            },
            {
              "name": "clearable",
              "description": "If set, the text field can be cleared.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clearable"
            },
            {
              "name": "clear-icon",
              "description": "Material Icons name displayed on the right when the text field is clearable. Alternatively, use `slot=\"clear-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clear-icon"
            },
            {
              "name": "end-aligned",
              "description": "Aligns the text to the right.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-end-aligned"
            },
            {
              "name": "prefix",
              "description": "The prefix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-prefix"
            },
            {
              "name": "suffix",
              "description": "The suffix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-suffix"
            },
            {
              "name": "icon",
              "description": "Material Icons name for the prefix icon of the text field. Alternatively, use `slot=\"icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-icon"
            },
            {
              "name": "end-icon",
              "description": "Material Icons name for the suffix icon of the text field. Alternatively, use `slot=\"end-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-end-icon"
            },
            {
              "name": "error-icon",
              "description": "Material Icons name displayed on the right side of the text field when the form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-error-icon"
            },
            {
              "name": "form",
              "description": "Associates the text field with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the text field is associated with its parent `<form>`, if any.\n\nThis attribute allows text field elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-form"
            },
            {
              "name": "readonly",
              "description": "Makes the text field read-only.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-readonly"
            },
            {
              "name": "disabled",
              "description": "Disables the text field.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-disabled"
            },
            {
              "name": "required",
              "description": "The field must be filled in before the form is submitted.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-required"
            },
            {
              "name": "rows",
              "description": "The number of rows in the text field.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-rows"
            },
            {
              "name": "autosize",
              "description": "Allows the text field height to adjust automatically based on the input content.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autosize"
            },
            {
              "name": "min-rows",
              "description": "The minimum number of rows when `autosize` is enabled.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-min-rows"
            },
            {
              "name": "max-rows",
              "description": "The maximum number of rows when `autosize` is enabled.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-max-rows"
            },
            {
              "name": "minlength",
              "description": "The minimum number of characters for input.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-minlength"
            },
            {
              "name": "maxlength",
              "description": "The maximum number of characters for input.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-maxlength"
            },
            {
              "name": "counter",
              "description": "Displays the character count when `maxlength` is specified.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-counter"
            },
            {
              "name": "min",
              "description": "The minimum value when `type` is `number`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-min"
            },
            {
              "name": "max",
              "description": "The maximum value when `type` is `number`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-max"
            },
            {
              "name": "step",
              "description": "The step interval during increment and decrement when `type` is `number`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-step"
            },
            {
              "name": "pattern",
              "description": "The regular expression for form validation.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-pattern"
            },
            {
              "name": "toggle-password",
              "description": "Adds a toggle button for showing and hiding the password when `type` is `password`.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-toggle-password"
            },
            {
              "name": "show-password-icon",
              "description": "Material Icons name for the visible password toggle button. Alternatively, use `slot=\"show-password-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-show-password-icon"
            },
            {
              "name": "hide-password-icon",
              "description": "Material Icons name for the hidden password toggle button. Alternatively, use `slot=\"hide-password-icon\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-hide-password-icon"
            },
            {
              "name": "autocapitalize",
              "description": "A non-standard iOS attribute for automatic capitalization. Possible values:\n\n* `none`: Disables automatic capitalization.\n* `sentences`: Capitalizes the first letter of each sentence.\n* `words`: Capitalizes the first letter of each word.\n* `characters`: Capitalizes all letters.",
              "value": {
                "type": [
                  "'none'",
                  "'sentences'",
                  "'words'",
                  "'characters'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocapitalize"
            },
            {
              "name": "autocorrect",
              "description": "The `autocorrect` attribute of the `input` element.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocorrect"
            },
            {
              "name": "autocomplete",
              "description": "The `autocomplete` attribute of the `input` element.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocomplete"
            },
            {
              "name": "enterkeyhint",
              "description": "Customizes the Enter key text or icon on the virtual keyboard. The effect varies based on the device and language. Possible values:\n\n* `enter`: Inserts a new line, typically used in a multi-line text field.\n* `done`: Indicates input completion, closes the virtual keyboard.\n* `go`: Navigates to the target of the entered text.\n* `next`: Moves to the next text field.\n* `previous`: Moves to the previous text field.\n* `search`: Navigates to search results.\n* `send`: Sends a text message.",
              "value": {
                "type": [
                  "'enter'",
                  "'done'",
                  "'go'",
                  "'next'",
                  "'previous'",
                  "'search'",
                  "'send'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-enterkeyhint"
            },
            {
              "name": "spellcheck",
              "description": "Enable spell checking.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-spellcheck"
            },
            {
              "name": "inputmode",
              "description": "Customizes the virtual keyboard. Possible values:\n\n* `none`: No virtual keyboard. This is useful for custom input controls.\n* `text`: Standard text input keyboard.\n* `decimal`: Decimal input keyboard. This includes a period `.` or comma `,` and numbers.\n* `numeric`: Numeric keyboard. This displays numbers 0-9.\n* `tel`: Phone number keyboard. This includes numbers 0-9, asterisk `*`, and hash `#` keys.\n* `search`: Search-optimized virtual keyboard. 'Search' is displayed on the submit button.\n* `email`: Email-optimized virtual keyboard. This typically includes `@ .`.\n* `url`: URL-optimized virtual keyboard. This typically includes `. / #`.",
              "value": {
                "type": [
                  "'none'",
                  "'text'",
                  "'decimal'",
                  "'numeric'",
                  "'tel'",
                  "'search'",
                  "'email'",
                  "'url'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-inputmode"
            },
            {
              "name": "autofocus",
              "description": "Determines if the element should be focused when the page loads.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autofocus"
            },
            {
              "name": "tabindex",
              "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-tabindex"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/text-field",
          "slots": [
            {
              "name": "icon",
              "description": "Icon on the left side.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-icon"
            },
            {
              "name": "end-icon",
              "description": "Icon on the right side.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-end-icon"
            },
            {
              "name": "error-icon",
              "description": "Icon on the right side for validation failure.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-error-icon"
            },
            {
              "name": "prefix",
              "description": "Text on the left side.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-prefix"
            },
            {
              "name": "suffix",
              "description": "Text on the right side.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-suffix"
            },
            {
              "name": "clear-button",
              "description": "Clear button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-clear-button"
            },
            {
              "name": "clear-icon",
              "description": "Icon in the clear button.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-clear-icon"
            },
            {
              "name": "toggle-password-button",
              "description": "Button to toggle password visibility.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-toggle-password-button"
            },
            {
              "name": "show-password-icon",
              "description": "Icon in the password visibility toggle button (show password state).",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-show-password-icon"
            },
            {
              "name": "hide-password-icon",
              "description": "Icon in the password visibility toggle button (hide password state).",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-hide-password-icon"
            },
            {
              "name": "helper",
              "description": "Text at the bottom for help.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-helper"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the text field style. Default is `filled`. Possible values:\n\n* `filled`: Text field with background color, providing a stronger visual effect.\n* `outlined`: Text field with border, providing a subtler visual effect.",
                "value": {
                  "type": [
                    "'filled'",
                    "'outlined'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-variant"
              },
              {
                "name": "type",
                "description": "Specifies the text field type. Default is `text`. Possible values:\n\n* `text`: Standard text field.\n* `number`: Allows only numeric input. Devices with dynamic keyboards will display a numeric keyboard.\n* `password`: Masks the input for password confidentiality.\n* `url`: Validates URL format. Devices with dynamic keyboards will display a URL-specific keyboard.\n* `email`: Validates email format. Devices with dynamic keyboards will display an email-specific keyboard.\n* `search`: Changes the enter icon to a search icon on devices with dynamic keyboards.\n* `tel`: Displays a phone number keyboard on devices with dynamic keyboards.\n* `hidden`: Hides the control, but its value will still be submitted to the server.\n* `date`: Activates a date picker or a numeric scroll wheel for year, month, and day in supported browsers.\n* `datetime-local`: Activates a date and time picker in supported browsers, excluding time zone.\n* `month`: Allows input for year and month, excluding time zone.\n* `time`: Allows time input, excluding time zone.\n* `week`: Allows input for dates consisting of a year and week, excluding time zone.",
                "value": {
                  "type": [
                    "'text'",
                    "'number'",
                    "'password'",
                    "'url'",
                    "'email'",
                    "'search'",
                    "'tel'",
                    "'hidden'",
                    "'date'",
                    "'datetime-local'",
                    "'month'",
                    "'time'",
                    "'week'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-type"
              },
              {
                "name": "name",
                "description": "The name of text field, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-name"
              },
              {
                "name": "value",
                "description": "The value of text field, which is submitted with form data.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-value"
              },
              {
                "name": "defaultValue",
                "description": "The default value. The text field resets to this value on form reset. This can only be set via the JavaScript property.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-defaultValue"
              },
              {
                "name": "label",
                "description": "Label text.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-label"
              },
              {
                "name": "placeholder",
                "description": "Placeholder text.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-placeholder"
              },
              {
                "name": "helper",
                "description": "The helper text displayed at the bottom of the text field. Alternatively, use `slot=\"helper\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helper"
              },
              {
                "name": "helperOnFocus",
                "description": "If set, the helper text is only displayed when the text field is focused.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helperOnFocus"
              },
              {
                "name": "clearable",
                "description": "If set, the text field can be cleared.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clearable"
              },
              {
                "name": "clearIcon",
                "description": "Material Icons name displayed on the right when the text field is clearable. Alternatively, use `slot=\"clear-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clearIcon"
              },
              {
                "name": "endAligned",
                "description": "Aligns the text to the right.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-endAligned"
              },
              {
                "name": "prefix",
                "description": "The prefix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-prefix"
              },
              {
                "name": "suffix",
                "description": "The suffix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-suffix"
              },
              {
                "name": "icon",
                "description": "Material Icons name for the prefix icon of the text field. Alternatively, use `slot=\"icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-icon"
              },
              {
                "name": "endIcon",
                "description": "Material Icons name for the suffix icon of the text field. Alternatively, use `slot=\"end-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-endIcon"
              },
              {
                "name": "errorIcon",
                "description": "Material Icons name displayed on the right side of the text field when the form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-errorIcon"
              },
              {
                "name": "form",
                "description": "Associates the text field with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the text field is associated with its parent `<form>`, if any.\n\nThis attribute allows text field elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-form"
              },
              {
                "name": "readonly",
                "description": "Makes the text field read-only.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-readonly"
              },
              {
                "name": "disabled",
                "description": "Disables the text field.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-disabled"
              },
              {
                "name": "required",
                "description": "The field must be filled in before the form is submitted.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-required"
              },
              {
                "name": "rows",
                "description": "The number of rows in the text field.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-rows"
              },
              {
                "name": "autosize",
                "description": "Allows the text field height to adjust automatically based on the input content.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autosize"
              },
              {
                "name": "minRows",
                "description": "The minimum number of rows when `autosize` is enabled.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-minRows"
              },
              {
                "name": "maxRows",
                "description": "The maximum number of rows when `autosize` is enabled.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-maxRows"
              },
              {
                "name": "minlength",
                "description": "The minimum number of characters for input.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-minlength"
              },
              {
                "name": "maxlength",
                "description": "The maximum number of characters for input.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-maxlength"
              },
              {
                "name": "counter",
                "description": "Displays the character count when `maxlength` is specified.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-counter"
              },
              {
                "name": "min",
                "description": "The minimum value when `type` is `number`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-min"
              },
              {
                "name": "max",
                "description": "The maximum value when `type` is `number`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-max"
              },
              {
                "name": "step",
                "description": "The step interval during increment and decrement when `type` is `number`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-step"
              },
              {
                "name": "pattern",
                "description": "The regular expression for form validation.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-pattern"
              },
              {
                "name": "togglePassword",
                "description": "Adds a toggle button for showing and hiding the password when `type` is `password`.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-togglePassword"
              },
              {
                "name": "showPasswordIcon",
                "description": "Material Icons name for the visible password toggle button. Alternatively, use `slot=\"show-password-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-showPasswordIcon"
              },
              {
                "name": "hidePasswordIcon",
                "description": "Material Icons name for the hidden password toggle button. Alternatively, use `slot=\"hide-password-icon\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-hidePasswordIcon"
              },
              {
                "name": "autocapitalize",
                "description": "A non-standard iOS attribute for automatic capitalization. Possible values:\n\n* `none`: Disables automatic capitalization.\n* `sentences`: Capitalizes the first letter of each sentence.\n* `words`: Capitalizes the first letter of each word.\n* `characters`: Capitalizes all letters.",
                "value": {
                  "type": [
                    "'none'",
                    "'sentences'",
                    "'words'",
                    "'characters'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocapitalize"
              },
              {
                "name": "autocorrect",
                "description": "The `autocorrect` attribute of the `input` element.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocorrect"
              },
              {
                "name": "autocomplete",
                "description": "The `autocomplete` attribute of the `input` element.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocomplete"
              },
              {
                "name": "enterkeyhint",
                "description": "Customizes the Enter key text or icon on the virtual keyboard. The effect varies based on the device and language. Possible values:\n\n* `enter`: Inserts a new line, typically used in a multi-line text field.\n* `done`: Indicates input completion, closes the virtual keyboard.\n* `go`: Navigates to the target of the entered text.\n* `next`: Moves to the next text field.\n* `previous`: Moves to the previous text field.\n* `search`: Navigates to search results.\n* `send`: Sends a text message.",
                "value": {
                  "type": [
                    "'enter'",
                    "'done'",
                    "'go'",
                    "'next'",
                    "'previous'",
                    "'search'",
                    "'send'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-enterkeyhint"
              },
              {
                "name": "spellcheck",
                "description": "Enable spell checking.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-spellcheck"
              },
              {
                "name": "inputmode",
                "description": "Customizes the virtual keyboard. Possible values:\n\n* `none`: No virtual keyboard. This is useful for custom input controls.\n* `text`: Standard text input keyboard.\n* `decimal`: Decimal input keyboard. This includes a period `.` or comma `,` and numbers.\n* `numeric`: Numeric keyboard. This displays numbers 0-9.\n* `tel`: Phone number keyboard. This includes numbers 0-9, asterisk `*`, and hash `#` keys.\n* `search`: Search-optimized virtual keyboard. 'Search' is displayed on the submit button.\n* `email`: Email-optimized virtual keyboard. This typically includes `@ .`.\n* `url`: URL-optimized virtual keyboard. This typically includes `. / #`.",
                "value": {
                  "type": [
                    "'none'",
                    "'text'",
                    "'decimal'",
                    "'numeric'",
                    "'tel'",
                    "'search'",
                    "'email'",
                    "'url'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-inputmode"
              },
              {
                "name": "validity",
                "description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
                "value": {
                  "type": "ValidityState"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-validity"
              },
              {
                "name": "validationMessage",
                "description": "The element's validation message. This is empty if the element meets its constraints.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-validationMessage"
              },
              {
                "name": "valueAsNumber",
                "description": "Gets or sets the value as a `number`. Returns `NaN` if the value cannot be converted.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-valueAsNumber"
              },
              {
                "name": "autofocus",
                "description": "Determines if the element should be focused when the page loads.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autofocus"
              },
              {
                "name": "tabIndex",
                "description": "Specifies the order in which the element receives focus when navigating with the Tab key.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-tabIndex"
              }
            ],
            "events": [
              {
                "name": "focus",
                "description": "Emitted when the text field gains focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-focus"
              },
              {
                "name": "blur",
                "description": "Emitted when the text field loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-blur"
              },
              {
                "name": "change",
                "description": "Emitted when the value changes and the text field loses focus.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-change"
              },
              {
                "name": "input",
                "description": "Emitted when the value changes.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-input"
              },
              {
                "name": "invalid",
                "description": "Emitted when the form control's validity is checked and it doesn't meet the constraints.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-invalid"
              },
              {
                "name": "clear",
                "description": "Emitted when clear button is clicked. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-clear"
              }
            ]
          },
          "css": {
            "parts": [
              {
                "name": "container",
                "description": "Container for the text field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-container"
              },
              {
                "name": "icon",
                "description": "Icon on the left side.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-icon"
              },
              {
                "name": "end-icon",
                "description": "Icon on the right side.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-end-icon"
              },
              {
                "name": "error-icon",
                "description": "Icon on the right side for validation failure.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-error-icon"
              },
              {
                "name": "prefix",
                "description": "Text on the left side.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-prefix"
              },
              {
                "name": "suffix",
                "description": "Text on the right side.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-suffix"
              },
              {
                "name": "label",
                "description": "Label text above the field.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-label"
              },
              {
                "name": "input",
                "description": "Internal `<input>` or `<textarea>` element.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-input"
              },
              {
                "name": "clear-button",
                "description": "Clear button.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-clear-button"
              },
              {
                "name": "clear-icon",
                "description": "Icon in the clear button.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-clear-icon"
              },
              {
                "name": "toggle-password-button",
                "description": "Button to toggle password visibility.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-toggle-password-button"
              },
              {
                "name": "show-password-icon",
                "description": "Icon in the password visibility toggle button (show password state).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-show-password-icon"
              },
              {
                "name": "hide-password-icon",
                "description": "Icon in the password visibility toggle button (hide password state).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-hide-password-icon"
              },
              {
                "name": "supporting",
                "description": "Container for bottom supporting info, including helper, error, and counter.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-supporting"
              },
              {
                "name": "helper",
                "description": "Text at the bottom for help.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-helper"
              },
              {
                "name": "error",
                "description": "Text at the bottom for error.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-error"
              },
              {
                "name": "counter",
                "description": "Character count in the bottom right corner.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-counter"
              }
            ]
          }
        },
        {
          "name": "mdui-tooltip",
          "description": "Tooltip Component \n\n```html\n<mdui-tooltip content=\"tooltip content\">\n  <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the tooltip shape. Default is `plain`. Possible values:\n\n* `plain`: For simple single-line text.\n* `rich`: For text including a title, body text, and action buttons.",
              "value": {
                "type": [
                  "'plain'",
                  "'rich'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-variant"
            },
            {
              "name": "placement",
              "description": "Sets the tooltip position. Default is `auto`. Possible values:\n\n* `auto`: Position is determined automatically.\n* `top-left`: Top-left corner.\n* `top-start`: Top, left-aligned.\n* `top`: Top, centered.\n* `top-end`: Top, right-aligned.\n* `top-right`: Top-right corner.\n* `bottom-left`: Bottom-left corner.\n* `bottom-start`: Bottom, left-aligned.\n* `bottom`: Bottom, centered.\n* `bottom-end`: Bottom, right-aligned.\n* `bottom-right`: Bottom-right corner.\n* `left-start`: Left, top-aligned.\n* `left`: Left, centered.\n* `left-end`: Left, bottom-aligned.\n* `right-start`: Right, top-aligned.\n* `right`: Right, centered.\n* `right-end`: Right, bottom-aligned.",
              "value": {
                "type": [
                  "'auto'",
                  "'top-left'",
                  "'top-start'",
                  "'top'",
                  "'top-end'",
                  "'top-right'",
                  "'bottom-left'",
                  "'bottom-start'",
                  "'bottom'",
                  "'bottom-end'",
                  "'bottom-right'",
                  "'left-start'",
                  "'left'",
                  "'left-end'",
                  "'right-start'",
                  "'right'",
                  "'right-end'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-placement"
            },
            {
              "name": "open-delay",
              "description": "Sets the delay in milliseconds before the tooltip appears on hover.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-open-delay"
            },
            {
              "name": "close-delay",
              "description": "Sets the delay in milliseconds before the tooltip disappears on hover.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-close-delay"
            },
            {
              "name": "headline",
              "description": "Sets the tooltip title. Only applicable when `variant=\"rich\"`. Alternatively, use `slot=\"headline\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-headline"
            },
            {
              "name": "content",
              "description": "Sets the tooltip content. Alternatively, use `slot=\"content\"`.",
              "value": {
                "type": "string"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-content"
            },
            {
              "name": "trigger",
              "description": "Defines the trigger method. Supports multiple values separated by spaces. Possible values:\n\n* `click`: Triggered on click.\n* `hover`: Triggered on mouse hover.\n* `focus`: Triggered on focus.\n* `manual`: Can only open and close the tooltip programmatically, cannot specify other trigger methods.",
              "value": {
                "type": [
                  "'click'",
                  "'hover'",
                  "'focus'",
                  "'manual'",
                  "string"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-trigger"
            },
            {
              "name": "disabled",
              "description": "Disables the tooltip.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-disabled"
            },
            {
              "name": "open",
              "description": "Opens the tooltip.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-open"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip",
          "slots": [
            {
              "name": "",
              "description": "Target element that triggers the tooltip. Only the first element in the `default` slot is used as the target.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-default"
            },
            {
              "name": "headline",
              "description": "Title of the tooltip. Effective only when `variant=\"rich\"`.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-headline"
            },
            {
              "name": "content",
              "description": "Content of the tooltip, can contain HTML. If only plain text is included, can also use `content` attribute instead.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-content"
            },
            {
              "name": "action",
              "description": "Button at the bottom of the tooltip. Effective only when `variant=\"rich\"`.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-action"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the tooltip shape. Default is `plain`. Possible values:\n\n* `plain`: For simple single-line text.\n* `rich`: For text including a title, body text, and action buttons.",
                "value": {
                  "type": [
                    "'plain'",
                    "'rich'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-variant"
              },
              {
                "name": "placement",
                "description": "Sets the tooltip position. Default is `auto`. Possible values:\n\n* `auto`: Position is determined automatically.\n* `top-left`: Top-left corner.\n* `top-start`: Top, left-aligned.\n* `top`: Top, centered.\n* `top-end`: Top, right-aligned.\n* `top-right`: Top-right corner.\n* `bottom-left`: Bottom-left corner.\n* `bottom-start`: Bottom, left-aligned.\n* `bottom`: Bottom, centered.\n* `bottom-end`: Bottom, right-aligned.\n* `bottom-right`: Bottom-right corner.\n* `left-start`: Left, top-aligned.\n* `left`: Left, centered.\n* `left-end`: Left, bottom-aligned.\n* `right-start`: Right, top-aligned.\n* `right`: Right, centered.\n* `right-end`: Right, bottom-aligned.",
                "value": {
                  "type": [
                    "'auto'",
                    "'top-left'",
                    "'top-start'",
                    "'top'",
                    "'top-end'",
                    "'top-right'",
                    "'bottom-left'",
                    "'bottom-start'",
                    "'bottom'",
                    "'bottom-end'",
                    "'bottom-right'",
                    "'left-start'",
                    "'left'",
                    "'left-end'",
                    "'right-start'",
                    "'right'",
                    "'right-end'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-placement"
              },
              {
                "name": "openDelay",
                "description": "Sets the delay in milliseconds before the tooltip appears on hover.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-openDelay"
              },
              {
                "name": "closeDelay",
                "description": "Sets the delay in milliseconds before the tooltip disappears on hover.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-closeDelay"
              },
              {
                "name": "headline",
                "description": "Sets the tooltip title. Only applicable when `variant=\"rich\"`. Alternatively, use `slot=\"headline\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-headline"
              },
              {
                "name": "content",
                "description": "Sets the tooltip content. Alternatively, use `slot=\"content\"`.",
                "value": {
                  "type": "string"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-content"
              },
              {
                "name": "trigger",
                "description": "Defines the trigger method. Supports multiple values separated by spaces. Possible values:\n\n* `click`: Triggered on click.\n* `hover`: Triggered on mouse hover.\n* `focus`: Triggered on focus.\n* `manual`: Can only open and close the tooltip programmatically, cannot specify other trigger methods.",
                "value": {
                  "type": [
                    "'click'",
                    "'hover'",
                    "'focus'",
                    "'manual'",
                    "string"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-trigger"
              },
              {
                "name": "disabled",
                "description": "Disables the tooltip.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-disabled"
              },
              {
                "name": "open",
                "description": "Opens the tooltip.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-open"
              }
            ],
            "events": [
              {
                "name": "open",
                "description": "Emitted when the tooltip starts to open. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-open"
              },
              {
                "name": "opened",
                "description": "Emitted after the tooltip has opened and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-opened"
              },
              {
                "name": "close",
                "description": "Emitted when the tooltip starts to close. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-close"
              },
              {
                "name": "closed",
                "description": "Emitted after the tooltip has closed and the animations are completed.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-closed"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner-plain",
                "description": "Corner radius of the component when `variant=\"plain\"`. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssProperties-shape-corner-plain"
              },
              {
                "name": "--shape-corner-rich",
                "description": "Corner radius of the component when `variant=\"rich\"`. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssProperties-shape-corner-rich"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssProperties-z-index"
              }
            ],
            "parts": [
              {
                "name": "popup",
                "description": "Container for the tooltip.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-popup"
              },
              {
                "name": "headline",
                "description": "Title of the tooltip.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-headline"
              },
              {
                "name": "content",
                "description": "Body text of the tooltip.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-content"
              },
              {
                "name": "action",
                "description": "Action button of the tooltip.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-action"
              }
            ]
          }
        },
        {
          "name": "mdui-top-app-bar-title",
          "description": "Top App Bar Title Component  It should be used in conjunction with the `<mdui-top-app-bar>` component \n\n```html\n<mdui-top-app-bar>\n  <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n  <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n  <div style=\"flex-grow: 1\"></div>\n  <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
          "attributes": [],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar",
          "slots": [
            {
              "name": "",
              "description": "The title text of the top app bar.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-slots-default"
            },
            {
              "name": "label-large",
              "description": "The title text when the top app bar is in the expanded state.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-slots-label-large"
            }
          ],
          "js": {
            "properties": []
          },
          "css": {
            "parts": [
              {
                "name": "label",
                "description": "The title text.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label"
              },
              {
                "name": "label-large",
                "description": "The title text when the top app bar is in the expanded state.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label-large"
              }
            ]
          }
        },
        {
          "name": "mdui-top-app-bar",
          "description": "Top App Bar Component \n\n```html\n<mdui-top-app-bar>\n  <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n  <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n  <div style=\"flex-grow: 1\"></div>\n  <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
          "attributes": [
            {
              "name": "variant",
              "description": "Defines the top app bar style. Default is `small`. Possible values:\n\n* `center-aligned`: Small app bar with a center-aligned title.\n* `small`: Small app bar.\n* `medium`: Medium-sized app bar.\n* `large`: Large-sized app bar.",
              "value": {
                "type": [
                  "'center-aligned'",
                  "'small'",
                  "'medium'",
                  "'large'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
            },
            {
              "name": "hide",
              "description": "Hide the top app bar.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
            },
            {
              "name": "shrink",
              "description": "Shrinks the app bar to `small` style. Only applicable for `medium` or `large` variants.",
              "value": {
                "type": "boolean"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
            },
            {
              "name": "scroll-behavior",
              "description": "Defines the scroll behavior. Accepts multiple space-separated values. Possible values:\n\n* `hide`: Hides when scrolling.\n* `shrink`: Shrinks when scrolling for medium to large app bars.\n* `elevate`: Increases elevation when scrolling.",
              "value": {
                "type": [
                  "'hide'",
                  "'shrink'",
                  "'elevate'"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-behavior"
            },
            {
              "name": "scroll-target",
              "description": "The element that listens for scroll events. Accepts a CSS selector, DOM element, or [JQ object](https://www.mdui.org/en/docs/2/functions/jq). Defaults to `window`.",
              "value": {
                "type": [
                  "string",
                  "HTMLElement",
                  "JQ<HTMLElement>"
                ]
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-target"
            },
            {
              "name": "scroll-threshold",
              "description": "The scroll distance (in pixels) that triggers the scroll behavior.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-threshold"
            },
            {
              "name": "order",
              "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
              "value": {
                "type": "number"
              },
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-order"
            }
          ],
          "priority": "highest",
          "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar",
          "slots": [
            {
              "name": "",
              "description": "Elements contained within the top app bar.",
              "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-slots-default"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "Defines the top app bar style. Default is `small`. Possible values:\n\n* `center-aligned`: Small app bar with a center-aligned title.\n* `small`: Small app bar.\n* `medium`: Medium-sized app bar.\n* `large`: Large-sized app bar.",
                "value": {
                  "type": [
                    "'center-aligned'",
                    "'small'",
                    "'medium'",
                    "'large'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
              },
              {
                "name": "hide",
                "description": "Hide the top app bar.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
              },
              {
                "name": "shrink",
                "description": "Shrinks the app bar to `small` style. Only applicable for `medium` or `large` variants.",
                "value": {
                  "type": "boolean"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
              },
              {
                "name": "scrollBehavior",
                "description": "Defines the scroll behavior. Accepts multiple space-separated values. Possible values:\n\n* `hide`: Hides when scrolling.\n* `shrink`: Shrinks when scrolling for medium to large app bars.\n* `elevate`: Increases elevation when scrolling.",
                "value": {
                  "type": [
                    "'hide'",
                    "'shrink'",
                    "'elevate'"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scrollBehavior"
              },
              {
                "name": "scrollTarget",
                "description": "The element that listens for scroll events. Accepts a CSS selector, DOM element, or [JQ object](https://www.mdui.org/en/docs/2/functions/jq). Defaults to `window`.",
                "value": {
                  "type": [
                    "string",
                    "HTMLElement",
                    "JQ<HTMLElement>"
                  ]
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scrollTarget"
              },
              {
                "name": "scrollThreshold",
                "description": "The scroll distance (in pixels) that triggers the scroll behavior.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scrollThreshold"
              },
              {
                "name": "order",
                "description": "Specifies the layout order within the [`<mdui-layout>`](https://www.mdui.org/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
                "value": {
                  "type": "number"
                },
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-order"
              }
            ],
            "events": [
              {
                "name": "show",
                "description": "Emitted when the top app bar starts to show. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-show"
              },
              {
                "name": "shown",
                "description": "Emitted after the top app bar has shown and animations are complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-shown"
              },
              {
                "name": "hide",
                "description": "Emitted when the top app bar starts to hide. Can be prevented with `event.preventDefault()`.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-hide"
              },
              {
                "name": "hidden",
                "description": "Emitted after the top app bar has hidden and animations are complete.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-hidden"
              }
            ]
          },
          "css": {
            "properties": [
              {
                "name": "--shape-corner",
                "description": "The size of the component corner. You can use a specific pixel value, but it's recommended to reference [design tokens](https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner).",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-cssProperties-shape-corner"
              },
              {
                "name": "--z-index",
                "description": "The CSS `z-index` value of the component.",
                "doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-cssProperties-z-index"
              }
            ]
          }
        }
      ]
    },
    "css": {
      "properties": [
        {
          "name": "--mdui-breakpoint-xs",
          "description": "The breakpoint value. The default is `0px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-xs: 0px;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        },
        {
          "name": "--mdui-breakpoint-sm",
          "description": "The breakpoint value. The default is `600px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-sm: 620px;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        },
        {
          "name": "--mdui-breakpoint-md",
          "description": "The breakpoint value. The default is `840px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-md: 860px;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        },
        {
          "name": "--mdui-breakpoint-lg",
          "description": "The breakpoint value. The default is `1080px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-lg: 1100px;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        },
        {
          "name": "--mdui-breakpoint-xl",
          "description": "The breakpoint value. The default is `1440px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-xl: 1460px;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        },
        {
          "name": "--mdui-breakpoint-xxl",
          "description": "The breakpoint value. The default is `1920px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-xxl: 1940px;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        },
        {
          "name": "--mdui-color-primary-light",
          "description": "**Primary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-primary-container-light",
          "description": "**Primary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-primary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-primary-light",
          "description": "**On Primary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-primary-container-light",
          "description": "**On Primary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-primary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-primary-light",
          "description": "**Inverse Primary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-inverse-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-secondary-light",
          "description": "**Secondary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-secondary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-secondary-container-light",
          "description": "**Secondary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-secondary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-secondary-light",
          "description": "**On Secondary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-secondary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-secondary-container-light",
          "description": "**On Secondary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-secondary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-tertiary-light",
          "description": "**Tertiary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-tertiary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-tertiary-container-light",
          "description": "**Tertiary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-tertiary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-tertiary-light",
          "description": "**On Tertiary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-tertiary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-tertiary-container-light",
          "description": "**On Tertiary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-tertiary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-light",
          "description": "**Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-dim-light",
          "description": "**Surface Dim**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-dim-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-dim-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-bright-light",
          "description": "**Surface Bright**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-bright-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-bright-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-lowest-light",
          "description": "**Surface Container Lowest**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-lowest-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-low-light",
          "description": "**Surface Container Low**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-low-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-light",
          "description": "**Surface Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-high-light",
          "description": "**Surface Container High**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-high-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-highest-light",
          "description": "**Surface Container Highest**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-highest-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-variant-light",
          "description": "**Surface Variant**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-surface-light",
          "description": "**On Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-surface-variant-light",
          "description": "**On Surface Variant**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-surface-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-surface-light",
          "description": "**Inverse Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-inverse-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-on-surface-light",
          "description": "**Inverse On Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-inverse-on-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-background-light",
          "description": "**Background**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-background-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-background-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-background-light",
          "description": "**On Background**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-background-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-background-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-error-light",
          "description": "**Error**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-error-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-error-container-light",
          "description": "**Error Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-error-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-error-light",
          "description": "**On Error**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-error-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-error-container-light",
          "description": "**On Error Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-error-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-outline-light",
          "description": "**Outline**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-outline-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-outline-variant-light",
          "description": "**Outline Variant**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-outline-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-shadow-light",
          "description": "**Shadow**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-shadow-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-shadow-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-tint-color-light",
          "description": "**Surface Tint Color**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-tint-color-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-scrim-light",
          "description": "**Scrim**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-scrim-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-scrim-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-primary-dark",
          "description": "**Primary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-primary-container-dark",
          "description": "**Primary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-primary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-primary-dark",
          "description": "**On Primary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-primary-container-dark",
          "description": "**On Primary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-primary-dark",
          "description": "**Inverse Primary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-secondary-dark",
          "description": "**Secondary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-secondary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-secondary-container-dark",
          "description": "**Secondary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-secondary-dark",
          "description": "**On Secondary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-secondary-container-dark",
          "description": "**On Secondary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-tertiary-dark",
          "description": "**Tertiary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-tertiary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-tertiary-container-dark",
          "description": "**Tertiary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-tertiary-dark",
          "description": "**On Tertiary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-tertiary-container-dark",
          "description": "**On Tertiary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-dark",
          "description": "**Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-dim-dark",
          "description": "**Surface Dim**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-dim-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-bright-dark",
          "description": "**Surface Bright**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-bright-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-lowest-dark",
          "description": "**Surface Container Lowest**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-low-dark",
          "description": "**Surface Container Low**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-dark",
          "description": "**Surface Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-high-dark",
          "description": "**Surface Container High**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-highest-dark",
          "description": "**Surface Container Highest**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-variant-dark",
          "description": "**Surface Variant**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-surface-dark",
          "description": "**On Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-surface-variant-dark",
          "description": "**On Surface Variant**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-surface-dark",
          "description": "**Inverse Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-on-surface-dark",
          "description": "**Inverse On Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-background-dark",
          "description": "**Background**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-background-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-background-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-background-dark",
          "description": "**On Background**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-background-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-background-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-error-dark",
          "description": "**Error**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-error-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-error-container-dark",
          "description": "**Error Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-error-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-error-dark",
          "description": "**On Error**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-error-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-error-container-dark",
          "description": "**On Error Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-outline-dark",
          "description": "**Outline**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-outline-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-outline-variant-dark",
          "description": "**Outline Variant**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-shadow-dark",
          "description": "**Shadow**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-shadow-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-shadow-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-tint-color-dark",
          "description": "**Surface Tint Color**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-scrim-dark",
          "description": "**Scrim**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-scrim-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-scrim-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-primary",
          "description": "**Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-primary-light` and `--mdui-color-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-primary-light: 255, 0, 0;\n  --mdui-color-primary-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-primary-container",
          "description": "**Primary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-primary-container-light` and `--mdui-color-primary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-primary-container-light: 255, 0, 0;\n  --mdui-color-primary-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-primary",
          "description": "**On Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-primary-light` and `--mdui-color-on-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-primary-light: 255, 0, 0;\n  --mdui-color-on-primary-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-primary-container",
          "description": "**On Primary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-primary-container-light` and `--mdui-color-on-primary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-primary-container-light: 255, 0, 0;\n  --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-primary",
          "description": "**Inverse Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-inverse-primary-light` and `--mdui-color-inverse-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-inverse-primary-light: 255, 0, 0;\n  --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-secondary",
          "description": "**Secondary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-secondary-light` and `--mdui-color-secondary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-secondary-light: 255, 0, 0;\n  --mdui-color-secondary-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-secondary-container",
          "description": "**Secondary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-secondary-container-light` and `--mdui-color-secondary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-secondary-container-light: 255, 0, 0;\n  --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-secondary",
          "description": "**On Secondary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-secondary-light` and `--mdui-color-on-secondary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-secondary-light: 255, 0, 0;\n  --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-secondary-container",
          "description": "**On Secondary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-secondary-container-light` and `--mdui-color-on-secondary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-secondary-container-light: 255, 0, 0;\n  --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-tertiary",
          "description": "**Tertiary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-tertiary-light` and `--mdui-color-tertiary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-tertiary-light: 255, 0, 0;\n  --mdui-color-tertiary-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-tertiary-container",
          "description": "**Tertiary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-tertiary-container-light` and `--mdui-color-tertiary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-tertiary-container-light: 255, 0, 0;\n  --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-tertiary",
          "description": "**On Tertiary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-tertiary-light` and `--mdui-color-on-tertiary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-tertiary-light: 255, 0, 0;\n  --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-tertiary-container",
          "description": "**On Tertiary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-tertiary-container-light` and `--mdui-color-on-tertiary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-tertiary-container-light: 255, 0, 0;\n  --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface",
          "description": "**Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-light` and `--mdui-color-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-light: 255, 0, 0;\n  --mdui-color-surface-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-dim",
          "description": "**Surface Dim**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-dim-light` and `--mdui-color-surface-dim-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-dim-light: 255, 0, 0;\n  --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-bright",
          "description": "**Surface Bright**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-bright-light` and `--mdui-color-surface-bright-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-bright-light: 255, 0, 0;\n  --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-lowest",
          "description": "**Surface Container Lowest**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-lowest-light` and `--mdui-color-surface-container-lowest-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-lowest-light: 255, 0, 0;\n  --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-low",
          "description": "**Surface Container Low**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-low-light` and `--mdui-color-surface-container-low-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-low-light: 255, 0, 0;\n  --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container",
          "description": "**Surface Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-light` and `--mdui-color-surface-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-light: 255, 0, 0;\n  --mdui-color-surface-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-high",
          "description": "**Surface Container High**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-high-light` and `--mdui-color-surface-container-high-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-high-light: 255, 0, 0;\n  --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-container-highest",
          "description": "**Surface Container Highest**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-highest-light` and `--mdui-color-surface-container-highest-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-highest-light: 255, 0, 0;\n  --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-variant",
          "description": "**Surface Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-variant-light` and `--mdui-color-surface-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-variant-light: 255, 0, 0;\n  --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-surface",
          "description": "**On Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-surface-light` and `--mdui-color-on-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-surface-light: 255, 0, 0;\n  --mdui-color-on-surface-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-surface-variant",
          "description": "**On Surface Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-surface-variant-light` and `--mdui-color-on-surface-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-surface-variant-light: 255, 0, 0;\n  --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-surface",
          "description": "**Inverse Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-inverse-surface-light` and `--mdui-color-inverse-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-inverse-surface-light: 255, 0, 0;\n  --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-inverse-on-surface",
          "description": "**Inverse On Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-inverse-on-surface-light` and `--mdui-color-inverse-on-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-inverse-on-surface-light: 255, 0, 0;\n  --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-background",
          "description": "**Background**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-background-light` and `--mdui-color-background-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-background), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-background-light: 255, 0, 0;\n  --mdui-color-background-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-background",
          "description": "**On Background**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-background-light` and `--mdui-color-on-background-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-background), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-background-light: 255, 0, 0;\n  --mdui-color-on-background-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-error",
          "description": "**Error**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-error-light` and `--mdui-color-error-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-error-light: 255, 0, 0;\n  --mdui-color-error-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-error-container",
          "description": "**Error Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-error-container-light` and `--mdui-color-error-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-error-container-light: 255, 0, 0;\n  --mdui-color-error-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-error",
          "description": "**On Error**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-error-light` and `--mdui-color-on-error-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-error-light: 255, 0, 0;\n  --mdui-color-on-error-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-on-error-container",
          "description": "**On Error Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-error-container-light` and `--mdui-color-on-error-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-error-container-light: 255, 0, 0;\n  --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-outline",
          "description": "**Outline**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-outline-light` and `--mdui-color-outline-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-outline-light: 255, 0, 0;\n  --mdui-color-outline-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-outline-variant",
          "description": "**Outline Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-outline-variant-light` and `--mdui-color-outline-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-outline-variant-light: 255, 0, 0;\n  --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-shadow",
          "description": "**Shadow**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-shadow-light` and `--mdui-color-shadow-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-shadow), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-shadow-light: 255, 0, 0;\n  --mdui-color-shadow-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-surface-tint-color",
          "description": "**Surface Tint Color**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-tint-color-light` and `--mdui-color-surface-tint-color-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-tint-color-light: 255, 0, 0;\n  --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-color-scrim",
          "description": "**Scrim**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-scrim-light` and `--mdui-color-scrim-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-scrim), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-scrim-light: 255, 0, 0;\n  --mdui-color-scrim-dark: 255, 0, 0;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        },
        {
          "name": "--mdui-elevation-level0",
          "description": "Shadow value corresponding to Level 0 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level0 elevation */\n:root {\n  --mdui-elevation-level0: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level0 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level0);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        },
        {
          "name": "--mdui-elevation-level1",
          "description": "Shadow value corresponding to Level 1 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level1 elevation */\n:root {\n  --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level1 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level1);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        },
        {
          "name": "--mdui-elevation-level2",
          "description": "Shadow value corresponding to Level 2 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level2 elevation */\n:root {\n  --mdui-elevation-level2: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level2 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level2);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        },
        {
          "name": "--mdui-elevation-level3",
          "description": "Shadow value corresponding to Level 3 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level3 elevation */\n:root {\n  --mdui-elevation-level3: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level3 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level3);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        },
        {
          "name": "--mdui-elevation-level4",
          "description": "Shadow value corresponding to Level 4 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level4 elevation */\n:root {\n  --mdui-elevation-level4: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level4 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level4);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        },
        {
          "name": "--mdui-elevation-level5",
          "description": "Shadow value corresponding to Level 5 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level5 elevation */\n:root {\n  --mdui-elevation-level5: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level5 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level5);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        },
        {
          "name": "--mdui-motion-easing-linear",
          "description": "Easing curve for Linear Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Linear Animation */\n:root {\n  --mdui-motion-easing-linear: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Linear Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-linear);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-easing-standard",
          "description": "Easing curve for Standard Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Animation */\n:root {\n  --mdui-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-standard);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-easing-standard-accelerate",
          "description": "Easing curve for Standard Accelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Accelerated Animation */\n:root {\n  --mdui-motion-easing-standard-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Accelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-standard-accelerate);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-easing-standard-decelerate",
          "description": "Easing curve for Standard Decelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Decelerated Animation */\n:root {\n  --mdui-motion-easing-standard-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Decelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-standard-decelerate);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-easing-emphasized",
          "description": "Easing curve for Emphasized Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Animation */\n:root {\n  --mdui-motion-easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-emphasized);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-easing-emphasized-accelerate",
          "description": "Easing curve for Emphasized Accelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Accelerated Animation */\n:root {\n  --mdui-motion-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Accelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-emphasized-accelerate);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-easing-emphasized-decelerate",
          "description": "Easing curve for Emphasized Decelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Decelerated Animation */\n:root {\n  --mdui-motion-easing-emphasized-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Decelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-emphasized-decelerate);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-short1",
          "description": "Animation duration for short1.\n\n**Example**:\n```css\n/* Set the animation duration for short1 */\n:root {\n  --mdui-motion-duration-short1: 0.3s;\n}\n\n/* Read the animation duration for short1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short1);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-short2",
          "description": "Animation duration for short2.\n\n**Example**:\n```css\n/* Set the animation duration for short2 */\n:root {\n  --mdui-motion-duration-short2: 0.3s;\n}\n\n/* Read the animation duration for short2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short2);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-short3",
          "description": "Animation duration for short3.\n\n**Example**:\n```css\n/* Set the animation duration for short3 */\n:root {\n  --mdui-motion-duration-short3: 0.3s;\n}\n\n/* Read the animation duration for short3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short3);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-short4",
          "description": "Animation duration for short4.\n\n**Example**:\n```css\n/* Set the animation duration for short4 */\n:root {\n  --mdui-motion-duration-short4: 0.3s;\n}\n\n/* Read the animation duration for short4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short4);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-medium1",
          "description": "Animation duration for medium1.\n\n**Example**:\n```css\n/* Set the animation duration for medium1 */\n:root {\n  --mdui-motion-duration-medium1: 0.3s;\n}\n\n/* Read the animation duration for medium1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium1);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-medium2",
          "description": "Animation duration for medium2.\n\n**Example**:\n```css\n/* Set the animation duration for medium2 */\n:root {\n  --mdui-motion-duration-medium2: 0.3s;\n}\n\n/* Read the animation duration for medium2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium2);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-medium3",
          "description": "Animation duration for medium3.\n\n**Example**:\n```css\n/* Set the animation duration for medium3 */\n:root {\n  --mdui-motion-duration-medium3: 0.3s;\n}\n\n/* Read the animation duration for medium3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium3);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-medium4",
          "description": "Animation duration for medium4.\n\n**Example**:\n```css\n/* Set the animation duration for medium4 */\n:root {\n  --mdui-motion-duration-medium4: 0.3s;\n}\n\n/* Read the animation duration for medium4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium4);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-long1",
          "description": "Animation duration for long1.\n\n**Example**:\n```css\n/* Set the animation duration for long1 */\n:root {\n  --mdui-motion-duration-long1: 0.3s;\n}\n\n/* Read the animation duration for long1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long1);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-long2",
          "description": "Animation duration for long2.\n\n**Example**:\n```css\n/* Set the animation duration for long2 */\n:root {\n  --mdui-motion-duration-long2: 0.3s;\n}\n\n/* Read the animation duration for long2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long2);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-long3",
          "description": "Animation duration for long3.\n\n**Example**:\n```css\n/* Set the animation duration for long3 */\n:root {\n  --mdui-motion-duration-long3: 0.3s;\n}\n\n/* Read the animation duration for long3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long3);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-long4",
          "description": "Animation duration for long4.\n\n**Example**:\n```css\n/* Set the animation duration for long4 */\n:root {\n  --mdui-motion-duration-long4: 0.3s;\n}\n\n/* Read the animation duration for long4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long4);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-extra-long1",
          "description": "Animation duration for extra-long1.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long1 */\n:root {\n  --mdui-motion-duration-extra-long1: 0.3s;\n}\n\n/* Read the animation duration for extra-long1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long1);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-extra-long2",
          "description": "Animation duration for extra-long2.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long2 */\n:root {\n  --mdui-motion-duration-extra-long2: 0.3s;\n}\n\n/* Read the animation duration for extra-long2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long2);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-extra-long3",
          "description": "Animation duration for extra-long3.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long3 */\n:root {\n  --mdui-motion-duration-extra-long3: 0.3s;\n}\n\n/* Read the animation duration for extra-long3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long3);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-motion-duration-extra-long4",
          "description": "Animation duration for extra-long4.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long4 */\n:root {\n  --mdui-motion-duration-extra-long4: 0.3s;\n}\n\n/* Read the animation duration for extra-long4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long4);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        },
        {
          "name": "--mdui-shape-corner-none",
          "description": "Corner radius value for none level.\n\n**Example**:\n```css\n/* Set the corner radius value for none level */\n:root {\n  --mdui-shape-corner-none: 4px;\n}\n\n/* Read the corner radius value for none level */\n.element {\n  border-radius: var(--mdui-shape-corner-none);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        },
        {
          "name": "--mdui-shape-corner-extra-small",
          "description": "Corner radius value for extra-small level.\n\n**Example**:\n```css\n/* Set the corner radius value for extra-small level */\n:root {\n  --mdui-shape-corner-extra-small: 4px;\n}\n\n/* Read the corner radius value for extra-small level */\n.element {\n  border-radius: var(--mdui-shape-corner-extra-small);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        },
        {
          "name": "--mdui-shape-corner-small",
          "description": "Corner radius value for small level.\n\n**Example**:\n```css\n/* Set the corner radius value for small level */\n:root {\n  --mdui-shape-corner-small: 4px;\n}\n\n/* Read the corner radius value for small level */\n.element {\n  border-radius: var(--mdui-shape-corner-small);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        },
        {
          "name": "--mdui-shape-corner-medium",
          "description": "Corner radius value for medium level.\n\n**Example**:\n```css\n/* Set the corner radius value for medium level */\n:root {\n  --mdui-shape-corner-medium: 4px;\n}\n\n/* Read the corner radius value for medium level */\n.element {\n  border-radius: var(--mdui-shape-corner-medium);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        },
        {
          "name": "--mdui-shape-corner-large",
          "description": "Corner radius value for large level.\n\n**Example**:\n```css\n/* Set the corner radius value for large level */\n:root {\n  --mdui-shape-corner-large: 4px;\n}\n\n/* Read the corner radius value for large level */\n.element {\n  border-radius: var(--mdui-shape-corner-large);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        },
        {
          "name": "--mdui-shape-corner-extra-large",
          "description": "Corner radius value for extra-large level.\n\n**Example**:\n```css\n/* Set the corner radius value for extra-large level */\n:root {\n  --mdui-shape-corner-extra-large: 4px;\n}\n\n/* Read the corner radius value for extra-large level */\n.element {\n  border-radius: var(--mdui-shape-corner-extra-large);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        },
        {
          "name": "--mdui-shape-corner-full",
          "description": "Corner radius value for full level.\n\n**Example**:\n```css\n/* Set the corner radius value for full level */\n:root {\n  --mdui-shape-corner-full: 4px;\n}\n\n/* Read the corner radius value for full level */\n.element {\n  border-radius: var(--mdui-shape-corner-full);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        },
        {
          "name": "--mdui-state-layer-hover",
          "description": "Opacity for the state layer in the `hover` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in hover state */\n:root {\n  --mdui-state-layer-hover: 0.1;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        },
        {
          "name": "--mdui-state-layer-focus",
          "description": "Opacity for the state layer in the `focus` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in focus state */\n:root {\n  --mdui-state-layer-focus: 0.1;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        },
        {
          "name": "--mdui-state-layer-pressed",
          "description": "Opacity for the state layer in the `pressed` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in pressed state */\n:root {\n  --mdui-state-layer-pressed: 0.1;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        },
        {
          "name": "--mdui-state-layer-dragged",
          "description": "Opacity for the state layer in the `dragged` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in dragged state */\n:root {\n  --mdui-state-layer-dragged: 0.1;\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        },
        {
          "name": "--mdui-typescale-display-large-weight",
          "description": "Display Large font weight.\n\n**Example**:\n```css\n/* Set Display Large font weight */\n:root {\n  --mdui-typescale-display-large-weight: 500;\n}\n\n/* Read Display Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-display-large-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-large-line-height",
          "description": "Display Large line height.\n\n**Example**:\n```css\n/* Set Display Large line height */\n:root {\n  --mdui-typescale-display-large-line-height: 1.5;\n}\n\n/* Read Display Large line height */\n.element {\n  line-height: var(--mdui-typescale-display-large-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-large-size",
          "description": "Display Large font size.\n\n**Example**:\n```css\n/* Set Display Large font size */\n:root {\n  --mdui-typescale-display-large-size: 16px;\n}\n\n/* Read Display Large font size */\n.element {\n  font-size: var(--mdui-typescale-display-large-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-large-tracking",
          "description": "Display Large font tracking.\n\n**Example**:\n```css\n/* Set Display Large font tracking */\n:root {\n  --mdui-typescale-display-large-tracking: 0.1;\n}\n\n/* Read Display Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-display-large-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-medium-weight",
          "description": "Display Medium font weight.\n\n**Example**:\n```css\n/* Set Display Medium font weight */\n:root {\n  --mdui-typescale-display-medium-weight: 500;\n}\n\n/* Read Display Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-display-medium-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-medium-line-height",
          "description": "Display Medium line height.\n\n**Example**:\n```css\n/* Set Display Medium line height */\n:root {\n  --mdui-typescale-display-medium-line-height: 1.5;\n}\n\n/* Read Display Medium line height */\n.element {\n  line-height: var(--mdui-typescale-display-medium-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-medium-size",
          "description": "Display Medium font size.\n\n**Example**:\n```css\n/* Set Display Medium font size */\n:root {\n  --mdui-typescale-display-medium-size: 16px;\n}\n\n/* Read Display Medium font size */\n.element {\n  font-size: var(--mdui-typescale-display-medium-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-medium-tracking",
          "description": "Display Medium font tracking.\n\n**Example**:\n```css\n/* Set Display Medium font tracking */\n:root {\n  --mdui-typescale-display-medium-tracking: 0.1;\n}\n\n/* Read Display Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-display-medium-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-small-weight",
          "description": "Display Small font weight.\n\n**Example**:\n```css\n/* Set Display Small font weight */\n:root {\n  --mdui-typescale-display-small-weight: 500;\n}\n\n/* Read Display Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-display-small-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-small-line-height",
          "description": "Display Small line height.\n\n**Example**:\n```css\n/* Set Display Small line height */\n:root {\n  --mdui-typescale-display-small-line-height: 1.5;\n}\n\n/* Read Display Small line height */\n.element {\n  line-height: var(--mdui-typescale-display-small-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-small-size",
          "description": "Display Small font size.\n\n**Example**:\n```css\n/* Set Display Small font size */\n:root {\n  --mdui-typescale-display-small-size: 16px;\n}\n\n/* Read Display Small font size */\n.element {\n  font-size: var(--mdui-typescale-display-small-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-display-small-tracking",
          "description": "Display Small font tracking.\n\n**Example**:\n```css\n/* Set Display Small font tracking */\n:root {\n  --mdui-typescale-display-small-tracking: 0.1;\n}\n\n/* Read Display Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-display-small-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-large-weight",
          "description": "Headline Large font weight.\n\n**Example**:\n```css\n/* Set Headline Large font weight */\n:root {\n  --mdui-typescale-headline-large-weight: 500;\n}\n\n/* Read Headline Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-headline-large-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-large-line-height",
          "description": "Headline Large line height.\n\n**Example**:\n```css\n/* Set Headline Large line height */\n:root {\n  --mdui-typescale-headline-large-line-height: 1.5;\n}\n\n/* Read Headline Large line height */\n.element {\n  line-height: var(--mdui-typescale-headline-large-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-large-size",
          "description": "Headline Large font size.\n\n**Example**:\n```css\n/* Set Headline Large font size */\n:root {\n  --mdui-typescale-headline-large-size: 16px;\n}\n\n/* Read Headline Large font size */\n.element {\n  font-size: var(--mdui-typescale-headline-large-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-large-tracking",
          "description": "Headline Large font tracking.\n\n**Example**:\n```css\n/* Set Headline Large font tracking */\n:root {\n  --mdui-typescale-headline-large-tracking: 0.1;\n}\n\n/* Read Headline Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-headline-large-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-medium-weight",
          "description": "Headline Medium font weight.\n\n**Example**:\n```css\n/* Set Headline Medium font weight */\n:root {\n  --mdui-typescale-headline-medium-weight: 500;\n}\n\n/* Read Headline Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-headline-medium-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-medium-line-height",
          "description": "Headline Medium line height.\n\n**Example**:\n```css\n/* Set Headline Medium line height */\n:root {\n  --mdui-typescale-headline-medium-line-height: 1.5;\n}\n\n/* Read Headline Medium line height */\n.element {\n  line-height: var(--mdui-typescale-headline-medium-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-medium-size",
          "description": "Headline Medium font size.\n\n**Example**:\n```css\n/* Set Headline Medium font size */\n:root {\n  --mdui-typescale-headline-medium-size: 16px;\n}\n\n/* Read Headline Medium font size */\n.element {\n  font-size: var(--mdui-typescale-headline-medium-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-medium-tracking",
          "description": "Headline Medium font tracking.\n\n**Example**:\n```css\n/* Set Headline Medium font tracking */\n:root {\n  --mdui-typescale-headline-medium-tracking: 0.1;\n}\n\n/* Read Headline Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-headline-medium-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-small-weight",
          "description": "Headline Small font weight.\n\n**Example**:\n```css\n/* Set Headline Small font weight */\n:root {\n  --mdui-typescale-headline-small-weight: 500;\n}\n\n/* Read Headline Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-headline-small-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-small-line-height",
          "description": "Headline Small line height.\n\n**Example**:\n```css\n/* Set Headline Small line height */\n:root {\n  --mdui-typescale-headline-small-line-height: 1.5;\n}\n\n/* Read Headline Small line height */\n.element {\n  line-height: var(--mdui-typescale-headline-small-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-small-size",
          "description": "Headline Small font size.\n\n**Example**:\n```css\n/* Set Headline Small font size */\n:root {\n  --mdui-typescale-headline-small-size: 16px;\n}\n\n/* Read Headline Small font size */\n.element {\n  font-size: var(--mdui-typescale-headline-small-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-headline-small-tracking",
          "description": "Headline Small font tracking.\n\n**Example**:\n```css\n/* Set Headline Small font tracking */\n:root {\n  --mdui-typescale-headline-small-tracking: 0.1;\n}\n\n/* Read Headline Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-headline-small-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-large-weight",
          "description": "Title Large font weight.\n\n**Example**:\n```css\n/* Set Title Large font weight */\n:root {\n  --mdui-typescale-title-large-weight: 500;\n}\n\n/* Read Title Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-title-large-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-large-line-height",
          "description": "Title Large line height.\n\n**Example**:\n```css\n/* Set Title Large line height */\n:root {\n  --mdui-typescale-title-large-line-height: 1.5;\n}\n\n/* Read Title Large line height */\n.element {\n  line-height: var(--mdui-typescale-title-large-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-large-size",
          "description": "Title Large font size.\n\n**Example**:\n```css\n/* Set Title Large font size */\n:root {\n  --mdui-typescale-title-large-size: 16px;\n}\n\n/* Read Title Large font size */\n.element {\n  font-size: var(--mdui-typescale-title-large-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-large-tracking",
          "description": "Title Large font tracking.\n\n**Example**:\n```css\n/* Set Title Large font tracking */\n:root {\n  --mdui-typescale-title-large-tracking: 0.1;\n}\n\n/* Read Title Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-title-large-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-medium-weight",
          "description": "Title Medium font weight.\n\n**Example**:\n```css\n/* Set Title Medium font weight */\n:root {\n  --mdui-typescale-title-medium-weight: 500;\n}\n\n/* Read Title Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-title-medium-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-medium-line-height",
          "description": "Title Medium line height.\n\n**Example**:\n```css\n/* Set Title Medium line height */\n:root {\n  --mdui-typescale-title-medium-line-height: 1.5;\n}\n\n/* Read Title Medium line height */\n.element {\n  line-height: var(--mdui-typescale-title-medium-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-medium-size",
          "description": "Title Medium font size.\n\n**Example**:\n```css\n/* Set Title Medium font size */\n:root {\n  --mdui-typescale-title-medium-size: 16px;\n}\n\n/* Read Title Medium font size */\n.element {\n  font-size: var(--mdui-typescale-title-medium-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-medium-tracking",
          "description": "Title Medium font tracking.\n\n**Example**:\n```css\n/* Set Title Medium font tracking */\n:root {\n  --mdui-typescale-title-medium-tracking: 0.1;\n}\n\n/* Read Title Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-title-medium-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-small-weight",
          "description": "Title Small font weight.\n\n**Example**:\n```css\n/* Set Title Small font weight */\n:root {\n  --mdui-typescale-title-small-weight: 500;\n}\n\n/* Read Title Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-title-small-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-small-line-height",
          "description": "Title Small line height.\n\n**Example**:\n```css\n/* Set Title Small line height */\n:root {\n  --mdui-typescale-title-small-line-height: 1.5;\n}\n\n/* Read Title Small line height */\n.element {\n  line-height: var(--mdui-typescale-title-small-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-small-size",
          "description": "Title Small font size.\n\n**Example**:\n```css\n/* Set Title Small font size */\n:root {\n  --mdui-typescale-title-small-size: 16px;\n}\n\n/* Read Title Small font size */\n.element {\n  font-size: var(--mdui-typescale-title-small-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-title-small-tracking",
          "description": "Title Small font tracking.\n\n**Example**:\n```css\n/* Set Title Small font tracking */\n:root {\n  --mdui-typescale-title-small-tracking: 0.1;\n}\n\n/* Read Title Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-title-small-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-large-weight",
          "description": "Label Large font weight.\n\n**Example**:\n```css\n/* Set Label Large font weight */\n:root {\n  --mdui-typescale-label-large-weight: 500;\n}\n\n/* Read Label Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-label-large-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-large-line-height",
          "description": "Label Large line height.\n\n**Example**:\n```css\n/* Set Label Large line height */\n:root {\n  --mdui-typescale-label-large-line-height: 1.5;\n}\n\n/* Read Label Large line height */\n.element {\n  line-height: var(--mdui-typescale-label-large-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-large-size",
          "description": "Label Large font size.\n\n**Example**:\n```css\n/* Set Label Large font size */\n:root {\n  --mdui-typescale-label-large-size: 16px;\n}\n\n/* Read Label Large font size */\n.element {\n  font-size: var(--mdui-typescale-label-large-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-large-tracking",
          "description": "Label Large font tracking.\n\n**Example**:\n```css\n/* Set Label Large font tracking */\n:root {\n  --mdui-typescale-label-large-tracking: 0.1;\n}\n\n/* Read Label Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-label-large-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-medium-weight",
          "description": "Label Medium font weight.\n\n**Example**:\n```css\n/* Set Label Medium font weight */\n:root {\n  --mdui-typescale-label-medium-weight: 500;\n}\n\n/* Read Label Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-label-medium-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-medium-line-height",
          "description": "Label Medium line height.\n\n**Example**:\n```css\n/* Set Label Medium line height */\n:root {\n  --mdui-typescale-label-medium-line-height: 1.5;\n}\n\n/* Read Label Medium line height */\n.element {\n  line-height: var(--mdui-typescale-label-medium-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-medium-size",
          "description": "Label Medium font size.\n\n**Example**:\n```css\n/* Set Label Medium font size */\n:root {\n  --mdui-typescale-label-medium-size: 16px;\n}\n\n/* Read Label Medium font size */\n.element {\n  font-size: var(--mdui-typescale-label-medium-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-medium-tracking",
          "description": "Label Medium font tracking.\n\n**Example**:\n```css\n/* Set Label Medium font tracking */\n:root {\n  --mdui-typescale-label-medium-tracking: 0.1;\n}\n\n/* Read Label Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-label-medium-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-small-weight",
          "description": "Label Small font weight.\n\n**Example**:\n```css\n/* Set Label Small font weight */\n:root {\n  --mdui-typescale-label-small-weight: 500;\n}\n\n/* Read Label Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-label-small-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-small-line-height",
          "description": "Label Small line height.\n\n**Example**:\n```css\n/* Set Label Small line height */\n:root {\n  --mdui-typescale-label-small-line-height: 1.5;\n}\n\n/* Read Label Small line height */\n.element {\n  line-height: var(--mdui-typescale-label-small-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-small-size",
          "description": "Label Small font size.\n\n**Example**:\n```css\n/* Set Label Small font size */\n:root {\n  --mdui-typescale-label-small-size: 16px;\n}\n\n/* Read Label Small font size */\n.element {\n  font-size: var(--mdui-typescale-label-small-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-label-small-tracking",
          "description": "Label Small font tracking.\n\n**Example**:\n```css\n/* Set Label Small font tracking */\n:root {\n  --mdui-typescale-label-small-tracking: 0.1;\n}\n\n/* Read Label Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-label-small-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-large-weight",
          "description": "Body Large font weight.\n\n**Example**:\n```css\n/* Set Body Large font weight */\n:root {\n  --mdui-typescale-body-large-weight: 500;\n}\n\n/* Read Body Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-body-large-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-large-line-height",
          "description": "Body Large line height.\n\n**Example**:\n```css\n/* Set Body Large line height */\n:root {\n  --mdui-typescale-body-large-line-height: 1.5;\n}\n\n/* Read Body Large line height */\n.element {\n  line-height: var(--mdui-typescale-body-large-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-large-size",
          "description": "Body Large font size.\n\n**Example**:\n```css\n/* Set Body Large font size */\n:root {\n  --mdui-typescale-body-large-size: 16px;\n}\n\n/* Read Body Large font size */\n.element {\n  font-size: var(--mdui-typescale-body-large-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-large-tracking",
          "description": "Body Large font tracking.\n\n**Example**:\n```css\n/* Set Body Large font tracking */\n:root {\n  --mdui-typescale-body-large-tracking: 0.1;\n}\n\n/* Read Body Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-body-large-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-medium-weight",
          "description": "Body Medium font weight.\n\n**Example**:\n```css\n/* Set Body Medium font weight */\n:root {\n  --mdui-typescale-body-medium-weight: 500;\n}\n\n/* Read Body Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-body-medium-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-medium-line-height",
          "description": "Body Medium line height.\n\n**Example**:\n```css\n/* Set Body Medium line height */\n:root {\n  --mdui-typescale-body-medium-line-height: 1.5;\n}\n\n/* Read Body Medium line height */\n.element {\n  line-height: var(--mdui-typescale-body-medium-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-medium-size",
          "description": "Body Medium font size.\n\n**Example**:\n```css\n/* Set Body Medium font size */\n:root {\n  --mdui-typescale-body-medium-size: 16px;\n}\n\n/* Read Body Medium font size */\n.element {\n  font-size: var(--mdui-typescale-body-medium-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-medium-tracking",
          "description": "Body Medium font tracking.\n\n**Example**:\n```css\n/* Set Body Medium font tracking */\n:root {\n  --mdui-typescale-body-medium-tracking: 0.1;\n}\n\n/* Read Body Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-body-medium-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-small-weight",
          "description": "Body Small font weight.\n\n**Example**:\n```css\n/* Set Body Small font weight */\n:root {\n  --mdui-typescale-body-small-weight: 500;\n}\n\n/* Read Body Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-body-small-weight);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-small-line-height",
          "description": "Body Small line height.\n\n**Example**:\n```css\n/* Set Body Small line height */\n:root {\n  --mdui-typescale-body-small-line-height: 1.5;\n}\n\n/* Read Body Small line height */\n.element {\n  line-height: var(--mdui-typescale-body-small-line-height);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-small-size",
          "description": "Body Small font size.\n\n**Example**:\n```css\n/* Set Body Small font size */\n:root {\n  --mdui-typescale-body-small-size: 16px;\n}\n\n/* Read Body Small font size */\n.element {\n  font-size: var(--mdui-typescale-body-small-size);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        },
        {
          "name": "--mdui-typescale-body-small-tracking",
          "description": "Body Small font tracking.\n\n**Example**:\n```css\n/* Set Body Small font tracking */\n:root {\n  --mdui-typescale-body-small-tracking: 0.1;\n}\n\n/* Read Body Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-body-small-tracking);\n}\n```\n",
          "doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ],
      "classes": [
        {
          "name": "mdui-theme-light",
          "description": "Apply this class to an element to display it and its child elements in light mode.",
          "description-sections": {
            "Example": "```html\n<div class=\"mdui-theme-light\"></div>\n```"
          },
          "doc-url": "https://www.mdui.org/en/docs/2/styles/dark-mode"
        },
        {
          "name": "mdui-theme-dark",
          "description": "Apply this class to the `<html>` element to display the entire page in dark mode. It can also be applied to other elements to display them and their child elements in dark mode.",
          "description-sections": {
            "Example": "```html\n<!-- Display the entire page in dark mode -->\n<html class=\"mdui-theme-dark\"></html>\n\n<!-- Display this element and its child elements in dark mode -->\n<div class=\"mdui-theme-dark\"></div>\n```"
          },
          "doc-url": "https://www.mdui.org/en/docs/2/styles/dark-mode"
        },
        {
          "name": "mdui-theme-auto",
          "description": "Apply this class to the `<html>` element to automatically toggle between light and dark modes based on the operating system settings. It can also be applied to other elements to automatically toggle them and their child elements between light and dark modes.",
          "description-sections": {
            "Example": "```html\n<!-- Automatically toggle the entire page between light and dark modes -->\n<html class=\"mdui-theme-auto\"></html>\n\n<!-- Automatically toggle this element and its child elements between light and dark modes -->\n<div class=\"mdui-theme-auto\"></div>\n```"
          },
          "doc-url": "https://www.mdui.org/en/docs/2/styles/dark-mode"
        },
        {
          "name": "mdui-prose",
          "description": "Apply this class to enhance typography styles for articles.",
          "description-sections": {
            "Example": "```html\n<div class=\"mdui-prose\">\n  <h1>Article Title</h2>\n  <p>Article Content</p>\n</div>\n```"
          },
          "doc-url": "https://www.mdui.org/en/docs/2/styles/prose"
        },
        {
          "name": "mdui-table",
          "description": "Apply this class to the `<table>` element to enhance its display style. It can also be applied to the parent element of the `<table>` to not only enhance the table's display style but also enable horizontal scrolling for the table.",
          "description-sections": {
            "Example": "```html\n<table class=\"mdui-table\"></table>\n\n<div class=\"mdui-table\">\n  <table></table>\n</div>\n```"
          },
          "doc-url": "https://www.mdui.org/en/docs/2/styles/prose"
        }
      ]
    }
  }
}