{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
  "version": 1.1,
  "tags": [
    {
      "name": "m-icon",
      "description": "Renders icons for visual cues and interface elements.\n---\n",
      "attributes": [
        {
          "name": "name",
          "description": "The name of the icon to display.",
          "values": [{ "name": "IconName" }]
        },
        {
          "name": "size",
          "description": "The size of the icon.",
          "values": [
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" },
            { "name": "xxl" }
          ]
        },
        {
          "name": "label",
          "description": "The accessible label for the icon.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-icon--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/icon"
        }
      ]
    },
    {
      "name": "m-stack",
      "description": "Layout utility that applies consistent spacing between child elements.\n---\n\n\n### **Slots:**\n - **default** - Default content of the stack",
      "attributes": [
        {
          "name": "direction",
          "description": "The direction of the stack (row or column)",
          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
        },
        {
          "name": "spacing",
          "description": "The spacing between stack items",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "alignment",
          "description": "The alignment of stack items",
          "values": [
            { "name": "start" },
            { "name": "center" },
            { "name": "end" },
            { "name": "stretch" },
            { "name": "between" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-stack--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/stack"
        }
      ]
    },
    {
      "name": "m-spinner",
      "description": "Visual loading indicator for ongoing processes.\n---\n",
      "attributes": [
        { "name": "size", "values": [] },
        { "name": "label", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-spinner--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/spinner"
        }
      ]
    },
    {
      "name": "m-skeleton-loader",
      "description": "Lightweight shimmering placeholder for pending content.\n---\n",
      "attributes": [
        {
          "name": "variant",
          "description": "Shape preset used for the placeholder surface.",
          "values": [{ "name": "rect" }, { "name": "circle" }]
        },
        {
          "name": "width",
          "description": "Optional explicit width such as `100%`, `240px`, or `12rem`.",
          "values": []
        },
        {
          "name": "height",
          "description": "Optional explicit height (e.g., `20px`, `1em`). Use 36px to mimic default buttons and 36–44px to mirror avatar sizes from `m-avatar`.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-skeleton-loader--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/skeleton-loader"
        }
      ]
    },
    {
      "name": "m-empty-state",
      "description": "Displays an icon and message for empty, success, or no-result states.\n---\n\n\n### **Slots:**\n - **default** - The main text content\n- **icon** - Optional slot for custom icon content",
      "attributes": [
        { "name": "iconName", "values": [{ "name": "IconName" }] },
        {
          "name": "iconSize",
          "values": [
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" },
            { "name": "xxl" }
          ]
        },
        { "name": "autoFocus", "values": [] },
        { "name": "fullWidth", "values": [] },
        { "name": "horizontal", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-empty-state--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/empty-state"
        }
      ]
    },
    {
      "name": "m-popover",
      "description": "Floating container positioned using the native Popover API.\n---\n\n\n### **Events:**\n - **open-changed** - Fired when the popover opens or closes\n\n### **Public Methods:**\n - **setInitialFocus(element: _HTMLElement | null_)** - Sets the element that should receive initial focus when the popover opens\n\n### **Slots:**\n - **default** - Content to be shown in the popover\n- **trigger** - The element that triggers the popover",
      "attributes": [
        {
          "name": "open",
          "description": "Whether the popover is shown",
          "values": []
        },
        {
          "name": "mode",
          "description": "The popover behavior mode",
          "values": [{ "name": "auto" }, { "name": "manual" }]
        },
        {
          "name": "placement",
          "description": "The preferred placement of the popover",
          "values": [
            { "name": "top" },
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "right" },
            { "name": "right-start" },
            { "name": "right-end" },
            { "name": "bottom" },
            { "name": "bottom-start" },
            { "name": "bottom-end" },
            { "name": "left" },
            { "name": "left-start" },
            { "name": "left-end" }
          ]
        },
        {
          "name": "overlay",
          "description": "Whether to show an overlay behind the popover",
          "values": []
        },
        {
          "name": "bottomSheet",
          "description": "Whether to display as a bottom sheet on mobile",
          "values": []
        },
        {
          "name": "title",
          "description": "The title of the popover",
          "values": []
        },
        {
          "name": "showTitle",
          "description": "Whether to show the header of the popover",
          "values": []
        },
        {
          "name": "spacing",
          "description": "The spacing of the popover content",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "size",
          "values": [
            { "name": "auto" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        { "name": "disabled", "values": [] },
        { "name": "shadow", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-popover--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/popover"
        }
      ]
    },
    {
      "name": "m-link",
      "description": "Creates a hyperlink to internal or external destinations.\n---\n\n\n### **Slots:**\n - **default** - Default content of the link",
      "attributes": [
        {
          "name": "href",
          "description": "The URL the link points to",
          "values": []
        },
        {
          "name": "text",
          "description": "Simple text content for the link",
          "values": []
        },
        {
          "name": "size",
          "description": "Size variant of the link (xxs, xs, s, m)",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" }
          ]
        },
        {
          "name": "startIcon",
          "description": "Name of the icon to display before the text",
          "values": [{ "name": "IconName" }]
        },
        {
          "name": "endIcon",
          "description": "Name of the icon to display after the text",
          "values": [{ "name": "IconName" }]
        },
        {
          "name": "target",
          "description": "Where to open the linked URL (_blank, _self, _parent, _top, or a frame name)",
          "values": []
        },
        {
          "name": "download",
          "description": "If present, the link will download instead of navigating. Optional string sets suggested filename.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-link--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/link"
        }
      ]
    },
    {
      "name": "m-menu",
      "description": "Displays a list of selectable options in a popover.\n---\n\n\n### **Events:**\n - **item-click**\n- **open-changed** - Fired when the menu opens or closes\n- **item-selected** - Fired when a menu item is selected\n\n### **Slots:**\n - **trigger** - The element that triggers the menu\n- **header** - Custom header content to be shown at the top of the menu\n- **content** - Custom content to be shown in the menu (after groups/items)\n- **buttons** - Custom menu buttons to replace the default groups/items",
      "attributes": [
        {
          "name": "open",
          "description": "Whether the menu is shown",
          "values": []
        },
        {
          "name": "placement",
          "description": "The preferred placement of the menu",
          "values": [
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "bottom-start" },
            { "name": "bottom-end" }
          ]
        },
        {
          "name": "overlay",
          "description": "Whether to show an overlay behind the menu",
          "values": []
        },
        {
          "name": "bottomSheet",
          "description": "Whether to display as a bottom sheet on mobile",
          "values": []
        },
        { "name": "groups", "values": [{ "name": "MenuGroup[]" }] },
        { "name": "items", "values": [{ "name": "MenuItem[]" }] },
        { "name": "disabled", "values": [] },
        { "name": "fullWidth", "values": [] },
        { "name": "title", "values": [] },
        {
          "name": "spacing",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "size",
          "values": [
            { "name": "auto" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-menu--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/menu"
        }
      ]
    },
    {
      "name": "m-menu-group",
      "description": "Groups menu items under optional section titles.\n---\n\n\n### **Slots:**\n - **default** - Menu buttons to be grouped",
      "attributes": [
        {
          "name": "title",
          "description": "Optional title for the group",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-menu-group--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/menu-group"
        }
      ]
    },
    {
      "name": "m-app-layout",
      "description": "Use as the root wrapper to provide a consistent, responsive application frame with header, navigation, content, and footer slots.\n---\n\n\n### **Slots:**\n - **header** - The header of the app layout.\n- **navigation** - The left-side navigation area (aside).\n- **default** - The main content of the app layout.\n- **footer** - The footer of the app layout.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-app-layout--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/app-layout"
        }
      ]
    },
    {
      "name": "m-app-header",
      "description": "Use for a unified, accessible application header with navigation, branding, and user actions.\n---\n\n\n### **Slots:**\n - **app-menu** - Use a AppMenu component to display the app menu.\n- **logo** - Use a link to display link to root of the application. Also use a logo image inside the link. With the height attribute set to 20px.\n- **app-name** - Use to display the current application name next to the logo.\n- **additional-navigation** - Use a navigation element to display additional navigation.\n- **navigation** - Use a navigation element to display the main navigation.",
      "attributes": [{ "name": "fluid", "values": [] }],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-app-header--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/app-header"
        }
      ]
    },
    {
      "name": "m-app-footer",
      "description": "Use for a consistent application footer to present for example legal, status, and accessibility information.\n---\n\n\n### **Slots:**\n - **left** - Content for the left side of the footer - note use links as direct slotted elements\n- **right** - Content for the right side of the footer",
      "attributes": [
        {
          "name": "fluid",
          "description": "Whether the footer should be have fluid width or a maximum content width",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-app-footer--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/app-footer"
        }
      ]
    },
    {
      "name": "m-view",
      "description": "Use to structure a page or view with optional sidebar and main content, ensuring responsive layout and accessibility.\n---\n\n\n### **Slots:**\n - **aside** - The sidebar of the view.\n- **main** - The main content of the view.",
      "attributes": [
        {
          "name": "size",
          "description": "The width of the view.",
          "values": []
        },
        {
          "name": "margin",
          "description": "Additional vertical margin of the view.",
          "values": []
        },
        { "name": "sr-label", "values": [] },
        { "name": "sr-label-aside", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-view--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/view"
        }
      ]
    },
    {
      "name": "m-horizontal",
      "description": "Use to arrange UI elements horizontally with consistent spacing for toolbars, button groups, and layouts.\n---\n\n\n### **Slots:**\n - **default** - Content to be displayed horizontally",
      "attributes": [
        {
          "name": "spacing",
          "description": "The spacing between items (xxs, xs, s, m, l, xl)",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "direction",
          "description": "The direction of the stack (row or column)",
          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
        },
        {
          "name": "alignment",
          "description": "The alignment of stack items",
          "values": [
            { "name": "start" },
            { "name": "center" },
            { "name": "end" },
            { "name": "stretch" },
            { "name": "between" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-horizontal--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/horizontal"
        }
      ]
    },
    {
      "name": "m-vertical",
      "description": "Use to stack UI elements vertically with consistent spacing in forms, layouts, and content blocks.\n---\n\n\n### **Slots:**\n - **default** - Content to be displayed vertically",
      "attributes": [
        {
          "name": "spacing",
          "description": "The spacing between items (xxs, xs, s, m, l, xl)",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "direction",
          "description": "The direction of the stack (row or column)",
          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
        },
        {
          "name": "alignment",
          "description": "The alignment of stack items",
          "values": [
            { "name": "start" },
            { "name": "center" },
            { "name": "end" },
            { "name": "stretch" },
            { "name": "between" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-vertical--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/vertical"
        }
      ]
    },
    {
      "name": "m-switcher",
      "description": "Switches between horizontal and vertical layouts based on container width.\n---\n\n\n### **Slots:**\n - **default** - Default content of the switcher",
      "attributes": [
        {
          "name": "spacing",
          "description": "The spacing between switcher items",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "threshold",
          "description": "The container width at which the component switches between layouts (default: 30rem)",
          "values": []
        },
        {
          "name": "limit",
          "description": "The maximum number of elements allowed in horizontal configuration (default: 4)",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-switcher--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/switcher"
        }
      ]
    },
    {
      "name": "m-section",
      "description": "Use to semantically group related content with optional title and description, improving structure and accessibility.\n---\n\n\n### **Slots:**\n - **header** - Content for the section header, heading element\n- **description** - Content for the section description, single paragraph\n- **default** - Main content of the section",
      "attributes": [
        {
          "name": "aria-label",
          "description": "The aria-label for the section",
          "values": []
        },
        {
          "name": "role",
          "description": "The role for the section, defaults to \"region\"",
          "values": []
        },
        {
          "name": "variant",
          "description": "The variant for the section, defaults to \"default\"",
          "values": [{ "name": "default" }, { "name": "box" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-section--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/section"
        }
      ]
    },
    {
      "name": "m-table",
      "description": "Displays structured data in rows and columns.\n---\n",
      "attributes": [{ "name": "sortable", "values": [] }],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-table--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/table"
        }
      ]
    },
    {
      "name": "m-details",
      "description": "Collapsible section for showing summary information and hidden content.\n---\n\n\n### **Slots:**\n - **default** - Default content of the details\n- **summary** - Summary content of the details",
      "attributes": [
        {
          "name": "open",
          "description": "Whether the details is open",
          "values": []
        },
        {
          "name": "name",
          "description": "Name details elements to use multiple as an accordion",
          "values": []
        },
        {
          "name": "caret",
          "description": "Caret icon position, defaults to \"start\", can be \"end\"",
          "values": [{ "name": "start" }, { "name": "end" }]
        },
        {
          "name": "variant",
          "values": [{ "name": "default" }, { "name": "box" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-details--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/details"
        }
      ]
    },
    {
      "name": "m-card",
      "description": "Content container with structured header, body, and footer sections.\n---\n\n\n### **Slots:**\n - **default** - Default content of the card (body)\n- **header** - Header content of the card\n- **header-end** - End content in the header (e.g., status tags)\n- **footer** - Footer content of the card",
      "attributes": [
        {
          "name": "role",
          "description": "The ARIA role for the card, defaults to \"article\"",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-card--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/card"
        }
      ]
    },
    {
      "name": "m-typeset",
      "description": "A typographic utility that styles all child text elements for consistent long-form reading layouts.\n---\n\n\n### **Slots:**\n - **default** - Default slot for content",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-typeset--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/typeset"
        }
      ]
    },
    {
      "name": "m-button",
      "description": "Triggers user actions or navigates to linked destinations.\n---\n\n\n### **Events:**\n - **click** - fired when the button is clicked\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input\n\n### **Slots:**\n - **default** - Default content of the button, the text for action\n- **start** - Slot before the default content\n- **end** - Slot after the default content",
      "attributes": [
        {
          "name": "type",
          "description": "The type of the button",
          "values": [
            { "name": "submit" },
            { "name": "reset" },
            { "name": "button" }
          ]
        },
        {
          "name": "variant",
          "description": "The visual style of the button",
          "values": [
            { "name": "default" },
            { "name": "primary" },
            { "name": "plain" },
            { "name": "danger" }
          ]
        },
        {
          "name": "size",
          "description": "Set the size of the button",
          "values": [{ "name": "s" }, { "name": "m" }, { "name": "l" }]
        },
        {
          "name": "square",
          "description": "Whether the button is square",
          "values": []
        },
        { "name": "href", "description": "Use button as a link", "values": [] },
        {
          "name": "target",
          "description": "The target attribute for the link",
          "values": [
            { "name": "_self" },
            { "name": "_blank" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        {
          "name": "loading",
          "description": "Indicates whether the button is in a loading state",
          "values": []
        },
        {
          "name": "underline",
          "description": "Whether the button text should be underlined",
          "values": []
        },
        {
          "name": "alignment",
          "description": "The text alignment inside the button",
          "values": [
            { "name": "left" },
            { "name": "center" },
            { "name": "right" }
          ]
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "badge",
          "description": "Whether to show the notification badge dot",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text for the input",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        },
        { "name": "error", "values": [] },
        { "name": "required", "values": [] },
        { "name": "label", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-button--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/button"
        }
      ]
    },
    {
      "name": "m-button-group",
      "description": "Groups multiple buttons together for related actions.\n---\n\n\n### **Slots:**\n - **default** - Default slot for content",
      "attributes": [
        {
          "name": "align",
          "description": "The alignment of the buttons in the group",
          "values": [
            { "name": "left" },
            { "name": "center" },
            { "name": "right" },
            { "name": "space-between" }
          ]
        },
        {
          "name": "spacing",
          "description": "The spacing between the buttons in the group",
          "values": [{ "name": "xs" }, { "name": "s" }, { "name": "m" }]
        },
        {
          "name": "aria-label",
          "description": "The aria-label of the button group",
          "values": []
        },
        {
          "name": "role",
          "description": "The role of the button group",
          "values": []
        },
        {
          "name": "wrap",
          "description": "Whether the buttons should wrap to the next line",
          "values": []
        },
        {
          "name": "alignment",
          "values": [
            { "name": "left" },
            { "name": "center" },
            { "name": "right" },
            { "name": "space-between" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-button-group--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/button-group"
        }
      ]
    },
    {
      "name": "m-tag",
      "description": "Displays a short label or categorization tag.\n---\n\n\n### **Slots:**\n - **default** - Default content of the element",
      "attributes": [
        {
          "name": "icon",
          "description": "Optional icon to display in the tag",
          "values": [{ "name": "IconName" }]
        },
        {
          "name": "variant",
          "description": "Variant of the tag",
          "values": [
            { "name": "neutral" },
            { "name": "info" },
            { "name": "danger" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "highlight" }
          ]
        },
        { "name": "large", "values": [{ "name": "Boolean" }] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-tag--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/tag"
        }
      ]
    },
    {
      "name": "m-banner",
      "description": "Banner component displays a message with an icon for success or danger states\n---\n\n\n### **Slots:**\n - **default** - Content for the banner message",
      "attributes": [
        {
          "name": "variant",
          "description": "Variant of the banner (success or danger)",
          "values": [
            { "name": "success" },
            { "name": "danger" },
            { "name": "informative" },
            { "name": "warning" }
          ]
        },
        {
          "name": "fullWidth",
          "description": "Whether the banner should take full width",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-banner--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/banner"
        }
      ]
    },
    {
      "name": "m-form-errors",
      "description": "Displays a summary of form validation errors using danger styling.\n---\n\n\n### **Slots:**\n - **heading** - Content for the heading/title (typically an h2 element)\n- **list** - Content for the list of error links (typically a ul with li elements containing links)\n- **default** - Content for the banner message",
      "attributes": [
        {
          "name": "fullWidth",
          "description": "Whether the component should take full width (inherited from Banner)",
          "values": []
        },
        {
          "name": "variant",
          "description": "Variant of the banner (success or danger)",
          "values": [
            { "name": "success" },
            { "name": "danger" },
            { "name": "informative" },
            { "name": "warning" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-form-errors--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/form-errors"
        }
      ]
    },
    {
      "name": "m-avatar",
      "description": "Displays a circular avatar with initials or an icon fallback.\n---\n\n\n### **Events:**\n - **click** - Fired when an interactive avatar is clicked",
      "attributes": [
        {
          "name": "initials",
          "description": "User's initials to display (max 2 characters) or full name",
          "values": []
        },
        {
          "name": "icon",
          "description": "Icon to display when no initials are provided",
          "values": [{ "name": "IconName" }]
        },
        {
          "name": "size",
          "description": "Size of the avatar (s, m, l)",
          "values": [{ "name": "s" }, { "name": "m" }, { "name": "l" }]
        },
        {
          "name": "interactive",
          "description": "Whether the avatar is interactive (button) or visual-only (div)",
          "values": []
        },
        {
          "name": "ariaLabel",
          "description": "Accessibility label for the avatar",
          "values": []
        },
        {
          "name": "variant",
          "description": "Color variant of the avatar (default, plain)",
          "values": [
            { "name": "default" },
            { "name": "plain" },
            { "name": "positive" },
            { "name": "negative" },
            { "name": "informative" }
          ]
        },
        {
          "name": "autoColor",
          "description": "Automatically generate accessible colors based on the name",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-avatar--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/avatar"
        }
      ]
    },
    {
      "name": "m-nav",
      "description": "Nav component for grouping navigation elements. Mainly used in [appMenu](?path=/docs/components-appmenu--docs).\n---\n\n\n### **Slots:**\n - **default** - Default content of the element",
      "attributes": [
        {
          "name": "label",
          "description": "Optional label for the navigation",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-nav--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/nav"
        }
      ]
    },
    {
      "name": "m-nav-group",
      "description": "NavGroup component for grouping navigation items. Always wrap your navigation group in a [nav](?path=/docs/components-nav--docs) component.\n---\n\n\n### **Slots:**\n - **default** - Default content of the element",
      "attributes": [
        {
          "name": "heading",
          "description": "The heading text for the navigation group",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-nav-group--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/nav-group"
        }
      ]
    },
    {
      "name": "m-nav-group-app",
      "description": "The NavGroupApp component is used to display an application in a [navigation group](?path=/docs/components-navgroup--docs).\n---\n\n\n### **Events:**\n - **click**",
      "attributes": [
        {
          "name": "name",
          "description": "Name of the application",
          "values": []
        },
        { "name": "id", "description": "ID of the application", "values": [] },
        {
          "name": "description",
          "description": "Description of the application",
          "values": []
        },
        {
          "name": "href",
          "description": "URL of the application",
          "values": []
        },
        {
          "name": "target",
          "description": "Target of the application",
          "values": []
        },
        {
          "name": "selected",
          "description": "Whether the application is selected. Can be boolean or string \"true\"/\"false\"",
          "values": []
        },
        {
          "name": "purchase",
          "description": "Whether the application is not yet purchased for the user. Can be boolean or string \"true\"/\"false\"",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-nav-group-app--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/nav-group-app"
        }
      ]
    },
    {
      "name": "m-main-navigation",
      "description": "Primary navigation component for application-level navigation.\n---\n\n\n### **Slots:**\n - **default** - Navigation items (m-nav-item components)",
      "attributes": [
        {
          "name": "navigationData",
          "description": "Navigation data object with mainNav array",
          "values": [
            {
              "name": "{\n    mainNav: NavItem[];\n    subNav?: NavItem[];\n    currentPage: string;\n    currentLevel: 1"
            },
            { "name": "2" },
            { "name": "3;\n  }" }
          ]
        },
        {
          "name": "activeItem",
          "description": "Currently active navigation item",
          "values": []
        },
        {
          "name": "ssrCurrentPage",
          "description": "SSR fallback for current page",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-main-navigation--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/main-navigation"
        }
      ]
    },
    {
      "name": "m-nav-item",
      "description": "Navigation item used within the main navigation menu.\n---\n",
      "attributes": [
        {
          "name": "href",
          "description": "The URL for the navigation item",
          "values": []
        },
        {
          "name": "label",
          "description": "The text label for the navigation item",
          "values": []
        },
        {
          "name": "active",
          "description": "Whether this item is currently active",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether this item is disabled",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-nav-item--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/nav-item"
        }
      ]
    },
    {
      "name": "m-sub-navigation",
      "description": "Secondary navigation component for left-side page navigation.\n---\n",
      "attributes": [
        {
          "name": "navTitle",
          "description": "Optional title for the sub navigation",
          "values": []
        },
        {
          "name": "fullHeight",
          "description": "Whether the navigation should take full height",
          "values": []
        },
        {
          "name": "width",
          "description": "Width of the navigation (default: 280px)",
          "values": []
        },
        {
          "name": "items",
          "description": "(NEW) Level-2 items to render; each may have children (level-3) Behavior: - If `items` is provided: renders dynamic 2-level sidebar with drill-in to level-3. - If `items` is not provided: falls back to rendering the default <slot>.",
          "values": [{ "name": "NavItem[]" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-sub-navigation--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/sub-navigation"
        }
      ]
    },
    {
      "name": "m-sub-nav-item",
      "description": "Navigation item used within a sub-navigation menu.\n---\n",
      "attributes": [
        {
          "name": "href",
          "description": "The URL for the navigation item",
          "values": []
        },
        {
          "name": "label",
          "description": "The text label for the navigation item",
          "values": []
        },
        {
          "name": "active",
          "description": "Whether this item is currently active",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether this item is disabled",
          "values": []
        },
        {
          "name": "icon",
          "description": "Optional icon name to display",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-sub-nav-item--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/sub-nav-item"
        }
      ]
    },
    {
      "name": "m-dialog",
      "description": "Modal overlay for presenting content, actions, or menus.\n---\n\n\n### **Events:**\n - **close** - Event fired when the dialog is closed\n\n### **Public Methods:**\n - **openModal()** - Shows the modal programmatically\n- **closeModal()** - Closes the modal programmatically\n\n### **Slots:**\n - **default** - Default content of the dialog\n- **header** - Slot for the header content\n- **footer** - Slot for the footer content",
      "attributes": [
        {
          "name": "open",
          "description": "Whether the dialog is open",
          "values": []
        },
        {
          "name": "size",
          "description": "The size of the dialog",
          "values": [
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "variant",
          "description": "The variant of the dialog",
          "values": [
            { "name": "modal" },
            { "name": "menu" },
            { "name": "promotion" }
          ]
        },
        {
          "name": "hideTitle",
          "description": "Whether to hide the title",
          "values": []
        },
        {
          "name": "closable",
          "description": "Whether the dialog has close button in header",
          "values": []
        },
        {
          "name": "modal",
          "description": "Whether the dialog is modal",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-dialog--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/dialog"
        }
      ]
    },
    {
      "name": "m-promotion-dialog",
      "description": "Dialog for promoting product-led features and services.\n---\n\n\n### **Events:**\n - **close** - Event fired when the dialog is closed\n\n### **Public Methods:**\n - **openModal()** - Shows the modal programmatically\n- **closeModal()** - Closes the modal programmatically\n\n### **Slots:**\n - **default** - Default content of the dialog\n- **header** - Slot for the header content\n- **footer** - Slot for the footer content",
      "attributes": [
        {
          "name": "open",
          "description": "Whether the dialog is open",
          "values": []
        },
        {
          "name": "size",
          "description": "The size of the dialog",
          "values": [
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" }
          ]
        },
        {
          "name": "variant",
          "description": "The variant of the dialog",
          "values": [
            { "name": "modal" },
            { "name": "menu" },
            { "name": "promotion" }
          ]
        },
        {
          "name": "hideTitle",
          "description": "Whether to hide the title",
          "values": []
        },
        {
          "name": "closable",
          "description": "Whether the dialog has close button in header",
          "values": []
        },
        {
          "name": "modal",
          "description": "Whether the dialog is modal",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-promotion-dialog--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/promotion-dialog"
        }
      ]
    },
    {
      "name": "m-app-menu",
      "description": "Enable seamless navigation between different applications within our product ecosystem\n<br/><br/>\nAlso check out patterns from [Discovery & Engagement →](?path=/docs/patterns-discovery-engagement--docs)\n---\n\n\n### **Events:**\n - **app-selected**\n- **close** - Fired when the modal is closed\n\n### **Slots:**\n - **default** - Default content of the app menu\n- **footer** - Footer content of the app menu\n- **activator** - Custom element that triggers the app menu (defaults to a button with dots icon)",
      "attributes": [
        {
          "name": "open",
          "description": "Controls whether the modal is open",
          "values": []
        },
        {
          "name": "items",
          "description": "The items to display in the app menu",
          "values": [{ "name": "AppMenuItems" }]
        },
        {
          "name": "position",
          "values": [{ "name": "bottom" }, { "name": "right" }]
        },
        { "name": "disabled", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-app-menu--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/app-menu"
        }
      ]
    },
    {
      "name": "m-feedback-dialog",
      "description": "Collects structured user feedback with topic selection and description.\n---\n\n\n### **Events:**\n - **close**\n- **feedback-submit**\n- **feedback-error**",
      "attributes": [
        { "name": "options", "values": [{ "name": "FeedbackDialogOptions" }] },
        { "name": "open", "values": [] },
        { "name": "loading", "values": [] },
        { "name": "submitted", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-feedback-dialog--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/feedback-dialog"
        }
      ]
    },
    {
      "name": "m-app-promotion",
      "description": "Promotion banner supporting product-led growth and feature discovery.\n---\n\n\n### **Slots:**\n - **heading** - Heading content with appropriate level\n- **image** - Image to display in the banner\n- **default** - Default content of the element\n- **actions** - Actions to display in the banner",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-app-promotion--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/app-promotion"
        }
      ]
    },
    {
      "name": "m-progress-bar",
      "description": "Visual indicator showing task or process completion progress.\n---\n\n\n### **Slots:**\n - **icon** - Optional icon content\n- **text** - Optional text content",
      "attributes": [
        {
          "name": "value",
          "description": "Current progress value (0-100)",
          "values": []
        },
        {
          "name": "striped",
          "description": "Whether to show striped pattern",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-progress-bar--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/progress-bar"
        }
      ]
    },
    {
      "name": "m-stepper",
      "description": "Displays progress through a sequence of steps.\n---\n\n\n### **Slots:**\n - **default** - Default slot for step items (li elements or m-stepper-step components)",
      "attributes": [
        {
          "name": "label",
          "description": "Accessible label for the stepper",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-stepper--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/stepper"
        }
      ]
    },
    {
      "name": "m-stepper-step",
      "description": "Represents an individual step with name and status.\n---\n\n\n### **Slots:**\n - **name** - Slot for step name/title\n- **status** - Slot for step status/description",
      "attributes": [
        {
          "name": "step",
          "description": "Step number (1-based)",
          "values": []
        },
        {
          "name": "active",
          "description": "Whether this step is currently active",
          "values": []
        },
        {
          "name": "completed",
          "description": "Whether this step has been completed",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-stepper-step--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/stepper-step"
        }
      ]
    },
    {
      "name": "m-hero",
      "description": "Vertical layout component with centered, prominent content.\n---\n\n\n### **Slots:**\n - **header** - Header content of the hero\n- **default** - Default content of the hero (main content)\n- **action** - Action content of the hero (buttons, links, etc.)\n- **footer** - Footer content of the hero",
      "attributes": [
        {
          "name": "size",
          "description": "The width of the hero content.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-hero--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/hero"
        }
      ]
    },
    {
      "name": "m-form",
      "description": "Wraps inputs to manage validation, submission, and reset behavior.\n---\n\n\n### **Events:**\n - **form-error** - Emitted when form validation fails.\n- **form-submit** - Emitted when the form is successfully submitted with validated data.\n- **form-reset** - Emitted when the form is reset to its initial state.\n\n### **Public Methods:**\n - **handleSubmit(event: _SubmitEvent_): _void_** - Handles form submission.\nIf action is set, allows native form submission.\nOtherwise emits a `form-submit` event with collected data if validation passes.\nEmits a `form-error` event if validation fails.\n- **handleReset(): _void_** - Resets all inputs to their initial values and clears any validation errors.\nEmits a `form-reset` event.",
      "attributes": [
        { "name": "sr-label", "values": [] },
        { "name": "action", "values": [] },
        { "name": "method", "values": [{ "name": "get" }, { "name": "post" }] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-form--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/form"
        }
      ]
    },
    {
      "name": "m-fieldset",
      "description": "Groups related form controls with optional legend for accessibility.\n---\n\n\n### **Slots:**\n - **legend** - Content for the fieldset legend\n- **default** - Main content of the fieldset (form inputs)",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-fieldset--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/fieldset"
        }
      ]
    },
    {
      "name": "m-input-group",
      "description": "Provides shared structure and layout for input components.\n---\n\n\n### **Events:**\n - **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input\n\n### **Slots:**\n - **label** - Content for the label\n- **description** - Content for the description\n- **input** - The actual input element\n- **hint** - Content for the hint\n- **error** - Content for the error message\n- **icon** - Icon to display before the input\n- **button** - Optional trailing button (e.g. in input-with-button pattern)",
      "attributes": [
        { "name": "label", "description": "The label text", "values": [] },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "description",
          "description": "Description text below the label",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text shown below the input",
          "values": []
        },
        {
          "name": "error",
          "description": "Error message to display",
          "values": []
        },
        {
          "name": "required",
          "description": "Whether the input is required",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether to visually hide the label",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether to use horizontal layout",
          "values": []
        },
        {
          "name": "noGap",
          "description": "Whether to remove the gap between elements",
          "values": []
        },
        {
          "name": "messagesIndented",
          "description": "Whether to align messages with the label",
          "values": []
        },
        {
          "name": "reversed",
          "description": "Whether to reverse the layout order",
          "values": []
        },
        {
          "name": "componentType",
          "description": "Type of component for styling purposes",
          "values": []
        },
        {
          "name": "fieldset",
          "description": "Whether to render a native fieldset/legend instead of label container",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-input-group--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/input-group"
        }
      ]
    },
    {
      "name": "m-checkbox",
      "description": "Allows selecting one or more options from a list.\n---\n\n\n### **Events:**\n - **change**\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **checkValidity(): _boolean_** - Validates the checkbox by checking if it meets the required constraint.\n- **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input\n\n### **Slots:**\n - **label** - Default content of the checkbox, the text for action",
      "attributes": [
        {
          "name": "label",
          "description": "The label for the checkbox",
          "values": []
        },
        {
          "name": "hint",
          "description": "The hint for the checkbox",
          "values": []
        },
        {
          "name": "error",
          "description": "The error for the checkbox",
          "values": []
        },
        {
          "name": "checked",
          "description": "Whether the checkbox is checked",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the checkbox is readonly",
          "values": []
        },
        {
          "name": "required",
          "description": "Whether the checkbox is required",
          "values": []
        },
        {
          "name": "indeterminate",
          "description": "Whether the checkbox is indeterminate",
          "values": []
        },
        {
          "name": "description",
          "description": "The description for the checkbox",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the checkbox is disabled",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the checkbox is full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the checkbox is horizontal",
          "values": []
        },
        {
          "name": "return-value-checked",
          "description": "Custom return value when checkbox is checked (useful for Rails and similar frameworks)",
          "values": []
        },
        {
          "name": "return-value-unchecked",
          "description": "Custom return value when checkbox is unchecked (useful for Rails and similar frameworks)",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-checkbox--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/checkbox"
        }
      ]
    },
    {
      "name": "m-checkbox-group",
      "description": "Groups related checkboxes into a single logical unit.\n---\n\n\n### **Events:**\n - **change**\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validates the checkbox group state and sets a custom error message if invalid.\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input\n\n### **Slots:**\n - **default** - Content for the checkbox group",
      "attributes": [
        {
          "name": "items",
          "description": "Array of checkbox items to display",
          "values": [{ "name": "CheckboxItem[]" }]
        },
        {
          "name": "name",
          "description": "Name attribute for the checkbox group",
          "values": []
        },
        {
          "name": "label",
          "description": "Label for the checkbox group",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text for the checkbox group",
          "values": []
        },
        {
          "name": "error",
          "description": "Error message for the checkbox group",
          "values": []
        },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        { "name": "required", "values": [] },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-checkbox-group--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/checkbox-group"
        }
      ]
    },
    {
      "name": "m-radio",
      "description": "Single-selection input option used within a radio group.\n---\n\n\n### **Events:**\n - **change**\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validates the radio button state and sets a custom error message if invalid.\n- **checkValidity(): _boolean_** - Validates the radio button by checking if it meets the required constraint.\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        { "name": "label", "values": [] },
        {
          "name": "hint",
          "description": "Hint text for the input",
          "values": []
        },
        { "name": "error", "values": [] },
        { "name": "checked", "values": [] },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        { "name": "required", "values": [] },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-radio--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/radio"
        }
      ]
    },
    {
      "name": "m-radio-group",
      "description": "Groups radio buttons to enforce single-option selection.\n---\n\n\n### **Events:**\n - **change**\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        { "name": "label", "values": [] },
        {
          "name": "hint",
          "description": "Hint text for the input",
          "values": []
        },
        { "name": "error", "values": [] },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        { "name": "required", "values": [] },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        { "name": "items", "values": [{ "name": "RadioItem[]" }] },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-radio-group--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/radio-group"
        }
      ]
    },
    {
      "name": "m-select",
      "description": "Dropdown input for selecting one option from a list.\n---\n\n\n### **Events:**\n - **change**\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        { "name": "label", "values": [] },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        },
        { "name": "required", "values": [] },
        {
          "name": "hint",
          "description": "Hint text for the input",
          "values": []
        },
        { "name": "error", "values": [] },
        { "name": "icon", "values": [] },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-select--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/select"
        }
      ]
    },
    {
      "name": "m-textarea",
      "description": "Multi-line text input for longer user-entered content.\n---\n\n\n### **Events:**\n - **input** - Fired as the user types into the input.\n- **blur**\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        { "name": "label", "values": [] },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text for the input",
          "values": []
        },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        { "name": "required", "values": [] },
        {
          "name": "disabled",
          "description": "Whether the textarea is disabled",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        },
        { "name": "error", "values": [] },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-textarea--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/textarea"
        }
      ]
    },
    {
      "name": "m-input-text",
      "description": "Single-line text input field for short user input.\n---\n\n\n### **Events:**\n - **input** - Fired as the user types into the input.\n- **blur**\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input's value.\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        {
          "name": "type",
          "description": "The type of input (text, email, password, etc.)",
          "values": []
        },
        {
          "name": "pattern",
          "description": "The pattern attribute for validation",
          "values": []
        },
        {
          "name": "label",
          "description": "Label text for the input",
          "values": []
        },
        { "name": "name", "description": "Name of the input", "values": [] },
        {
          "name": "description",
          "description": "Description text below the label",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text shown below the input",
          "values": []
        },
        {
          "name": "required",
          "description": "Whether the input is required",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether to visually hide the label",
          "values": []
        },
        {
          "name": "error",
          "description": "Error message to display",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether to use horizontal layout",
          "values": []
        },
        { "name": "autocomplete", "values": [] },
        {
          "name": "icon",
          "description": "Icon name to display before the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-input-text--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/input-text"
        }
      ]
    },
    {
      "name": "m-password",
      "description": "Password input field with optional show and hide functionality.\n---\n\n\n### **Events:**\n - **action-click**\n- **input** - Fired as the user types into the input.\n- **blur**\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        {
          "name": "label",
          "description": "Label text for the input",
          "values": []
        },
        { "name": "name", "description": "Name of the input", "values": [] },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text shown below the input",
          "values": []
        },
        {
          "name": "error",
          "description": "Error message to display",
          "values": []
        },
        {
          "name": "required",
          "description": "Whether the input is required",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether to visually hide the label",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        {
          "name": "autocomplete",
          "description": "The autocomplete attribute for the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-password--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/password"
        }
      ]
    },
    {
      "name": "m-datepicker",
      "description": "Date selection input with calendar popover and trigger button.\n---\n\n\n### **Events:**\n - **input** - Fired as the user types into the input.\n- **blur**\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        {
          "name": "buttonIcon",
          "description": "Icon name for the calendar button",
          "values": [{ "name": "String" }]
        },
        {
          "name": "buttonAriaLabel",
          "description": "Aria label for the calendar button",
          "values": [{ "name": "String" }]
        },
        {
          "name": "locale",
          "description": "Locale for the datepicker",
          "values": [{ "name": "String" }]
        },
        { "name": "format", "values": [] },
        { "name": "min", "values": [] },
        { "name": "max", "values": [] },
        { "name": "show-title", "values": [] },
        {
          "name": "required",
          "description": "Whether the input is required",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text for the input",
          "values": []
        },
        {
          "name": "error",
          "description": "Error message to display",
          "values": []
        },
        {
          "name": "label",
          "description": "Label text for the input",
          "values": []
        },
        {
          "name": "type",
          "description": "The type of input (text, email, password, etc.)",
          "values": []
        },
        {
          "name": "pattern",
          "description": "The pattern attribute for validation",
          "values": []
        },
        { "name": "autocomplete", "values": [] },
        {
          "name": "icon",
          "description": "Icon name to display before the input",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-datepicker--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/datepicker"
        }
      ]
    },
    {
      "name": "m-input-month",
      "description": "Input control for selecting a month and year.\n---\n\n\n### **Events:**\n - **change**\n- **blur**\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input's value.\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        {
          "name": "label",
          "description": "Label text for the input",
          "values": []
        },
        { "name": "name", "description": "Name of the input", "values": [] },
        {
          "name": "description",
          "description": "Description text below the label",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text shown below the input",
          "values": []
        },
        {
          "name": "required",
          "description": "Whether the input is required",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether to visually hide the label",
          "values": []
        },
        {
          "name": "error",
          "description": "Error message to display",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether to use horizontal layout",
          "values": []
        },
        {
          "name": "min",
          "description": "Minimum date in ISO YYYY-MM format (default: \"2000-01\")",
          "values": []
        },
        {
          "name": "max",
          "description": "Maximum date in ISO YYYY-MM format (default: \"2040-01\")",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-input-month--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/input-month"
        }
      ]
    },
    {
      "name": "m-toggle",
      "description": "Switch control for toggling a boolean setting on or off.\n---\n\n\n### **Events:**\n - **change** - Fired when the toggle state changes, with `detail.checked` indicating the new state\n- **input** - Fired as the user types into the input.\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input\n\n### **Slots:**\n - **default** - Default content of the element (used as the label)",
      "attributes": [
        {
          "name": "checked",
          "description": "Whether the toggle is checked or not",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the toggle is disabled",
          "values": []
        },
        {
          "name": "reversed",
          "description": "Whether the toggle's label appears before the switch. For accessibility, it's recommended to place labels to the right of toggles (default position) as this follows the natural reading direction and makes it easier for users to scan form controls.",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label should be visually hidden",
          "values": []
        },
        {
          "name": "label",
          "description": "The label text for the toggle",
          "values": []
        },
        {
          "name": "value",
          "description": "The value associated with the toggle",
          "values": []
        },
        {
          "name": "description",
          "description": "The description text for the toggle",
          "values": []
        },
        {
          "name": "hint",
          "description": "The hint text for the toggle",
          "values": []
        },
        {
          "name": "error",
          "description": "The error text for the toggle",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        { "name": "required", "values": [] },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-toggle--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/toggle"
        }
      ]
    },
    {
      "name": "m-box",
      "description": "Flexible container component for layout structure and spacing control.\n---\n\n\n### **Slots:**\n - **default** - Default content inside the box",
      "attributes": [
        {
          "name": "border",
          "description": "Whether the box has a border",
          "values": [
            { "name": "transparent" },
            { "name": "none" },
            { "name": "weak" }
          ]
        },
        {
          "name": "shadow",
          "description": "Whether the box has a shadow",
          "values": []
        },
        {
          "name": "borderRadius",
          "description": "Whether the box has rounded corners",
          "values": []
        },
        {
          "name": "spacing",
          "description": "The padding inside the box (e.g., \"none\", \"xs\", \"s\", \"m\", \"l\", \"xl\", \"xxl\")",
          "values": [
            { "name": "none" },
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" },
            { "name": "xxl" }
          ]
        },
        {
          "name": "width",
          "description": "The maximum width of the box (e.g., \"default\", \"narrow\", \"medium\", \"wide\")",
          "values": [
            { "name": "default" },
            { "name": "narrow" },
            { "name": "medium" },
            { "name": "wide" }
          ]
        },
        {
          "name": "background",
          "description": "The background style of the box (e.g., \"default\", \"raised\", \"transparent\")",
          "values": []
        },
        { "name": "fullWidth", "values": [] },
        { "name": "horizontal", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-box--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/box"
        }
      ]
    },
    {
      "name": "m-divider",
      "description": "Horizontal separator used to visually divide content sections.\n---\n",
      "attributes": [
        {
          "name": "spacing-top",
          "description": "The spacing at the top of the divider (e.g., \"none\", \"xs\", \"s\", \"m\", \"l\", \"xl\", \"xxl\")",
          "values": [
            { "name": "none" },
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" },
            { "name": "xxl" }
          ]
        },
        {
          "name": "spacing-bottom",
          "description": "The spacing at the bottom of the divider (e.g., \"none\", \"xs\", \"s\", \"m\", \"l\", \"xl\", \"xxl\")",
          "values": [
            { "name": "none" },
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "s" },
            { "name": "m" },
            { "name": "l" },
            { "name": "xl" },
            { "name": "xxl" }
          ]
        },
        {
          "name": "color",
          "description": "The color variant of the divider (e.g., \"default\", \"weak\")",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-divider--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/divider"
        }
      ]
    },
    {
      "name": "m-icon-list",
      "description": "Displays a list of items paired with icons.\n---\n\n\n### **Slots:**\n - **default** - Default slot for m-icon-list-item elements",
      "attributes": [
        {
          "name": "label",
          "description": "Accessible label for the list",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-icon-list--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/icon-list"
        }
      ]
    },
    {
      "name": "m-icon-list-item",
      "description": "IconListItem component for displaying an item with an icon\n---\n\n\n### **Slots:**\n - **default** - Default slot for content",
      "attributes": [
        {
          "name": "icon",
          "description": "Name of the icon to display",
          "values": [{ "name": "IconName" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-icon-list-item--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/icon-list-item"
        }
      ]
    },
    {
      "name": "m-box-link",
      "description": "Displays a linked item intended for use within a BoxLinkGroup.\n---\n\n\n### **Slots:**\n - **title** - Content for the title (preferably a heading element)\n- **description** - Content for the description",
      "attributes": [
        {
          "name": "href",
          "description": "URL to navigate to when clicked",
          "values": []
        },
        {
          "name": "size",
          "description": "Size of the box link (m or l)",
          "values": [{ "name": "s" }, { "name": "m" }, { "name": "l" }]
        },
        {
          "name": "icon",
          "description": "Icon to display in the box link",
          "values": [{ "name": "IconName" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-box-link--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/box-link"
        }
      ]
    },
    {
      "name": "m-box-link-group",
      "description": "Container component for grouping related BoxLink items.\n---\n\n\n### **Slots:**\n - **default** - Content inside the group, only m-box-link elements are allowed at the moment",
      "attributes": [
        {
          "name": "aria-label",
          "description": "The aria-label for the group",
          "values": []
        },
        {
          "name": "role",
          "description": "The role for the group, defaults to \"list\"",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-box-link-group--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/box-link-group"
        }
      ]
    },
    {
      "name": "m-description-list",
      "description": "Displays label–value pairs in flexible layout variants.\n---\n\n\n### **Slots:**\n - _default_ - Default slot for dt/dd elements or m-description-list-item components",
      "attributes": [
        {
          "name": "labelHidden",
          "description": "Hide labels visually while keeping them accessible to screen readers",
          "values": []
        },
        {
          "name": "variant",
          "description": "Layout variant - determines how items are displayed",
          "values": [
            { "name": "vertical" },
            { "name": "grid" },
            { "name": "stat" }
          ]
        },
        {
          "name": "columns",
          "description": "Number of columns for grid/stat variants (1-6)",
          "values": []
        },
        {
          "name": "bordered",
          "description": "Add borders for grid/stat variants",
          "values": []
        },
        {
          "name": "spacing",
          "description": "Spacing variant - determines the spacing between items",
          "values": [{ "name": "s" }, { "name": "m" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-description-list--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/description-list"
        }
      ]
    },
    {
      "name": "m-description-list-item",
      "description": "Displays a single label–value pair within a description list.\n---\n",
      "attributes": [
        { "name": "label", "values": [] },
        { "name": "value", "values": [] },
        { "name": "span", "values": [] },
        {
          "name": "align",
          "values": [
            { "name": "start" },
            { "name": "center" },
            { "name": "end" }
          ]
        },
        { "name": "nowrap", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-description-list-item--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/description-list-item"
        }
      ]
    },
    {
      "name": "m-list",
      "description": "Displays ordered or unordered lists of items.\n---\n\n\n### **Slots:**\n - **default** - Default slot for native ul/ol elements with li children",
      "attributes": [
        {
          "name": "label",
          "description": "Accessible label for the list",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-list--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/list"
        }
      ]
    },
    {
      "name": "m-data-list",
      "description": "Displays a structured list of related data items.\n---\n\n\n### **Slots:**\n - **default** - Default slot for m-data-list-item elements",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-data-list--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/data-list"
        }
      ]
    },
    {
      "name": "m-data-list-item",
      "description": "Represents a single item within a DataList.\n---\n\n\n### **Slots:**\n - **start** - Start content (e.g., avatar)\n- **title** - Title text\n- **description** - Description text\n- **end** - End content (e.g., action buttons)\n- **footer** - Footer content (e.g., banner, additional info) - takes full width and appears below other content",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-data-list-item--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/data-list-item"
        }
      ]
    },
    {
      "name": "m-product-lead-form",
      "description": "Form for collecting and contacting product leads.\n---\n\n\n### **Events:**\n - **form-ready** - Fired when the form is loaded and ready\n- **form-submit** - Fired when the form is submitted\n- **form-submitted** - Fired when the form submission is completed\n- **form-error** - Fired if there's an error loading the form",
      "attributes": [
        {
          "name": "id",
          "description": "Unique identifier for the form container",
          "values": []
        },
        {
          "name": "formId",
          "description": "The HubSpot form ID to display",
          "values": []
        },
        {
          "name": "email",
          "description": "Prepopulated email address",
          "values": []
        },
        {
          "name": "company",
          "description": "Prepopulated company name",
          "values": []
        },
        {
          "name": "country",
          "description": "Prepopulated country",
          "values": []
        },
        {
          "name": "origin",
          "description": "The environment the form is loaded in",
          "values": []
        },
        {
          "name": "target",
          "description": "The target product of the form",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-product-lead-form--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/product-lead-form"
        }
      ]
    },
    {
      "name": "m-user-menu",
      "description": "Dropdown menu providing user-related actions and options.\n---\n\n\n### **Slots:**\n - **trigger** - Custom trigger element (defaults to avatar with initials)\n- **header** - Custom header content to be shown at the top of the menu\n- **content** - Custom content for the menu (after menu items)\n- **buttons** - Custom menu buttons to replace the default items",
      "attributes": [
        {
          "name": "initials",
          "description": "User's initials to display in the avatar (max 2 characters)",
          "values": []
        },
        { "name": "title", "description": "Title of the menu", "values": [] },
        {
          "name": "items",
          "description": "Array of menu items to display",
          "values": [{ "name": "MenuItem[]" }]
        },
        {
          "name": "placement",
          "description": "The preferred placement of the menu",
          "values": [
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "bottom-start" },
            { "name": "bottom-end" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-user-menu--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/user-menu"
        }
      ]
    },
    {
      "name": "m-action-input",
      "description": "Base component for input fields with an attached button\n---\n\n\n### **Events:**\n - **action-click**\n- **input** - Fired as the user types into the input.\n- **blur**\n\n### **Public Methods:**\n - **validate(): _boolean_** - Validate the input value based on attribute required (for now)\n- **focus(): _void_** - Focus the input element, traversing Shadow DOM if necessary.\n- **getDescribedBy(name: _string_): _string_** - Get the IDs of elements that describe this input",
      "attributes": [
        { "name": "buttonIcon", "values": [] },
        { "name": "buttonAriaLabel", "values": [] },
        { "name": "inputType", "values": [] },
        {
          "name": "disabled",
          "description": "Whether the input is disabled",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the input",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the input",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the input is readonly",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Input placeholder text",
          "values": []
        },
        {
          "name": "description",
          "description": "Description text for the input",
          "values": []
        },
        {
          "name": "hint",
          "description": "Hint text for the input",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the input should take full width",
          "values": []
        },
        {
          "name": "horizontal",
          "description": "Whether the layout should be horizontal",
          "values": []
        },
        {
          "name": "labelHidden",
          "description": "Whether the label is hidden",
          "values": []
        },
        {
          "name": "error",
          "description": "Error message to display",
          "values": []
        },
        {
          "name": "required",
          "description": "Whether the input is required",
          "values": []
        },
        {
          "name": "label",
          "description": "Label text for the input",
          "values": []
        },
        {
          "name": "type",
          "description": "The type of input (text, email, password, etc.)",
          "values": []
        },
        {
          "name": "pattern",
          "description": "The pattern attribute for validation",
          "values": []
        },
        { "name": "autocomplete", "values": [] },
        {
          "name": "icon",
          "description": "Icon name to display before the input",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://grade.design/?path=/docs/components-action-input--docs"
        },
        {
          "name": "Source",
          "url": "https://gradegroup.ghe.com/mark/mark/tree/main/packages/ui/src/components/action-input"
        }
      ]
    }
  ]
}