component-catalog.json

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "version": "0.41.0",
  "description": "Machine-readable catalog of Fundamental Library Styles components",
  "generatedBy": "scripts/generate-ai-metadata.js",
  "relatedFiles": {
    "accessibility": "docs/accessibility.json",
    "designTokens": "docs/design-tokens.json",
    "htmlExamples": "docs/html-examples.json",
    "modifierRules": "docs/modifier-rules.json",
    "utilityClasses": "docs/utility-classes.json",
    "relationships": "docs/component-relationships.json",
    "schemas": "docs/schemas/{component}.schema.json"
  },
  "packages": {
    "fundamental-styles": {
      "name": "fundamental-styles",
      "description": "Main component library with 117+ UI components",
      "npmPackage": "fundamental-styles",
      "repository": "https://github.com/SAP/fundamental-styles",
      "documentation": "https://sap.github.io/fundamental-styles/",
      "components": [
        {
          "id": "action-bar",
          "name": "Action Bar",
          "description": "The action bar displays at the top of the page, and includes the page’s title, description, back button and action buttons.",
          "baseClass": "fd-action-bar",
          "cssImport": "fundamental-styles/dist/action-bar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-action-bar",
          "modifiers": [
            {
              "class": "fd-action-bar--back",
              "description": "back variant"
            },
            {
              "class": "fd-action-bar--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-action-bar--s",
              "description": "s variant"
            },
            {
              "class": "fd-action-bar--md",
              "description": "md variant"
            },
            {
              "class": "fd-action-bar--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-action-bar--m",
              "description": "m variant"
            },
            {
              "class": "fd-action-bar--xl",
              "description": "xl variant"
            }
          ],
          "elements": [
            {
              "class": "fd-action-bar__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-action-bar__back",
              "description": "back element",
              "modifiers": []
            },
            {
              "class": "fd-action-bar__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-action-bar__description",
              "description": "description element",
              "modifiers": [
                {
                  "class": "fd-action-bar__description--back",
                  "description": "back variant of description"
                }
              ]
            },
            {
              "class": "fd-action-bar__actions",
              "description": "actions element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdActionBarInlinePadding"
          ],
          "tags": [
            "non-f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "actions",
            "back-btn-no-description",
            "back-btn",
            "long-title-description",
            "mobile",
            "no-back-btn",
            "responsive-l",
            "responsive-xl"
          ],
          "category": "toolbars",
          "subcategory": null,
          "useCases": [
            "Page-level toolbar at top of content area",
            "Display page title with back navigation",
            "Container for page-level action buttons",
            "Show contextual actions for the current view"
          ],
          "avoidWhen": [
            "App-level navigation (use shellbar)",
            "Table/list row actions (use toolbar)",
            "Form actions (use bar with footer mode)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "bar",
            "toolbar",
            "shellbar"
          ],
          "dependencies": []
        },
        {
          "id": "action-sheet",
          "name": "Action Sheet",
          "description": "An action sheet consists of a list of options a user can select from to complete an action. Actions can be",
          "baseClass": "fd-action-sheet",
          "cssImport": "fundamental-styles/dist/action-sheet.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-action-sheet",
          "modifiers": [
            {
              "class": "fd-action-sheet--active",
              "description": "active variant"
            },
            {
              "class": "fd-action-sheet--mobile",
              "description": "mobile variant"
            }
          ],
          "elements": [
            {
              "class": "fd-action-sheet__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-action-sheet__wrapper",
              "description": "wrapper element",
              "modifiers": [
                {
                  "class": "fd-action-sheet__wrapper--active",
                  "description": "active variant of wrapper"
                }
              ]
            },
            {
              "class": "fd-action-sheet__title",
              "description": "title element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdActionSheet_Padding_Block",
            "--fdActionSheet_Padding_Inline",
            "--fdActionSheet_Item_Padding_Block",
            "--fdActionSheet_Item_Padding_Inline"
          ],
          "tags": [
            "a11y",
            "f3",
            "theme",
            "responsive"
          ],
          "examples": [
            "action-sheet-mobile",
            "default"
          ],
          "category": "toolbars",
          "subcategory": null,
          "useCases": [
            "Mobile-optimized action menu",
            "Bottom sheet with action options",
            "Touch-friendly action selection",
            "Overflow menu on mobile devices"
          ],
          "avoidWhen": [
            "Desktop applications (use menu or popover)",
            "Complex forms (use dialog)",
            "Navigation (use menu)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "menu",
            "popover",
            "dialog"
          ],
          "dependencies": []
        },
        {
          "id": "ai-busy-indicator",
          "name": "Ai Busy Indicator",
          "description": "Ai Busy Indicator component",
          "baseClass": "fd-ai-busy-indicator",
          "cssImport": "fundamental-styles/dist/ai-busy-indicator.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-ai-busy-indicator",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-ai-busy-indicator__text",
              "description": "text element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "ai-components",
          "subcategory": null,
          "useCases": [
            "AI processing indicator",
            "LLM response loading",
            "AI feature loading state",
            "Generative AI operations"
          ],
          "avoidWhen": [
            "Non-AI loading (use busy-indicator)",
            "Known progress (use progress-indicator)",
            "Page loading (use skeleton)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "busy-indicator",
            "ai-loading-bar"
          ],
          "dependencies": []
        },
        {
          "id": "ai-loading-bar",
          "name": "Ai Loading Bar",
          "description": "Ai Loading Bar component",
          "baseClass": "fd-ai-loading-bar",
          "cssImport": "fundamental-styles/dist/ai-loading-bar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-ai-loading-bar",
          "modifiers": [],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "ai-components",
          "subcategory": null,
          "useCases": [
            "AI content generation progress",
            "LLM streaming response",
            "AI processing with progress",
            "Generative AI loading bar"
          ],
          "avoidWhen": [
            "Non-AI progress (use progress-indicator)",
            "Indeterminate loading (use ai-busy-indicator)",
            "Quick operations (use busy-indicator)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "ai-busy-indicator",
            "progress-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "ai-text",
          "name": "Ai Text",
          "description": "Ai Text component",
          "baseClass": "fd-ai-text",
          "cssImport": "fundamental-styles/dist/ai-text.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-ai-text",
          "modifiers": [
            {
              "class": "fd-ai-text--loading",
              "description": "loading variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "ai-components",
          "subcategory": null,
          "useCases": [
            "AI-generated text display",
            "LLM response formatting",
            "Streaming text output",
            "AI content presentation"
          ],
          "avoidWhen": [
            "Regular text (use text)",
            "User input (use textarea)",
            "Code display (use code)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "text",
            "ai-writing-assistant"
          ],
          "dependencies": []
        },
        {
          "id": "ai-writing-assistant-versioning",
          "name": "Ai Writing Assistant Versioning",
          "description": "Ai Writing Assistant Versioning component",
          "baseClass": "fd-ai-writing-assistant-versioning",
          "cssImport": "fundamental-styles/dist/ai-writing-assistant-versioning.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-ai-writing-assistant-versioning",
          "modifiers": [],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "ai-components",
          "subcategory": null,
          "useCases": [],
          "avoidWhen": [],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [],
          "dependencies": []
        },
        {
          "id": "ai-writing-assistant",
          "name": "Ai Writing Assistant",
          "description": "Ai Writing Assistant component",
          "baseClass": "fd-ai-writing-assistant",
          "cssImport": "fundamental-styles/dist/ai-writing-assistant.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-ai-writing-assistant",
          "modifiers": [],
          "elements": [],
          "variables": [
            "--fdWriting_Assistant_Menu_Offset"
          ],
          "tags": [],
          "examples": [],
          "category": "ai-components",
          "subcategory": null,
          "useCases": [
            "AI writing suggestions",
            "Content assistance UI",
            "AI-powered text editor",
            "Writing enhancement tools"
          ],
          "avoidWhen": [
            "Simple text input (use textarea)",
            "AI status only (use ai-text)",
            "Non-writing AI features"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "ai-text",
            "prompt-input",
            "textarea"
          ],
          "dependencies": []
        },
        {
          "id": "alert",
          "name": "Alert",
          "category": "feedback",
          "subcategory": "messages",
          "description": "Important message banner for critical system messages",
          "baseClass": "fd-alert",
          "cssImport": "fundamental-styles/dist/alert.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-alert",
          "useCases": [
            "Display critical messages",
            "System notifications",
            "Important announcements",
            "Error notifications"
          ],
          "avoidWhen": [
            "Inline feedback (use message-strip)",
            "Temporary messages (use message-toast)"
          ],
          "modifiers": [
            {
              "class": "fd-alert--dismissible",
              "description": "dismissible variant"
            },
            {
              "class": "fd-alert--warning",
              "description": "warning variant"
            },
            {
              "class": "fd-alert--information",
              "description": "information variant"
            },
            {
              "class": "fd-alert--success",
              "description": "success variant"
            },
            {
              "class": "fd-alert--error",
              "description": "error variant"
            },
            {
              "class": "fd-alert--no-icon",
              "description": "no-icon variant"
            }
          ],
          "accessibility": {
            "role": "alert",
            "ariaAttributes": [
              "aria-live"
            ],
            "focusManagement": true
          },
          "relatedComponents": [
            "message-strip",
            "message-toast",
            "notification"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-alert__close",
              "description": "close element",
              "modifiers": []
            },
            {
              "class": "fd-alert__text",
              "description": "text element",
              "modifiers": []
            }
          ],
          "variables": [],
          "examples": []
        },
        {
          "id": "avatar-group",
          "name": "Avatar Group",
          "description": "The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, project team members, or a group of employees, for example. <br />",
          "baseClass": "fd-avatar",
          "cssImport": "fundamental-styles/dist/avatar-group.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-avatar-group",
          "modifiers": [
            {
              "class": "fd-avatar--no-padding",
              "description": "no-padding variant"
            },
            {
              "class": "fd-avatar--no-horizontal-scroll",
              "description": "no-horizontal-scroll variant"
            },
            {
              "class": "fd-avatar--no-vertical-scroll",
              "description": "no-vertical-scroll variant"
            },
            {
              "class": "fd-avatar--vertical",
              "description": "vertical variant"
            },
            {
              "class": "fd-avatar--individual-type",
              "description": "individual-type variant"
            },
            {
              "class": "fd-avatar--group-type",
              "description": "group-type variant"
            },
            {
              "class": "fd-avatar--md",
              "description": "md variant"
            },
            {
              "class": "fd-avatar--circle",
              "description": "circle variant"
            },
            {
              "class": "fd-avatar--accent-color-1",
              "description": "accent-color-1 variant"
            },
            {
              "class": "fd-avatar--accent-color-2",
              "description": "accent-color-2 variant"
            },
            {
              "class": "fd-avatar--thumbnail",
              "description": "thumbnail variant"
            },
            {
              "class": "fd-avatar--accent-color-3",
              "description": "accent-color-3 variant"
            },
            {
              "class": "fd-avatar--border",
              "description": "border variant"
            },
            {
              "class": "fd-avatar--overflow",
              "description": "overflow variant"
            },
            {
              "class": "fd-avatar--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-avatar--xs",
              "description": "xs variant"
            },
            {
              "class": "fd-avatar--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-avatar--xl",
              "description": "xl variant"
            },
            {
              "class": "fd-avatar--accent-color-5",
              "description": "accent-color-5 variant"
            },
            {
              "class": "fd-avatar--accent-color-8",
              "description": "accent-color-8 variant"
            },
            {
              "class": "fd-avatar--40",
              "description": "40 variant"
            },
            {
              "class": "fd-avatar--accent-color-4",
              "description": "accent-color-4 variant"
            },
            {
              "class": "fd-avatar--accent-color-6",
              "description": "accent-color-6 variant"
            },
            {
              "class": "fd-avatar--96",
              "description": "96 variant"
            },
            {
              "class": "fd-avatar--accent-color-7",
              "description": "accent-color-7 variant"
            },
            {
              "class": "fd-avatar--accent-color-9",
              "description": "accent-color-9 variant"
            },
            {
              "class": "fd-avatar--accent-color-10",
              "description": "accent-color-10 variant"
            },
            {
              "class": "fd-avatar--transparent",
              "description": "transparent variant"
            }
          ],
          "elements": [
            {
              "class": "fd-avatar__overflow-body",
              "description": "overflow-body element",
              "modifiers": []
            },
            {
              "class": "fd-avatar__popover-control",
              "description": "popover-control element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdAvatarGroupItemsSpacingX",
            "--fdAvatarGroupItemsSpacingY",
            "--fdAvatarGroup_Focus_Outline_Offset",
            "--fdAvatarGroup_Focus_Outline_Radius",
            "--fdAvatarGroupItemsGap",
            "--fdAvatarBorderColor",
            "--fdAvatarBorderHoverColor",
            "--fdAvatarBackgroundColor",
            "--fdAvatarHoverBackgroundColor",
            "--fdAvatarBorderActiveColor",
            "--fdAvatarBackgroundActiveColor",
            "--fdAvatarColor",
            "--fdAvatarActiveColor",
            "--fdAvatarBorderActiveHoverColor",
            "--fdAvatarBackgroundActiveHoverColor",
            "--fdAvatarActiveHoverColor"
          ],
          "tags": [],
          "examples": [
            "group-type-interaction-states",
            "group-type-vertical",
            "group-type",
            "individual-type-vertical",
            "individual-type",
            "overflow"
          ],
          "category": "visual",
          "subcategory": null,
          "useCases": [
            "Multiple user avatars",
            "Team member display",
            "Participant list preview",
            "Collaborative users indicator"
          ],
          "avoidWhen": [
            "Single user (use avatar)",
            "Full user list (use list)",
            "User selection (use tokenizer)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "avatar",
            "list"
          ],
          "dependencies": []
        },
        {
          "id": "avatar",
          "name": "Avatar",
          "category": "visual",
          "subcategory": "identity",
          "description": "User profile picture or initials display",
          "baseClass": "fd-avatar",
          "cssImport": "fundamental-styles/dist/avatar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-avatar",
          "useCases": [
            "Display user images",
            "Show user initials",
            "Represent users in UI",
            "Profile indicators"
          ],
          "modifiers": [
            {
              "class": "fd-avatar--interactive",
              "description": "interactive variant"
            },
            {
              "class": "fd-avatar--circle",
              "description": "circle variant"
            },
            {
              "class": "fd-avatar--background-contain",
              "description": "background-contain variant"
            },
            {
              "class": "fd-avatar--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-avatar--tile",
              "description": "tile variant"
            },
            {
              "class": "fd-avatar--placeholder",
              "description": "placeholder variant"
            },
            {
              "class": "fd-avatar--thumbnail",
              "description": "thumbnail variant"
            },
            {
              "class": "fd-avatar--border",
              "description": "border variant"
            },
            {
              "class": "fd-avatar--overflow",
              "description": "overflow variant"
            },
            {
              "class": "fd-avatar--shell",
              "description": "shell variant"
            },
            {
              "class": "fd-avatar--accent-color-1",
              "description": "accent-color-1 variant"
            },
            {
              "class": "fd-avatar--md",
              "description": "md variant"
            },
            {
              "class": "fd-avatar--accent-color-2",
              "description": "accent-color-2 variant"
            },
            {
              "class": "fd-avatar--accent-color-3",
              "description": "accent-color-3 variant"
            },
            {
              "class": "fd-avatar--accent-color-4",
              "description": "accent-color-4 variant"
            },
            {
              "class": "fd-avatar--accent-color-5",
              "description": "accent-color-5 variant"
            },
            {
              "class": "fd-avatar--accent-color-6",
              "description": "accent-color-6 variant"
            },
            {
              "class": "fd-avatar--accent-color-7",
              "description": "accent-color-7 variant"
            },
            {
              "class": "fd-avatar--accent-color-8",
              "description": "accent-color-8 variant"
            },
            {
              "class": "fd-avatar--accent-color-9",
              "description": "accent-color-9 variant"
            },
            {
              "class": "fd-avatar--accent-color-10",
              "description": "accent-color-10 variant"
            },
            {
              "class": "fd-avatar--indication-color-1",
              "description": "indication-color-1 variant"
            },
            {
              "class": "fd-avatar--indication-color-2",
              "description": "indication-color-2 variant"
            },
            {
              "class": "fd-avatar--indication-color-3",
              "description": "indication-color-3 variant"
            },
            {
              "class": "fd-avatar--indication-color-4",
              "description": "indication-color-4 variant"
            },
            {
              "class": "fd-avatar--indication-color-5",
              "description": "indication-color-5 variant"
            },
            {
              "class": "fd-avatar--indication-color-6",
              "description": "indication-color-6 variant"
            },
            {
              "class": "fd-avatar--indication-color-7",
              "description": "indication-color-7 variant"
            },
            {
              "class": "fd-avatar--indication-color-8",
              "description": "indication-color-8 variant"
            },
            {
              "class": "fd-avatar--indication-color-9",
              "description": "indication-color-9 variant"
            },
            {
              "class": "fd-avatar--indication-color-10",
              "description": "indication-color-10 variant"
            },
            {
              "class": "fd-avatar--xs",
              "description": "xs variant"
            },
            {
              "class": "fd-avatar--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-avatar--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-avatar--xl",
              "description": "xl variant"
            },
            {
              "class": "fd-avatar--s",
              "description": "s variant"
            },
            {
              "class": "fd-avatar--m",
              "description": "m variant"
            },
            {
              "class": "fd-avatar--l",
              "description": "l variant"
            },
            {
              "class": "fd-avatar--40",
              "description": "40 variant"
            },
            {
              "class": "fd-avatar--96",
              "description": "96 variant"
            }
          ],
          "accessibility": {
            "role": "img",
            "ariaAttributes": [
              "aria-label"
            ],
            "altTextRequired": true
          },
          "relatedComponents": [
            "avatar-group",
            "icon"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-avatar__zoom-icon",
              "description": "zoom-icon element",
              "modifiers": [
                {
                  "class": "fd-avatar__zoom-icon--indication-1",
                  "description": "indication-1 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-2",
                  "description": "indication-2 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-3",
                  "description": "indication-3 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-4",
                  "description": "indication-4 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-5",
                  "description": "indication-5 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-6",
                  "description": "indication-6 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-7",
                  "description": "indication-7 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-8",
                  "description": "indication-8 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-9",
                  "description": "indication-9 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--indication-10",
                  "description": "indication-10 variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--negative",
                  "description": "negative variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--caution",
                  "description": "caution variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--positive",
                  "description": "positive variant of zoom-icon"
                },
                {
                  "class": "fd-avatar__zoom-icon--information",
                  "description": "information variant of zoom-icon"
                }
              ]
            },
            {
              "class": "fd-avatar__icon",
              "description": "icon element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdAvatarZoomIconPosition",
            "--fdAvatar_Focus_Outline_Offset",
            "--fdAvatar_Focus_Outline_Radius",
            "--fdAvatarRatio",
            "--fdAvatarColor",
            "--fdAvatarFontSize",
            "--fdAvatarBoxShadow",
            "--fdAvatarTextShadow",
            "--fdAvatarBorderRadius",
            "--fdAvatarBackgroundSize",
            "--fdAvatarBackgroundColor",
            "--fdAvatarBorderWidth",
            "--fdAvatarBorderColor",
            "--fdAvatarBorderHoverColor",
            "--fdAvatarHoverBackgroundColor",
            "--fdAvatarBorderActiveColor",
            "--fdAvatarBackgroundActiveColor",
            "--fdAvatarActiveColor",
            "--fdAvatarBorderActiveHoverColor",
            "--fdAvatarBackgroundActiveHoverColor",
            "--fdAvatarActiveHoverColor",
            "--fdAvatarZoomIconColor",
            "--fdAvatarZoomIconBorderColor",
            "--fdAvatarZoomIconBackground",
            "--fdAvatarZoomIconDimensions",
            "--fdAvatarZoomIconFontSize",
            "--fdAvatar_Focus_Outline_Radius_Circle",
            "--fdAvatar_Thumbnail_BorderColor",
            "--fdAvatarHoverBorderColor",
            "--fdAvatar_Overflow_Border_Width",
            "--fdAvatarZoomIconOffset"
          ],
          "examples": [
            "accent-colors-shell-header-context",
            "accent-colors",
            "background-image",
            "borders",
            "circle",
            "icon",
            "indication-colors-badge",
            "initials",
            "interactive",
            "placeholder-background",
            "tile-icon-background",
            "transparent",
            "value-states",
            "zoom-icon"
          ],
          "avoidWhen": []
        },
        {
          "id": "badge",
          "name": "Badge",
          "description": "Badge component",
          "baseClass": "fd-badge",
          "cssImport": "fundamental-styles/dist/badge.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-badge",
          "modifiers": [
            {
              "class": "fd-badge--static",
              "description": "static variant"
            }
          ],
          "elements": [],
          "variables": [
            "--fdBadge_Border_Color"
          ],
          "tags": [],
          "examples": [],
          "category": "visual",
          "subcategory": null,
          "useCases": [
            "Notification count",
            "Status indicator",
            "New item marker",
            "Unread count display"
          ],
          "avoidWhen": [
            "Semantic status (use object-status)",
            "Colored labels (use info-label)",
            "Large numbers (use counter)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "counter",
            "info-label",
            "object-status"
          ],
          "dependencies": []
        },
        {
          "id": "bar",
          "name": "Bar",
          "description": "The Bar is a container primarily used for displaying titles, buttons, and input controls. It serves as the foundational design and functionality for page headers, footers, dialogs, and popovers that require a header and/or footer. A header can consist of just a title or a title with a navigation button (back or home) at the front. A subheader can also be included in the header design. Footers can be either fixed or floating. The buttons in the footer are intended for finalizing actions, following a primary-to-tertiary hierarchy, and should be positioned in the right area. <br><br>",
          "baseClass": "fd-bar",
          "cssImport": "fundamental-styles/dist/bar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-bar",
          "modifiers": [
            {
              "class": "fd-bar--stack-contents-vertically",
              "description": "stack-contents-vertically variant"
            },
            {
              "class": "fd-bar--responsive-paddings",
              "description": "responsive-paddings variant"
            },
            {
              "class": "fd-bar--header",
              "description": "header variant"
            },
            {
              "class": "fd-bar--subheader",
              "description": "subheader variant"
            },
            {
              "class": "fd-bar--header-with-subheader",
              "description": "header-with-subheader variant"
            },
            {
              "class": "fd-bar--footer",
              "description": "footer variant"
            },
            {
              "class": "fd-bar--floating-footer",
              "description": "floating-footer variant"
            },
            {
              "class": "fd-bar--growing",
              "description": "growing variant"
            },
            {
              "class": "fd-bar--page",
              "description": "page variant"
            },
            {
              "class": "fd-bar--home-page",
              "description": "home-page variant"
            },
            {
              "class": "fd-bar--page-s",
              "description": "page-s variant"
            },
            {
              "class": "fd-bar--page-sm",
              "description": "page-sm variant"
            },
            {
              "class": "fd-bar--home-page-s",
              "description": "home-page-s variant"
            },
            {
              "class": "fd-bar--home-page-sm",
              "description": "home-page-sm variant"
            },
            {
              "class": "fd-bar--page-m",
              "description": "page-m variant"
            },
            {
              "class": "fd-bar--home-page-m",
              "description": "home-page-m variant"
            },
            {
              "class": "fd-bar--page-md",
              "description": "page-md variant"
            },
            {
              "class": "fd-bar--home-page-md",
              "description": "home-page-md variant"
            },
            {
              "class": "fd-bar--page-xl",
              "description": "page-xl variant"
            },
            {
              "class": "fd-bar--home-page-xl",
              "description": "home-page-xl variant"
            },
            {
              "class": "fd-bar--initial-suggestion-title",
              "description": "initial-suggestion-title variant"
            },
            {
              "class": "fd-bar--initial-suggestion-subline",
              "description": "initial-suggestion-subline variant"
            }
          ],
          "elements": [
            {
              "class": "fd-bar__left",
              "description": "left element",
              "modifiers": []
            },
            {
              "class": "fd-bar__middle",
              "description": "middle element",
              "modifiers": []
            },
            {
              "class": "fd-bar__right",
              "description": "right element",
              "modifiers": []
            },
            {
              "class": "fd-bar__element",
              "description": "element element",
              "modifiers": [
                {
                  "class": "fd-bar__element--full-width",
                  "description": "full-width variant of element"
                }
              ]
            },
            {
              "class": "fd-bar__element--full-width",
              "description": "element--full-width element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdBar_Padding_X",
            "--fdBar_Floating_Footer_Offset_X",
            "--fdBar_Z_Index",
            "--fdBar_Height",
            "--fdBar_Padding_Top",
            "--fdBar_Padding_Bottom",
            "--fdBar_Border_Radius",
            "--fdBar_Floating_Footer_Offset_Y",
            "--fdBar_Shadow",
            "--fdBar_Background",
            "--fdBar_Element_Text_Color",
            "--fdBar_Element_Text_Font_Family",
            "--fdBar_Element_Text_Font_Size"
          ],
          "tags": [],
          "examples": [
            "default",
            "floating-footer",
            "footer",
            "header-with-subheader",
            "header",
            "responsive",
            "subheader"
          ],
          "category": "toolbars",
          "subcategory": null,
          "useCases": [
            "Header bar for dialogs and pages",
            "Footer bar with action buttons",
            "Subheader for additional context",
            "Container for title and actions"
          ],
          "avoidWhen": [
            "Main app navigation (use shellbar)",
            "Page-level actions outside dialog (use action-bar)",
            "Toolbar within content (use toolbar)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "action-bar",
            "toolbar",
            "shellbar"
          ],
          "dependencies": []
        },
        {
          "id": "breadcrumb",
          "name": "Breadcrumb",
          "description": "The breadcrumb component is a type of navigation that indicates the position of a page within the application’s page hierarchy. Users can navigate backward by selecting the previous pages in the navigation path.",
          "baseClass": "fd-breadcrumb",
          "cssImport": "fundamental-styles/dist/breadcrumb.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-breadcrumb",
          "modifiers": [
            {
              "class": "fd-breadcrumb--backslash",
              "description": "backslash variant"
            },
            {
              "class": "fd-breadcrumb--double-slash",
              "description": "double-slash variant"
            },
            {
              "class": "fd-breadcrumb--double-backslash",
              "description": "double-backslash variant"
            },
            {
              "class": "fd-breadcrumb--greater-than",
              "description": "greater-than variant"
            },
            {
              "class": "fd-breadcrumb--double-greater-than",
              "description": "double-greater-than variant"
            }
          ],
          "elements": [
            {
              "class": "fd-breadcrumb__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-breadcrumb__separator",
              "description": "separator element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdLink_Line_Height",
            "--fdBreadcrumb_Separator"
          ],
          "tags": [],
          "examples": [
            "current-item",
            "overflow",
            "standard",
            "styles"
          ],
          "category": "navigation",
          "subcategory": "hierarchical",
          "useCases": [
            "Show current location in hierarchy",
            "Enable navigation to parent pages",
            "Display path in multi-level apps",
            "Provide context in deep navigation"
          ],
          "avoidWhen": [
            "Single-level apps (not needed)",
            "Primary navigation (use side-nav)",
            "Tab-based navigation (use tabs)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "side-nav",
            "shellbar"
          ],
          "dependencies": []
        },
        {
          "id": "busy-indicator",
          "name": "Busy Indicator",
          "description": "The busy indicator component informs the user about an ongoing operation. Only one busy indicator should be shown at a time.",
          "baseClass": "fd-busy-indicator",
          "cssImport": "fundamental-styles/dist/busy-indicator.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-busy-indicator",
          "modifiers": [
            {
              "class": "fd-busy-indicator--contrast",
              "description": "contrast variant"
            },
            {
              "class": "fd-busy-indicator--m",
              "description": "m variant"
            },
            {
              "class": "fd-busy-indicator--l",
              "description": "l variant"
            }
          ],
          "elements": [
            {
              "class": "fd-busy-indicator__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-busy-indicator__circle",
              "description": "circle element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdBusy_Indicator_Dot_Color",
            "--fdBusy_Indicator_Dot_Contrast_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "busy-dialog",
            "contrast-mode",
            "extended-busy-indicator-inside-message-toast",
            "extended-busy-indicator",
            "standard"
          ],
          "category": "feedback",
          "subcategory": "loading",
          "useCases": [
            "Show loading state for async operations",
            "Indicate content is being fetched",
            "Block interaction during processing",
            "Display indeterminate progress"
          ],
          "avoidWhen": [
            "Known progress percentage (use progress-indicator)",
            "Page-level loading (use skeleton)",
            "Background operations (no indicator needed)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "progress-indicator",
            "skeleton",
            "ai-busy-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "button-split",
          "name": "Button Split",
          "description": "Button Split component",
          "baseClass": "fd-button-split",
          "cssImport": "fundamental-styles/dist/button-split.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-button-split",
          "modifiers": [
            {
              "class": "fd-button-split--emphasized",
              "description": "emphasized variant"
            },
            {
              "class": "fd-button-split--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-button-split--ghost",
              "description": "ghost variant"
            },
            {
              "class": "fd-button-split--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-button-split--negative",
              "description": "negative variant"
            },
            {
              "class": "fd-button-split--attention",
              "description": "attention variant"
            }
          ],
          "elements": [],
          "variables": [
            "--fdButton_Menu_Emphasized_Separator_Display",
            "--fdButton_Menu_Emphasized_Hover_Separator_Display",
            "--fdButton_Menu_Emphasized_Shadow_Color",
            "--fdButton_Menu_Transparent_Separator_Display",
            "--fdButton_Menu_Transparent_Border_Color",
            "--fdButton_Ghost_Background",
            "--fdButton_Menu_Separator_Display",
            "--fdButton_Menu_Positive_Shadow_Color",
            "--fdButton_Menu_Negative_Shadow_Color",
            "--fdButton_Menu_Attention_Shadow_Color",
            "--fdButtonSplit_Separator_Offset",
            "--fdButtonPrioritizedBorderColor",
            "--fdButton_Menu_Default_Shadow_Color",
            "--fdButton_Menu_Transparent_Separator_Height",
            "--fdButton_Split_Border_Color",
            "--fdButtonPrioritizedBackgroundColor",
            "--fdButton_Split_Background_Color",
            "--fdButton_Menu_Offset",
            "--fdButton_Border_Radius_Left",
            "--fdButton_Border_Radius_Outline_Left",
            "--fdButton_Border_Radius_Left_RTL",
            "--fdButton_Border_Radius_Outline_Left_RTL",
            "--fdButton_Border_Radius_Right",
            "--fdButton_Border_Radius_Outline_Right",
            "--fdButton_Border_Radius_Right_RTL",
            "--fdButton_Border_Radius_Outline_Right_RTL",
            "--fdButtonSplit_Text_Max_Width",
            "--fdButton_Menu_Emphasized_Margin",
            "--fdButton_Focus_Border_Radius",
            "--fdButton_Outline_Contrast"
          ],
          "tags": [],
          "examples": [
            "split-menu-button"
          ],
          "category": "buttons",
          "subcategory": "action",
          "useCases": [
            "Primary action with additional options",
            "Save with save-as dropdown",
            "Send with send options",
            "Default action plus alternatives"
          ],
          "avoidWhen": [
            "All actions equal priority (use segmented-button)",
            "Simple single action (use button)",
            "Menu trigger only (use menu button)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "button",
            "segmented-button",
            "menu"
          ],
          "dependencies": []
        },
        {
          "id": "button",
          "name": "Button",
          "category": "interactive",
          "subcategory": "buttons",
          "description": "Action trigger with multiple styles for different semantic meanings",
          "baseClass": "fd-button",
          "cssImport": "fundamental-styles/dist/button.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-button",
          "useCases": [
            "Trigger actions",
            "Submit forms",
            "Open dialogs",
            "Primary and secondary actions"
          ],
          "avoidWhen": [
            "Navigating to a different page (use link instead)"
          ],
          "modifiers": [
            {
              "class": "fd-button--attention",
              "description": "attention variant"
            },
            {
              "class": "fd-button--menu",
              "description": "menu variant"
            },
            {
              "class": "fd-button--full-width",
              "description": "full-width variant"
            },
            {
              "class": "fd-button--text-alignment",
              "description": "text-alignment variant"
            },
            {
              "class": "fd-button--decisive",
              "description": "decisive variant"
            },
            {
              "class": "fd-button--tool-header",
              "description": "tool-header variant"
            },
            {
              "class": "fd-button--nested",
              "description": "nested variant"
            },
            {
              "class": "fd-button--nested-square",
              "description": "nested-square variant"
            },
            {
              "class": "fd-button--emphasized",
              "description": "emphasized variant"
            },
            {
              "class": "fd-button--negative",
              "description": "negative variant"
            },
            {
              "class": "fd-button--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-button--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-button--ghost",
              "description": "ghost variant"
            },
            {
              "class": "fd-button--toggled",
              "description": "toggled variant"
            },
            {
              "class": "fd-button--compact",
              "description": "compact variant"
            }
          ],
          "elements": [
            {
              "class": "fd-button__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-button__badge",
              "description": "badge element",
              "modifiers": [
                {
                  "class": "fd-button__badge--attention",
                  "description": "attention variant of badge"
                }
              ]
            },
            {
              "class": "fd-button__instructions",
              "description": "instructions element",
              "modifiers": []
            }
          ],
          "accessibility": {
            "role": "button",
            "ariaAttributes": [
              "aria-pressed",
              "aria-label",
              "aria-disabled"
            ],
            "keyboardSupport": true,
            "screenReaderSupport": true
          },
          "relatedComponents": [
            "button-split",
            "segmented-button",
            "link",
            "menu"
          ],
          "dependencies": [],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "variables": [
            "--fdButton_Clickable_Height",
            "--fdButton_Padding_X",
            "--fdButton_Min_Width",
            "--fdButton_Badge_Offset",
            "--fdButton_Badge_Margin",
            "--fdButton_Badge_Margin_Inline_Start",
            "--fdButton_Badge_Width",
            "--fdButton_Badge_Height",
            "--fdButton_Badge_Position",
            "--fdButton_Badge_Position_Attention",
            "--fdButton_Badge_Padding_Inline",
            "--fdButton_Badge_Size_Attention",
            "--fdButton_Height",
            "--fdButton_Text_Shadow",
            "--fdButton_Font_Family",
            "--fdButton_Compact_Height",
            "--fdButton_Outline_Offset",
            "--fdButton_ToolHeader_Icon_Size",
            "--fdButton_ToolHeader_Padding",
            "--fdButton_ToolHeader_Size",
            "--fdButton_ToolHeader_Button_Size",
            "--fdButton_ToolHeader_Background",
            "--fdButton_ToolHeader_Color",
            "--fdButton_ToolHeader_Color_Normal",
            "--fdButton_ToolHeader_Border_Color",
            "--fdButton_ToolHeader_Border_Color_Normal",
            "--fdButton_ToolHeader_Border_Radius",
            "--fdButton_ToolHeader_Button_Border_Radius",
            "--fdButton_ToolHeader_Background_Hover",
            "--fdButton_ToolHeader_Border_Color_Hover",
            "--fdButton_Hover_Shadow",
            "--fdButton_ToolHeader_Background_Active",
            "--fdButton_ToolHeader_Border_Color_Active",
            "--fdButton_ToolHeader_Color_Active",
            "--fdButton_ToolHeader_Border_Color_Focus",
            "--fdButton_ToolHeader_Border_Radius_Focus",
            "--fdButton_ToolHeader_Outline_Color",
            "--fdButton_ToolHeader_Border_Color_Disabled",
            "--fdButton_ToolHeader_Button_Size_Compact",
            "--fdButton_ToolHeader_Badge_Border_Color",
            "--fdButton_Nested_Size",
            "--fdButton_Nested_Icon_Size",
            "--fdButton_Nested_Click_Area",
            "--fdButton_Nested_Color",
            "--fdButton_Nested_Background",
            "--fdButton_Nested_Border_Color",
            "--fdButton_Nested_Border_Radius",
            "--fdButton_Nested_Border_Color_Hover",
            "--fdButton_Nested_Background_Active",
            "--fdButton_Nested_Border_Color_Active",
            "--fdButton_Nested_Color_Active",
            "--fdButton_Nested_Background_Focus",
            "--fdButton_Nested_Border_Color_Focus",
            "--fdButton_Nested_Border_Radius_Focus",
            "--fdButton_Nested_Border_Color_Disabled",
            "--fdButton_Focus_Border_Radius",
            "--fdButton_Outline_Contrast",
            "--fdButtonPrioritizedBorderColor",
            "--fdButton_Ghost_Background",
            "--fdButton_Emphasized_Active_Outline",
            "--fdButtonColor",
            "--fdButtonBorderColor",
            "--fdButtonBackgroundColor",
            "--fdButtonSelectedPrioritizedBorderColor",
            "--fdButtonSelectedPrioritizedBackgroundColor",
            "--fdButtonHoverPrioritizedBorderColor",
            "--fdButtonHoverPrioritizedBackgroundColor",
            "--fdButtonActivePrioritizedBorderColor",
            "--fdButtonActivePrioritizedBackgroundColor",
            "--fdButtonToggledPrioritizedBorderColor",
            "--fdButtonToggledPrioritizedBackgroundColor",
            "--fdButtonPrioritizedBackgroundColor",
            "--fdButtonToggledActivePrioritizedBorderColor",
            "--fdButtonToggledActivePrioritizedBackgroundColor",
            "--fdElementTextColor",
            "--fdElementIconColor"
          ],
          "examples": [
            "badge-on-button",
            "button-states",
            "focusable-disabled",
            "icon-and-text",
            "menu-button",
            "styles",
            "toggle"
          ]
        },
        {
          "id": "calendar",
          "name": "Calendar",
          "description": "The calendar component allows users to navigate to a single date, multiple days, whole week(s), or a date range, showing all time-related data within a given timeframe.",
          "baseClass": "fd-calendar",
          "cssImport": "fundamental-styles/dist/calendar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-calendar",
          "modifiers": [
            {
              "class": "fd-calendar--arrow-left",
              "description": "arrow-left variant"
            },
            {
              "class": "fd-calendar--arrow-right",
              "description": "arrow-right variant"
            },
            {
              "class": "fd-calendar--weekend",
              "description": "weekend variant"
            },
            {
              "class": "fd-calendar--other",
              "description": "other variant"
            },
            {
              "class": "fd-calendar--selected",
              "description": "selected variant"
            },
            {
              "class": "fd-calendar--range",
              "description": "range variant"
            },
            {
              "class": "fd-calendar--today",
              "description": "today variant"
            },
            {
              "class": "fd-calendar--side-helper",
              "description": "side-helper variant"
            },
            {
              "class": "fd-calendar--years",
              "description": "years variant"
            },
            {
              "class": "fd-calendar--months",
              "description": "months variant"
            },
            {
              "class": "fd-calendar--screen-reader-only",
              "description": "screen-reader-only variant"
            },
            {
              "class": "fd-calendar--mobile-landscape",
              "description": "mobile-landscape variant"
            },
            {
              "class": "fd-calendar--mobile-portrait",
              "description": "mobile-portrait variant"
            },
            {
              "class": "fd-calendar--mobile",
              "description": "mobile variant"
            },
            {
              "class": "fd-calendar--auto-column",
              "description": "auto-column variant"
            },
            {
              "class": "fd-calendar--appointment",
              "description": "appointment variant"
            },
            {
              "class": "fd-calendar--work",
              "description": "work variant"
            },
            {
              "class": "fd-calendar--non-work",
              "description": "non-work variant"
            },
            {
              "class": "fd-calendar--vertical",
              "description": "vertical variant"
            }
          ],
          "elements": [
            {
              "class": "fd-calendar__navigation",
              "description": "navigation element",
              "modifiers": [
                {
                  "class": "fd-calendar__navigation--main",
                  "description": "main variant of navigation"
                }
              ]
            },
            {
              "class": "fd-calendar__action",
              "description": "action element",
              "modifiers": [
                {
                  "class": "fd-calendar__action--arrow-left",
                  "description": "arrow-left variant of action"
                },
                {
                  "class": "fd-calendar__action--arrow-right",
                  "description": "arrow-right variant of action"
                }
              ]
            },
            {
              "class": "fd-calendar__text-wrapper",
              "description": "text-wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-calendar__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-calendar__item--today",
                  "description": "today variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-",
                  "description": "legend- variant of item"
                },
                {
                  "class": "fd-calendar__item--selected",
                  "description": "selected variant of item"
                },
                {
                  "class": "fd-calendar__item--range",
                  "description": "range variant of item"
                },
                {
                  "class": "fd-calendar__item--other",
                  "description": "other variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-1",
                  "description": "legend-1 variant of item"
                },
                {
                  "class": "fd-calendar__item--weekend",
                  "description": "weekend variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-5",
                  "description": "legend-5 variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-9",
                  "description": "legend-9 variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-12",
                  "description": "legend-12 variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-16",
                  "description": "legend-16 variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-13",
                  "description": "legend-13 variant of item"
                },
                {
                  "class": "fd-calendar__item--side-helper",
                  "description": "side-helper variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-7",
                  "description": "legend-7 variant of item"
                },
                {
                  "class": "fd-calendar__item--legend-3",
                  "description": "legend-3 variant of item"
                }
              ]
            },
            {
              "class": "fd-calendar__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-calendar__content--dates",
                  "description": "dates variant of content"
                },
                {
                  "class": "fd-calendar__content--screen-reader-only",
                  "description": "screen-reader-only variant of content"
                },
                {
                  "class": "fd-calendar__content--months",
                  "description": "months variant of content"
                },
                {
                  "class": "fd-calendar__content--years",
                  "description": "years variant of content"
                }
              ]
            },
            {
              "class": "fd-calendar__group",
              "description": "group element",
              "modifiers": []
            },
            {
              "class": "fd-calendar__row",
              "description": "row element",
              "modifiers": []
            },
            {
              "class": "fd-calendar__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-calendar__hidden",
              "description": "hidden element",
              "modifiers": []
            },
            {
              "class": "fd-calendar__navigation--main",
              "description": "navigation--main element",
              "modifiers": []
            },
            {
              "class": "fd-calendar__marker",
              "description": "marker element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdCalendar_Item_Legend_Top_Border",
            "--fdCalendar_Text_Wrapper_After_Z",
            "--fdCalendar_Special_Day_Marker_Height",
            "--fdCalendar_Item_Selected_Legend_Height",
            "--fdCalendar_Item_Text_Wrapper_Height",
            "--fdCalendar_Item_Legend_Bottom_Border_Radius",
            "--fdCalendar_Item_Spacing",
            "--fdCalendar_Item_Width",
            "--fdCalendar_Border_Radius",
            "--fdCalendar_Item_Background",
            "--fdCalendar_Item_Current_Border_Width",
            "--fdCalendar_Item_Border",
            "--fdCalendar_Item_Height",
            "--fdCalendar_Padding",
            "--fdCalendar_Background",
            "--fdCalendar_Width",
            "--fdCalendar_Action_Padding",
            "--fdCalendar_Action_Width",
            "--fdCalendar_Button_Horizontal_Space",
            "--fdCalendar_Item_Helper_Height",
            "--fdCalendar_Item_Font_Size",
            "--fdCalendar_Item_Text_Color",
            "--fdCalendar_Item_Text_Height",
            "--fdCalendar_Active_Item_Border",
            "--fdCalendar_Item_Active_Background_Hover",
            "--fdCalendar_Active_Item_Font_Weight",
            "--fdCalendar_Item_Today_Selected_Bottom_Radius",
            "--fdCalendar_Item_Text_Active_Focus",
            "--fdCalendar_Text_Wrapper_Border",
            "--fdCalendar_Text_Wrapper_Box_Sizing",
            "--fdCalendar_Text_Wrapper_Margin",
            "--fdCalendar_Text_Wrapper_Height",
            "--fdCalendar_Text_Border_Focus",
            "--fdCalendar_Item_Side_Helper",
            "--fdCalendar_Text_Shadow",
            "--fdCalendar_Legend_Column_Width",
            "--fdCalendar_Legend_Item_Padding",
            "--fdCalendar_Legend_Marker_Border_Radius",
            "--fdCalendar_Legend_Marker_Border_Width",
            "--fdCalendar_Legend_Marker_Background",
            "--fdCalendar_Legend_Marker_Border_Color",
            "--fdCalendarContainerGap",
            "--fdCalendarContainerFlexDirection"
          ],
          "tags": [],
          "examples": [
            "days",
            "legend",
            "months",
            "two-month-view",
            "years"
          ],
          "category": "date-time",
          "subcategory": null,
          "useCases": [
            "Date picker component",
            "Date range selection",
            "Schedule/event display",
            "Inline date selection"
          ],
          "avoidWhen": [
            "Time-only selection (use time)",
            "Simple date input (use input with type=date)",
            "Date and time together (use combined picker)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "time",
            "timepicker"
          ],
          "dependencies": []
        },
        {
          "id": "card",
          "name": "Card",
          "category": "containers",
          "subcategory": "cards",
          "description": "Content card container for grouping related information",
          "baseClass": "fd-card",
          "cssImport": "fundamental-styles/dist/card.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-card",
          "useCases": [
            "Group related content",
            "Dashboard widgets",
            "Content previews",
            "Visual grouping"
          ],
          "elements": [
            {
              "class": "fd-card__header",
              "description": "header element",
              "modifiers": [
                {
                  "class": "fd-card__header--interactive",
                  "description": "interactive variant of header"
                }
              ]
            },
            {
              "class": "fd-card__header-main",
              "description": "header-main element",
              "modifiers": []
            },
            {
              "class": "fd-card__header-main-container",
              "description": "header-main-container element",
              "modifiers": []
            },
            {
              "class": "fd-card__header-main-actions",
              "description": "header-main-actions element",
              "modifiers": []
            },
            {
              "class": "fd-card__header-extended",
              "description": "header-extended element",
              "modifiers": [
                {
                  "class": "fd-card__header-extended--bottom-aligned",
                  "description": "bottom-aligned variant of header-extended"
                }
              ]
            },
            {
              "class": "fd-card__header-column",
              "description": "header-column element",
              "modifiers": [
                {
                  "class": "fd-card__header-column--right-aligned",
                  "description": "right-aligned variant of header-column"
                }
              ]
            },
            {
              "class": "fd-card__header-row",
              "description": "header-row element",
              "modifiers": []
            },
            {
              "class": "fd-card__header-numeric",
              "description": "header-numeric element",
              "modifiers": []
            },
            {
              "class": "fd-card__indicator",
              "description": "indicator element",
              "modifiers": []
            },
            {
              "class": "fd-card__numeric-container",
              "description": "numeric-container element",
              "modifiers": []
            },
            {
              "class": "fd-card__indicator-title",
              "description": "indicator-title element",
              "modifiers": []
            },
            {
              "class": "fd-card__indicator-value",
              "description": "indicator-value element",
              "modifiers": []
            },
            {
              "class": "fd-card__timestamp",
              "description": "timestamp element",
              "modifiers": []
            },
            {
              "class": "fd-card__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-card__header-text",
              "description": "header-text element",
              "modifiers": []
            },
            {
              "class": "fd-card__title-area",
              "description": "title-area element",
              "modifiers": []
            },
            {
              "class": "fd-card__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-card__subtitle-area",
              "description": "subtitle-area element",
              "modifiers": []
            },
            {
              "class": "fd-card__subtitle",
              "description": "subtitle element",
              "modifiers": []
            },
            {
              "class": "fd-card__counter",
              "description": "counter element",
              "modifiers": []
            },
            {
              "class": "fd-card__badge-container",
              "description": "badge-container element",
              "modifiers": []
            },
            {
              "class": "fd-card__badge",
              "description": "badge element",
              "modifiers": []
            },
            {
              "class": "fd-card__currency",
              "description": "currency element",
              "modifiers": []
            },
            {
              "class": "fd-card__analytics-area",
              "description": "analytics-area element",
              "modifiers": []
            },
            {
              "class": "fd-card__analytics-container",
              "description": "analytics-container element",
              "modifiers": []
            },
            {
              "class": "fd-card__analytics",
              "description": "analytics element",
              "modifiers": []
            },
            {
              "class": "fd-card__analytics-text",
              "description": "analytics-text element",
              "modifiers": []
            },
            {
              "class": "fd-card__analytics-content",
              "description": "analytics-content element",
              "modifiers": []
            },
            {
              "class": "fd-card__second-subtitle",
              "description": "second-subtitle element",
              "modifiers": []
            },
            {
              "class": "fd-card__numeric-content",
              "description": "numeric-content element",
              "modifiers": []
            },
            {
              "class": "fd-card__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-card__content-container",
              "description": "content-container element",
              "modifiers": [
                {
                  "class": "fd-card__content-container--horizontal",
                  "description": "horizontal variant of content-container"
                }
              ]
            },
            {
              "class": "fd-card__content-section",
              "description": "content-section element",
              "modifiers": []
            },
            {
              "class": "fd-card__content-title-container",
              "description": "content-title-container element",
              "modifiers": []
            },
            {
              "class": "fd-card__content-group",
              "description": "content-group element",
              "modifiers": []
            },
            {
              "class": "fd-card__content-group-text",
              "description": "content-group-text element",
              "modifiers": []
            },
            {
              "class": "fd-card__loader",
              "description": "loader element",
              "modifiers": []
            },
            {
              "class": "fd-card__media",
              "description": "media element",
              "modifiers": [
                {
                  "class": "fd-card__media--with-padding",
                  "description": "with-padding variant of media"
                },
                {
                  "class": "fd-card__media--bg-shell-",
                  "description": "bg-shell- variant of media"
                },
                {
                  "class": "fd-card__media--bg-legend-",
                  "description": "bg-legend- variant of media"
                }
              ]
            },
            {
              "class": "fd-card__media-content-container",
              "description": "media-content-container element",
              "modifiers": [
                {
                  "class": "fd-card__media-content-container--bg-shell-",
                  "description": "bg-shell- variant of media-content-container"
                },
                {
                  "class": "fd-card__media-content-container--bg-legend-",
                  "description": "bg-legend- variant of media-content-container"
                },
                {
                  "class": "fd-card__media-content-container--overlay",
                  "description": "overlay variant of media-content-container"
                }
              ]
            },
            {
              "class": "fd-card__media-image-container",
              "description": "media-image-container element",
              "modifiers": []
            },
            {
              "class": "fd-card__media-image",
              "description": "media-image element",
              "modifiers": []
            },
            {
              "class": "fd-card__media-heading",
              "description": "media-heading element",
              "modifiers": []
            },
            {
              "class": "fd-card__media-text",
              "description": "media-text element",
              "modifiers": []
            }
          ],
          "relatedComponents": [
            "tile",
            "panel",
            "layout"
          ],
          "dependencies": [],
          "tags": [
            "development"
          ],
          "modifiers": [
            {
              "class": "fd-card--interactive",
              "description": "interactive variant"
            },
            {
              "class": "fd-card--top-aligned",
              "description": "top-aligned variant"
            },
            {
              "class": "fd-card--bottom-aligned",
              "description": "bottom-aligned variant"
            },
            {
              "class": "fd-card--right-aligned",
              "description": "right-aligned variant"
            },
            {
              "class": "fd-card--with-spacing",
              "description": "with-spacing variant"
            },
            {
              "class": "fd-card--horizontal",
              "description": "horizontal variant"
            },
            {
              "class": "fd-card--analytical",
              "description": "analytical variant"
            },
            {
              "class": "fd-card--table",
              "description": "table variant"
            },
            {
              "class": "fd-card--object",
              "description": "object variant"
            },
            {
              "class": "fd-card--banner",
              "description": "banner variant"
            }
          ],
          "variables": [
            "--fdCard_Border",
            "--fdCard_Border_Corner_Radius",
            "--fdCard_Header_Text_Spacing",
            "--fdCard_Box_Shadow",
            "--fdCard_Box_Shadow_Regular",
            "--fdCard_Header_Border_Radius",
            "--fdCard_Main_Header_Border_Radius",
            "--fdCard_Footer_Border_Radius",
            "--fdCard_Content_Border_Radius",
            "--fdCard_Focus_Outline_Radius",
            "--fdCard_Focus_Outline_Offset",
            "--fdCard_Media_Border_Radius",
            "--fdCard_Main_Header_Border_Bottom",
            "--fdCard_Header_Border_Bottom",
            "--fdCard_Main_Header_Border_Top",
            "--fdCard_Main_Header_Padding_Block_Start",
            "--fdCard_Main_Header_Padding_Block_End",
            "--fdCard_Main_Header_Padding_Bottom",
            "--fdCard_Background",
            "--fdCard_Box_Shadow_Hover",
            "--fdCard_Footer_Background",
            "--fdCard_Main_Header_Background",
            "--fdCard_Footer_Padding",
            "--fdCard_Footer_Border_Top",
            "--fdCard_Footer_Actions_Item_Spacing",
            "--fdCard_Title_Font_Size",
            "--fdCard_Title_Font_Weight",
            "--fdCard_Counter_Margin",
            "--fdObjectStatus_Inverted_Border_Radius",
            "--fdObjectStatus_Inverted_Padding_Block",
            "--fdObjectStatus_Inverted_Padding_Inline",
            "--fdObjectStatus_Inverted_Line_Height",
            "--fdCard_Media_Flex_Direction",
            "--fdCard_Media_Padding_Inline_Start",
            "--fdCard_Media_Padding_Inline_End",
            "--fdCard_Media_Padding_Block_Start",
            "--fdCard_Media_Padding_Block_End",
            "--fdCard_Media_Background",
            "--fdCard_Media_Image_Radius",
            "--fdCard_Media_Content_Container_Background",
            "--fdCard_Media_Heading_Color",
            "--fdCard_Media_Heading_Shadow",
            "--fdCard_Media_Text_Color",
            "--fdCard_Media_Content_Container_Top",
            "--fdCard_Media_Content_Container_Right",
            "--fdCard_Media_Content_Container_Left",
            "--fdCard_Media_Content_Container_Transform",
            "--fdCard_Media_Content_Container_Width",
            "--fdCard_Media_Content_Container_Height",
            "--fdCard_Media_Content_Container_Position",
            "--fdCard_Media_Content_Container_Padding_Inline",
            "--fdCard_Media_Content_Container_Padding_Block",
            "--fdCard_Media_Image_Container_Width",
            "--fdCard_Media_Image_Container_Height",
            "--fdCard_Media_Image_Width",
            "--fdCard_Media_Image_Height"
          ],
          "examples": [
            "analytical-card",
            "card-anatomy",
            "card-button-interactive",
            "card-empty-state",
            "card-interaction-states",
            "card-listitem-interactive",
            "card-non-interactive-header",
            "card-non-interactive",
            "card-status-icon",
            "extended-header",
            "list-card",
            "numeric-header",
            "object-card",
            "table-card"
          ],
          "avoidWhen": [],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          }
        },
        {
          "id": "carousel",
          "name": "Carousel",
          "description": "The carousel component is used for browsing through a set of images. One or several items can be displayed at a time, and the user can navigate to either the next or the previous item.",
          "baseClass": "fd-carousel",
          "cssImport": "fundamental-styles/dist/carousel.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-carousel",
          "modifiers": [
            {
              "class": "fd-carousel--left",
              "description": "left variant"
            },
            {
              "class": "fd-carousel--right",
              "description": "right variant"
            },
            {
              "class": "fd-carousel--up",
              "description": "up variant"
            },
            {
              "class": "fd-carousel--down",
              "description": "down variant"
            },
            {
              "class": "fd-carousel--horizontal",
              "description": "horizontal variant"
            },
            {
              "class": "fd-carousel--solid",
              "description": "solid variant"
            },
            {
              "class": "fd-carousel--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-carousel--active",
              "description": "active variant"
            },
            {
              "class": "fd-carousel--translucent",
              "description": "translucent variant"
            },
            {
              "class": "fd-carousel--no-border",
              "description": "no-border variant"
            },
            {
              "class": "fd-carousel--no-navigation",
              "description": "no-navigation variant"
            }
          ],
          "elements": [
            {
              "class": "fd-carousel__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-carousel__content--transparent",
                  "description": "transparent variant of content"
                },
                {
                  "class": "fd-carousel__content--solid",
                  "description": "solid variant of content"
                },
                {
                  "class": "fd-carousel__content--horizontal",
                  "description": "horizontal variant of content"
                }
              ]
            },
            {
              "class": "fd-carousel__slides",
              "description": "slides element",
              "modifiers": []
            },
            {
              "class": "fd-carousel__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-carousel__item--active",
                  "description": "active variant of item"
                }
              ]
            },
            {
              "class": "fd-carousel__page-indicator-container",
              "description": "page-indicator-container element",
              "modifiers": [
                {
                  "class": "fd-carousel__page-indicator-container--transparent",
                  "description": "transparent variant of page-indicator-container"
                },
                {
                  "class": "fd-carousel__page-indicator-container--translucent",
                  "description": "translucent variant of page-indicator-container"
                },
                {
                  "class": "fd-carousel__page-indicator-container--no-border",
                  "description": "no-border variant of page-indicator-container"
                }
              ]
            },
            {
              "class": "fd-carousel__page-indicators",
              "description": "page-indicators element",
              "modifiers": []
            },
            {
              "class": "fd-carousel__page-indicator",
              "description": "page-indicator element",
              "modifiers": [
                {
                  "class": "fd-carousel__page-indicator--active",
                  "description": "active variant of page-indicator"
                }
              ]
            },
            {
              "class": "fd-carousel__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-carousel__button",
              "description": "button element",
              "modifiers": [
                {
                  "class": "fd-carousel__button--left",
                  "description": "left variant of button"
                },
                {
                  "class": "fd-carousel__button--right",
                  "description": "right variant of button"
                },
                {
                  "class": "fd-carousel__button--up",
                  "description": "up variant of button"
                },
                {
                  "class": "fd-carousel__button--down",
                  "description": "down variant of button"
                }
              ]
            }
          ],
          "variables": [
            "--fdCarousel_Button_Display",
            "--fdCarousel_Content_Background",
            "--fdCarousel_Page_Indicator_Margin",
            "--fdCarousel_Dot_Margin",
            "--fdCarousel_Page_Indicator_Size",
            "--fdCarousel_Dot_Size",
            "--fdCarousel_Page_Indicator_Background_Color",
            "--fdCarousel_Dot_Background",
            "--fdCarousel_Page_Indicator_Border",
            "--fdCarousel_Dot_Border",
            "--fdCarousel_Page_Indicator_Container_Background",
            "--fdMessage_Page_Container_Corner_Radius",
            "--fdCarousel_Pagination_Border",
            "--fdCarousel_Dot_Selected_Border",
            "--fdCarousel_Dot_Selected_Background",
            "--fdButton_Focus_Border_Radius"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "examples": [
            "carousel-backgrounds",
            "carousel-bottom",
            "carousel-no-navigation",
            "carousel-top",
            "error",
            "horizontal-carousel"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "Image gallery with navigation",
            "Product image slideshow",
            "Feature showcase",
            "Content rotation"
          ],
          "avoidWhen": [
            "Critical information (users may miss slides)",
            "Forms or interactive content",
            "Small number of items (use static layout)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "card",
            "tile"
          ],
          "dependencies": []
        },
        {
          "id": "checkbox",
          "name": "Checkbox",
          "category": "forms",
          "subcategory": "selection",
          "description": "Multiple selection control for selecting multiple options",
          "baseClass": "fd-checkbox",
          "cssImport": "fundamental-styles/dist/checkbox.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-checkbox",
          "useCases": [
            "Multiple selections",
            "Toggle options on/off",
            "Agree to terms"
          ],
          "avoidWhen": [
            "Single selection (use radio button)",
            "Binary toggle (consider switch)"
          ],
          "modifiers": [
            {
              "class": "fd-checkbox--required",
              "description": "required variant"
            },
            {
              "class": "fd-checkbox--wrap",
              "description": "wrap variant"
            }
          ],
          "accessibility": {
            "role": "checkbox",
            "ariaAttributes": [
              "aria-checked",
              "aria-label"
            ],
            "labelRequired": true
          },
          "relatedComponents": [
            "radio",
            "switch",
            "form-item"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-checkbox__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-checkbox__label-container",
              "description": "label-container element",
              "modifiers": []
            },
            {
              "class": "fd-checkbox__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-checkbox__checkmark",
              "description": "checkmark element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdCheckbox_Padding",
            "--fdCheckbox_Hover_Background_Color",
            "--fdCheckbox_Inner_Border_Width",
            "--fdCheckbox_Inner_Border_Width_Default_Hover",
            "--fdCheckbox_Inner_Border_Style",
            "--fdCheckbox_Inner_Border_Style_Default_Hover",
            "--fdCheckbox_Inner_Border_Color",
            "--fdCheckbox_Inner_Border_Color_Default_Hover",
            "--fdCheckbox_Check_Mark_Color",
            "--fdCheckbox_Check_Mark_Color_Default_Hover",
            "--fdCheckbox_Background_Color_Default_Hover",
            "--fdCheckbox_Dimensions",
            "--fdCheckbox_Background_Color",
            "--fdCheckbox_Tristate_Size",
            "--fdCheckbox_Background_Color_Warning",
            "--fdCheckbox_Inner_Border_Width_Warning",
            "--fdCheckbox_Inner_Border_Style_Warning",
            "--fdCheckbox_Inner_Border_Color_Warning",
            "--fdCheckbox_Check_Mark_Color_Warning",
            "--fdCheckbox_Background_Color_Warning_Hover",
            "--fdCheckbox_Background_Color_Error",
            "--fdCheckbox_Inner_Border_Width_Error",
            "--fdCheckbox_Inner_Border_Style_Error",
            "--fdCheckbox_Inner_Border_Color_Error",
            "--fdCheckbox_Check_Mark_Color_Error",
            "--fdCheckbox_Background_Color_Error_Hover",
            "--fdCheckbox_Background_Color_Success",
            "--fdCheckbox_Inner_Border_Width_Success",
            "--fdCheckbox_Inner_Border_Style_Success",
            "--fdCheckbox_Inner_Border_Color_Success",
            "--fdCheckbox_Check_Mark_Color_Success",
            "--fdCheckbox_Background_Color_Success_Hover",
            "--fdCheckbox_Background_Color_Information",
            "--fdCheckbox_Inner_Border_Width_Information",
            "--fdCheckbox_Inner_Border_Style_Information",
            "--fdCheckbox_Inner_Border_Color_Information",
            "--fdCheckbox_Check_Mark_Color_Information",
            "--fdCheckbox_Background_Color_Information_Hover",
            "--fdCheckbox_Background_Color_ReadOnly",
            "--fdCheckbox_Inner_Border_Width_ReadOnly",
            "--fdCheckbox_Inner_Border_Style_ReadOnly",
            "--fdCheckbox_Inner_Border_Color_ReadOnly",
            "--fdCheckbox_Check_Mark_Color_ReadOnly",
            "--fdCheckbox_Focus_Outline_Offset",
            "--fdCheckbox_Outline_Border_Radius",
            "--fdCheckbox_Compact_Dimensions",
            "--fdCheckbox_Compact_Padding",
            "--fdCheckbox_Tristate_Compact_Size",
            "--fdCheckbox_Tristate_Offset",
            "--fdCheckbox_Tristate_Compact_Offset",
            "--fdCheckbox_Compact_Outline_Border_Radius"
          ],
          "examples": []
        },
        {
          "id": "code",
          "name": "Code",
          "description": "The code component helps with formating and styling code snippets. It differantiates the code lines from the normal text.",
          "baseClass": "fd-code",
          "cssImport": "fundamental-styles/dist/code.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-code",
          "modifiers": [
            {
              "class": "fd-code--inline",
              "description": "inline variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "examples": [
            "inline-code",
            "primary"
          ],
          "category": "typography",
          "subcategory": null,
          "useCases": [
            "Code snippet display",
            "Inline code formatting",
            "Technical values",
            "Monospace text"
          ],
          "avoidWhen": [
            "Regular text (use text)",
            "Editable code (use textarea)",
            "Long code blocks (use external code editor)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "text"
          ],
          "dependencies": []
        },
        {
          "id": "counter",
          "name": "Counter",
          "description": "Counter component",
          "baseClass": "fd-counter",
          "cssImport": "fundamental-styles/dist/counter.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-counter",
          "modifiers": [
            {
              "class": "fd-counter--notification",
              "description": "notification variant"
            }
          ],
          "elements": [],
          "variables": [
            "--fdBadge_Border_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "development"
          ],
          "examples": [
            "notifier",
            "paragraph",
            "primary",
            "tabs"
          ],
          "category": "visual",
          "subcategory": null,
          "useCases": [
            "Show count of items",
            "Badge with number",
            "Notification count indicator",
            "Quantity display"
          ],
          "avoidWhen": [
            "Status indication (use badge or object-status)",
            "Large numbers with units (use object-number)",
            "Interactive counters (use step-input)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "badge",
            "object-number",
            "step-input"
          ],
          "dependencies": []
        },
        {
          "id": "dialog",
          "name": "Dialog",
          "category": "overlays",
          "subcategory": "dialogs",
          "description": "Modal dialog window for displaying important information or forms",
          "baseClass": "fd-dialog",
          "cssImport": "fundamental-styles/dist/dialog.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-dialog",
          "useCases": [
            "Display important information",
            "Show forms in overlay",
            "Get user confirmation",
            "Critical decisions"
          ],
          "avoidWhen": [
            "Supplementary info (use popover)",
            "Simple confirmations (use message-box)"
          ],
          "modifiers": [
            {
              "class": "fd-dialog--active",
              "description": "active variant"
            },
            {
              "class": "fd-dialog--mobile",
              "description": "mobile variant"
            },
            {
              "class": "fd-dialog--no-mobile-stretch",
              "description": "no-mobile-stretch variant"
            },
            {
              "class": "fd-dialog--draggable",
              "description": "draggable variant"
            },
            {
              "class": "fd-dialog--no-vertical-padding",
              "description": "no-vertical-padding variant"
            },
            {
              "class": "fd-dialog--no-horizontal-padding",
              "description": "no-horizontal-padding variant"
            },
            {
              "class": "fd-dialog--no-backdrop",
              "description": "no-backdrop variant"
            }
          ],
          "elements": [
            {
              "class": "fd-dialog__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-dialog__content--s",
                  "description": "s variant of content"
                },
                {
                  "class": "fd-dialog__content--mobile",
                  "description": "mobile variant of content"
                },
                {
                  "class": "fd-dialog__content--draggable-grab",
                  "description": "draggable-grab variant of content"
                },
                {
                  "class": "fd-dialog__content--m",
                  "description": "m variant of content"
                },
                {
                  "class": "fd-dialog__content--l",
                  "description": "l variant of content"
                },
                {
                  "class": "fd-dialog__content--xl",
                  "description": "xl variant of content"
                }
              ]
            },
            {
              "class": "fd-dialog__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-dialog__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-dialog__subheader",
              "description": "subheader element",
              "modifiers": []
            },
            {
              "class": "fd-dialog__body",
              "description": "body element",
              "modifiers": [
                {
                  "class": "fd-dialog__body--no-vertical-padding",
                  "description": "no-vertical-padding variant of body"
                }
              ]
            },
            {
              "class": "fd-dialog__loader",
              "description": "loader element",
              "modifiers": []
            },
            {
              "class": "fd-dialog__resize-handle",
              "description": "resize-handle element",
              "modifiers": []
            }
          ],
          "accessibility": {
            "role": "dialog",
            "ariaAttributes": [
              "aria-labelledby",
              "aria-describedby",
              "aria-modal"
            ],
            "focusManagement": true,
            "escapeKey": true
          },
          "relatedComponents": [
            "popover",
            "message-box",
            "button",
            "bar"
          ],
          "dependencies": [],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "variables": [],
          "examples": [
            "default-dialog",
            "device-specifications",
            "draggable",
            "horizontal-form-in-dialog",
            "loading",
            "resizable",
            "selectable",
            "sizes",
            "vertical-form-in-dialog"
          ]
        },
        {
          "id": "dynamic-page",
          "name": "Dynamic Page",
          "description": "Dynamic Page component",
          "baseClass": "fd-dynamic-page",
          "cssImport": "fundamental-styles/dist/dynamic-page.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-dynamic-page",
          "modifiers": [
            {
              "class": "fd-dynamic-page--collapsed",
              "description": "collapsed variant"
            },
            {
              "class": "fd-dynamic-page--wrap",
              "description": "wrap variant"
            },
            {
              "class": "fd-dynamic-page--actions",
              "description": "actions variant"
            },
            {
              "class": "fd-dynamic-page--content",
              "description": "content variant"
            },
            {
              "class": "fd-dynamic-page--no-shadow",
              "description": "no-shadow variant"
            },
            {
              "class": "fd-dynamic-page--overflow",
              "description": "overflow variant"
            },
            {
              "class": "fd-dynamic-page--add-shadow",
              "description": "add-shadow variant"
            },
            {
              "class": "fd-dynamic-page--left-gradient",
              "description": "left-gradient variant"
            },
            {
              "class": "fd-dynamic-page--right-gradient",
              "description": "right-gradient variant"
            },
            {
              "class": "fd-dynamic-page--button-group",
              "description": "button-group variant"
            },
            {
              "class": "fd-dynamic-page--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-dynamic-page--md",
              "description": "md variant"
            },
            {
              "class": "fd-dynamic-page--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-dynamic-page--xl",
              "description": "xl variant"
            },
            {
              "class": "fd-dynamic-page--list-bg",
              "description": "list-bg variant"
            },
            {
              "class": "fd-dynamic-page--transparent-bg",
              "description": "transparent-bg variant"
            }
          ],
          "elements": [
            {
              "class": "fd-dynamic-page__sr-only",
              "description": "sr-only element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__header-button",
              "description": "header-button element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__header-fixed",
              "description": "header-fixed element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__title-area",
              "description": "title-area element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__main-container",
              "description": "main-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__title-container",
              "description": "title-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__breadcrumb",
              "description": "breadcrumb element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__breadcrumb-title-container",
              "description": "breadcrumb-title-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__breadcrumb-container",
              "description": "breadcrumb-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__subtitle",
              "description": "subtitle element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__title-content",
              "description": "title-content element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__title-subtitle-container",
              "description": "title-subtitle-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__toolbar-container",
              "description": "toolbar-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__summarized-title-area",
              "description": "summarized-title-area element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__summarized-title",
              "description": "summarized-title element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__collapsible-header-container",
              "description": "collapsible-header-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__collapsible-header",
              "description": "collapsible-header element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__collapsible-header-visibility-container",
              "description": "collapsible-header-visibility-container element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__pin-button",
              "description": "pin-button element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__expand-button",
              "description": "expand-button element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__collapse-button",
              "description": "collapse-button element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-dynamic-page__footer",
              "description": "footer element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdDynamicPage_Hover_Border_Bottom",
            "--fdDynamicPage_Title_Collapsed_Font_Size",
            "--fdDynamicPage_Title_Color",
            "--fdDynamicPage_Title_Font_Size",
            "--fdDynamicPage_Title_Font_Family",
            "--fdDynamicPage_Subtitle_Color",
            "--fdDynamicPage_Button_Left_Gradient",
            "--fdDynamicPage_Button_Right_Gradient",
            "--fdDynamicPage_Button_Group_Background",
            "--fdButtonBackgroundColor",
            "--fdDynamicPage_Button_Pin_Background",
            "--fdDynamicPage_Content_List_Background",
            "--fdDynamicPage_Content_Transparent_Background",
            "--fdDynamicPage_Title_Header_Transparent_Background"
          ],
          "tags": [],
          "examples": [],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "Object detail pages",
            "Collapsible header with content",
            "Pages with hero section",
            "Master-detail layouts"
          ],
          "avoidWhen": [
            "Simple pages (use page)",
            "List views (use list or table)",
            "Dashboard layouts (use layout-grid)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "page",
            "panel",
            "section"
          ],
          "dependencies": []
        },
        {
          "id": "dynamic-side-content",
          "name": "Dynamic Side Content",
          "description": "Dynamic Side Content component",
          "baseClass": "fd-dynamic-side-content",
          "cssImport": "fundamental-styles/dist/dynamic-side-content.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-dynamic-side-content",
          "modifiers": [
            {
              "class": "fd-dynamic-side-content--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-dynamic-side-content--md",
              "description": "md variant"
            },
            {
              "class": "fd-dynamic-side-content--xl",
              "description": "xl variant"
            },
            {
              "class": "fd-dynamic-side-content--equal-split",
              "description": "equal-split variant"
            },
            {
              "class": "fd-dynamic-side-content--below",
              "description": "below variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Responsive side panel",
            "Context-sensitive sidebar",
            "Collapsible side content",
            "Main content with side panel"
          ],
          "avoidWhen": [
            "Navigation sidebar (use side-nav)",
            "Fixed layouts (use splitter)",
            "Multi-column (use flexible-column-layout)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "splitter",
            "flexible-column-layout"
          ],
          "dependencies": []
        },
        {
          "id": "facet",
          "name": "Facet",
          "description": "Facet component",
          "baseClass": "fd-facet",
          "cssImport": "fundamental-styles/dist/facet.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-facet",
          "modifiers": [
            {
              "class": "fd-facet--image",
              "description": "image variant"
            },
            {
              "class": "fd-facet--form",
              "description": "form variant"
            },
            {
              "class": "fd-facet--key-value",
              "description": "key-value variant"
            },
            {
              "class": "fd-facet--rating-indicator",
              "description": "rating-indicator variant"
            }
          ],
          "elements": [
            {
              "class": "fd-facet__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-facet__form-value",
              "description": "form-value element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "containers",
          "subcategory": null,
          "useCases": [
            "Object page header sections",
            "Key-value facet display",
            "Metadata grouping",
            "Object attributes container"
          ],
          "avoidWhen": [
            "Form sections (use form-group)",
            "Collapsible content (use panel)",
            "Simple sections (use section)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "section",
            "object-attribute",
            "dynamic-page"
          ],
          "dependencies": []
        },
        {
          "id": "feed-input",
          "name": "Feed Input",
          "description": "The feed input is specifically designed for users to type their own notes or comments and post them to a corresponding feed.",
          "baseClass": "fd-feed-input",
          "cssImport": "fundamental-styles/dist/feed-input.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-feed-input",
          "modifiers": [],
          "elements": [],
          "variables": [
            "--fdFeed_Input_Placeholder_Font_Style",
            "--fdButton_Compact_Height",
            "--fdButton_Clickable_Height",
            "--fdButton_Padding_X",
            "--fdButton_Min_Width",
            "--fdButton_Badge_Margin_Inline_Start",
            "--fdButton_Badge_Size_Attention"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "disabled",
            "input-growth",
            "not-empty",
            "over-max-height",
            "placeholder-image",
            "standard",
            "without-user-image"
          ],
          "category": "social",
          "subcategory": null,
          "useCases": [
            "Comment input field",
            "Chat message input",
            "Social post creation",
            "Threaded discussion input"
          ],
          "avoidWhen": [
            "Simple text input (use textarea)",
            "Form fields (use input)",
            "Rich text editing (use external editor)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "feed-list",
            "textarea"
          ],
          "dependencies": []
        },
        {
          "id": "feed-list",
          "name": "Feed List",
          "description": "The feed list displays feed list items that individually consist of a username, a written entry and an optional image. There is also a separate byline below that can contain a time stamp or an attribute in the form of free text.",
          "baseClass": "fd-feed-list",
          "cssImport": "fundamental-styles/dist/feed-list.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-feed-list",
          "modifiers": [
            {
              "class": "fd-feed-list--no-border",
              "description": "no-border variant"
            },
            {
              "class": "fd-feed-list--more",
              "description": "more variant"
            },
            {
              "class": "fd-feed-list--group",
              "description": "group variant"
            },
            {
              "class": "fd-feed-list--link",
              "description": "link variant"
            },
            {
              "class": "fd-feed-list--byline",
              "description": "byline variant"
            },
            {
              "class": "fd-feed-list--s",
              "description": "s variant"
            },
            {
              "class": "fd-feed-list--header",
              "description": "header variant"
            }
          ],
          "elements": [
            {
              "class": "fd-feed-list__body",
              "description": "body element",
              "modifiers": []
            },
            {
              "class": "fd-feed-list__link",
              "description": "link element",
              "modifiers": [
                {
                  "class": "fd-feed-list__link--more",
                  "description": "more variant of link"
                }
              ]
            },
            {
              "class": "fd-feed-list__actions",
              "description": "actions element",
              "modifiers": []
            },
            {
              "class": "fd-feed-list__name",
              "description": "name element",
              "modifiers": []
            },
            {
              "class": "fd-feed-list__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-feed-list__footer",
              "description": "footer element",
              "modifiers": [
                {
                  "class": "fd-feed-list__footer--byline",
                  "description": "byline variant of footer"
                }
              ]
            },
            {
              "class": "fd-feed-list__wrapper",
              "description": "wrapper element",
              "modifiers": [
                {
                  "class": "fd-feed-list__wrapper--header",
                  "description": "header variant of wrapper"
                }
              ]
            }
          ],
          "variables": [
            "--fdFeed_List_Item_Background",
            "--fdFeed_List_Item_Border_Top",
            "--fdFeed_List_Item_Border_Bottom"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "borderless",
            "group",
            "linked",
            "mobile",
            "no-image",
            "place-holder-image",
            "show-less",
            "show-more",
            "standard",
            "with-actions"
          ],
          "category": "social",
          "subcategory": null,
          "useCases": [
            "Activity feed display",
            "Comment threads",
            "Timeline of events",
            "Social updates list"
          ],
          "avoidWhen": [
            "Structured data (use table or list)",
            "Simple lists (use list)",
            "Navigation items (use navigation-list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "feed-input",
            "list",
            "notification"
          ],
          "dependencies": []
        },
        {
          "id": "fieldset",
          "name": "Fieldset",
          "description": "Fieldset component",
          "baseClass": "fd-fieldset",
          "cssImport": "fundamental-styles/dist/fieldset.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-fieldset",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-fieldset__legend",
              "description": "legend element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "form-layout",
          "subcategory": null,
          "useCases": [
            "Form field grouping",
            "Semantic form sections",
            "Related fields container",
            "Accessible form groups"
          ],
          "avoidWhen": [
            "Visual grouping only (use form-group)",
            "Layout sections (use section)",
            "Complex forms (use form-layout-grid)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "form-group",
            "form-layout-grid"
          ],
          "dependencies": []
        },
        {
          "id": "file-uploader",
          "name": "File Uploader",
          "description": "The File Uploader component allows the user to select the files from the system to upload.",
          "baseClass": "fd-file-uploader",
          "cssImport": "fundamental-styles/dist/file-uploader.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-file-uploader",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-file-uploader__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-file-uploader__hidden",
              "description": "hidden element",
              "modifiers": []
            },
            {
              "class": "fd-file-uploader__uploaded-files",
              "description": "uploaded-files element",
              "modifiers": []
            },
            {
              "class": "fd-file-uploader__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-file-uploader__list",
              "description": "list element",
              "modifiers": []
            },
            {
              "class": "fd-file-uploader__list-item",
              "description": "list-item element",
              "modifiers": []
            },
            {
              "class": "fd-file-uploader__actions",
              "description": "actions element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdFileUploaderButtonsSpacing"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "file-uploader-with-files",
            "primary",
            "selected",
            "status"
          ],
          "category": "form-inputs",
          "subcategory": "file",
          "useCases": [
            "Single or multiple file upload",
            "Document attachment",
            "Image upload",
            "Drag and drop file input"
          ],
          "avoidWhen": [
            "File management (use upload-collection)",
            "Simple text input (use input)",
            "URL input (use input with validation)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "upload-collection",
            "input"
          ],
          "dependencies": []
        },
        {
          "id": "fixed-card-layout",
          "name": "Fixed Card Layout",
          "description": "Fixed Card Layout component",
          "baseClass": "fd-fixed-card-layout",
          "cssImport": "fundamental-styles/dist/fixed-card-layout.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-fixed-card-layout",
          "modifiers": [
            {
              "class": "fd-fixed-card-layout--single",
              "description": "single variant"
            }
          ],
          "elements": [
            {
              "class": "fd-fixed-card-layout__card-layout",
              "description": "card-layout element",
              "modifiers": [
                {
                  "class": "fd-fixed-card-layout__card-layout--columns-",
                  "description": "columns- variant of card-layout"
                }
              ]
            },
            {
              "class": "fd-fixed-card-layout__card",
              "description": "card element",
              "modifiers": []
            },
            {
              "class": "fd-fixed-card-layout__card-placeholder",
              "description": "card-placeholder element",
              "modifiers": []
            },
            {
              "class": "fd-fixed-card-layout__card-preview",
              "description": "card-preview element",
              "modifiers": []
            },
            {
              "class": "fd-fixed-card-layout__clearfix",
              "description": "clearfix element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Fixed-size card grid",
            "Dashboard with fixed cards",
            "Non-resizable card layout",
            "Static card arrangement"
          ],
          "avoidWhen": [
            "Resizable cards (use resizable-card-layout)",
            "Responsive grids (use layout-grid)",
            "Lists (use grid-list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "resizable-card-layout",
            "layout-grid",
            "card"
          ],
          "dependencies": []
        },
        {
          "id": "flexible-column-layout",
          "name": "Flexible Column Layout",
          "description": "Flexible Column Layout component",
          "baseClass": "fd-flexible-column-layout",
          "cssImport": "fundamental-styles/dist/flexible-column-layout.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-flexible-column-layout",
          "modifiers": [
            {
              "class": "fd-flexible-column-layout--hidden",
              "description": "hidden variant"
            },
            {
              "class": "fd-flexible-column-layout--translucent",
              "description": "translucent variant"
            },
            {
              "class": "fd-flexible-column-layout--transparent",
              "description": "transparent variant"
            }
          ],
          "elements": [
            {
              "class": "fd-flexible-column-layout__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-flexible-column-layout__column",
              "description": "column element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdFlexibleColumnLayoutToggleImage",
            "--fdFlexibleColumnLayout_Border",
            "--fdFlexibleColumnLayout_Background_Solid",
            "--fdFlexibleColumnLayout_Toggle_Image_Color",
            "--fdFlexibleColumnLayout_Background_Translucent",
            "--fdFlexibleColumnLayout_Background_Transparent"
          ],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Master-detail-detail views",
            "Responsive multi-column layout",
            "Progressive disclosure patterns",
            "List to detail navigation"
          ],
          "avoidWhen": [
            "Simple two-column (use splitter)",
            "Dashboard grids (use layout-grid)",
            "Single page content (use page)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "splitter",
            "layout-grid",
            "dynamic-side-content"
          ],
          "dependencies": []
        },
        {
          "id": "form-group",
          "name": "Form Group",
          "description": "Form Group component",
          "baseClass": "fd-form-group",
          "cssImport": "fundamental-styles/dist/form-group.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-form-group",
          "modifiers": [
            {
              "class": "fd-form-group--inline",
              "description": "inline variant"
            },
            {
              "class": "fd-form-group--with-spacing",
              "description": "with-spacing variant"
            },
            {
              "class": "fd-form-group--no-padding",
              "description": "no-padding variant"
            },
            {
              "class": "fd-form-group--no-border",
              "description": "no-border variant"
            }
          ],
          "elements": [
            {
              "class": "fd-form-group__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-form-group__header-text",
              "description": "header-text element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdFormGroupPaddingInline"
          ],
          "tags": [],
          "examples": [],
          "category": "form-layout",
          "subcategory": null,
          "useCases": [
            "Group related form fields",
            "Form section with header",
            "Visual form organization",
            "Field container"
          ],
          "avoidWhen": [
            "Semantic grouping (use fieldset)",
            "Grid layouts (use form-layout-grid)",
            "Page sections (use section)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "fieldset",
            "form-layout-grid",
            "section"
          ],
          "dependencies": []
        },
        {
          "id": "form-header",
          "name": "Form Header",
          "description": "Form Header component",
          "baseClass": "fd-form-header",
          "cssImport": "fundamental-styles/dist/form-header.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-form-header",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-form-header__text",
              "description": "text element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdFormHeader_Border_Width"
          ],
          "tags": [],
          "examples": [],
          "category": "form-layout",
          "subcategory": null,
          "useCases": [
            "Form section title",
            "Form group header",
            "Section heading in forms",
            "Form area label"
          ],
          "avoidWhen": [
            "Page titles (use title)",
            "Panel headers (use panel)",
            "Section titles outside forms (use section)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "form-group",
            "title"
          ],
          "dependencies": []
        },
        {
          "id": "form-item",
          "name": "Form Item",
          "category": "forms",
          "subcategory": "layout",
          "description": "Container for individual form field with label and input",
          "baseClass": "fd-form-item",
          "cssImport": "fundamental-styles/dist/form-item.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-form-item",
          "useCases": [
            "Wrap form inputs with labels",
            "Structure form fields",
            "Group label and input together"
          ],
          "elements": [
            {
              "class": "fd-form-item__label-container",
              "description": "label-container element",
              "modifiers": []
            }
          ],
          "accessibility": {
            "labelInputAssociation": true
          },
          "relatedComponents": [
            "form-group",
            "form-label",
            "input",
            "select",
            "checkbox"
          ],
          "dependencies": [],
          "tags": [],
          "modifiers": [
            {
              "class": "fd-form-item--horizontal",
              "description": "horizontal variant"
            }
          ],
          "variables": [],
          "examples": [],
          "avoidWhen": []
        },
        {
          "id": "form-label",
          "name": "Form Label",
          "category": "forms",
          "subcategory": "labels",
          "description": "Label for form inputs with required indicator support",
          "baseClass": "fd-form-label",
          "cssImport": "fundamental-styles/dist/form-label.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-form-label",
          "useCases": [
            "Label form inputs",
            "Indicate required fields",
            "Associate labels with inputs"
          ],
          "modifiers": [
            {
              "class": "fd-form-label--disabled",
              "description": "disabled variant"
            },
            {
              "class": "fd-form-label--unit-description",
              "description": "unit-description variant"
            },
            {
              "class": "fd-form-label--required",
              "description": "required variant"
            },
            {
              "class": "fd-form-label--colon",
              "description": "colon variant"
            },
            {
              "class": "fd-form-label--inline-help",
              "description": "inline-help variant"
            },
            {
              "class": "fd-form-label--stand-alone",
              "description": "stand-alone variant"
            }
          ],
          "accessibility": {
            "forAttribute": true,
            "required": true
          },
          "relatedComponents": [
            "form-item",
            "input",
            "select",
            "textarea"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [],
          "variables": [],
          "examples": [],
          "avoidWhen": []
        },
        {
          "id": "form-layout-grid",
          "name": "Form Layout Grid",
          "description": "Form Layout Grid component",
          "baseClass": "fd-form-layout-grid",
          "cssImport": "fundamental-styles/dist/form-layout-grid.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-form-layout-grid",
          "modifiers": [
            {
              "class": "fd-form-layout-grid--colon",
              "description": "colon variant"
            },
            {
              "class": "fd-form-layout-grid--required",
              "description": "required variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "form-layout",
          "subcategory": null,
          "useCases": [
            "Responsive form layouts",
            "Multi-column forms",
            "Complex form structures",
            "Form field grid"
          ],
          "avoidWhen": [
            "Simple forms (use form-group)",
            "Single column (use form-item)",
            "Page layouts (use layout-grid)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "form-group",
            "layout-grid"
          ],
          "dependencies": []
        },
        {
          "id": "form-message",
          "name": "Form Message",
          "description": "Form Message component",
          "baseClass": "fd-form-message",
          "cssImport": "fundamental-styles/dist/form-message.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-form-message",
          "modifiers": [
            {
              "class": "fd-form-message--static",
              "description": "static variant"
            },
            {
              "class": "fd-form-message--embedded",
              "description": "embedded variant"
            }
          ],
          "elements": [],
          "variables": [
            "--fdMessage_Box_Shadow",
            "--fdMessage_Border",
            "--fdMessage_Border_Radius",
            "--fdMessage_Icon_Display"
          ],
          "tags": [],
          "examples": [],
          "category": "form-layout",
          "subcategory": null,
          "useCases": [
            "Field validation message",
            "Input error message",
            "Field help text",
            "Inline field feedback"
          ],
          "avoidWhen": [
            "Multiple errors (use message-popover)",
            "Page messages (use message-strip)",
            "Success feedback (use message-toast)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "message-popover",
            "message-strip"
          ],
          "dependencies": []
        },
        {
          "id": "generic-tag",
          "name": "Generic Tag",
          "description": "The generic tag control displays complementary information related to the current page, such as key performance indicators (KPI) and situations.",
          "baseClass": "fd-generic-tag",
          "cssImport": "fundamental-styles/dist/generic-tag.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-generic-tag",
          "modifiers": [
            {
              "class": "fd-generic-tag--error",
              "description": "error variant"
            },
            {
              "class": "fd-generic-tag--success",
              "description": "success variant"
            },
            {
              "class": "fd-generic-tag--information",
              "description": "information variant"
            },
            {
              "class": "fd-generic-tag--warning",
              "description": "warning variant"
            }
          ],
          "elements": [
            {
              "class": "fd-generic-tag__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-generic-tag__name",
              "description": "name element",
              "modifiers": []
            },
            {
              "class": "fd-generic-tag__value",
              "description": "value element",
              "modifiers": []
            },
            {
              "class": "fd-generic-tag__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdGenericTag_Spacing",
            "--fdGenericTag_Margin",
            "--fdGenericTag_Decorator_Position",
            "--fdGenericTag_Decorator_Color",
            "--fdGenericTag_Background_Color",
            "--fdGenericTag_Icon_Color",
            "--fdGenericTag_Name_Color",
            "--fdGenericTag_Name_Text_Shadow",
            "--fdGenericTag_Value_Color",
            "--fdGenericTag_Value_Text_Shadow",
            "--fdGenericTag_Text_Min_Width",
            "--fdGenericTag_Value_Color_Hover_Error",
            "--fdGenericTag_Icon_Color_Hover_Error",
            "--fdGenericTag_Value_Color_Hover_Warning",
            "--fdGenericTag_Icon_Color_Hover_Warning",
            "--fdGenericTag_Value_Color_Hover_Success",
            "--fdGenericTag_Icon_Color_Hover_Success",
            "--fdGenericTag_Value_Color_Hover_Information",
            "--fdGenericTag_Icon_Color_Hover_Information",
            "--fdGenericTag_Name_Color_Hover",
            "--fdGenericTag_Value_Color_Hover_Neutral",
            "--fdGenericTag_Icon_Color_Hover_Neutral",
            "--fdGenericTag_Spacing_Outline_Offset"
          ],
          "tags": [],
          "examples": [
            "primary"
          ],
          "category": "tags",
          "subcategory": null,
          "useCases": [
            "Custom tag display",
            "Label with optional actions",
            "Categorization tag",
            "Filterable tag"
          ],
          "avoidWhen": [
            "Status (use object-status)",
            "Removable tags (use token)",
            "Simple labels (use info-label)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "token",
            "info-label",
            "object-status"
          ],
          "dependencies": []
        },
        {
          "id": "grid-list",
          "name": "Grid List",
          "description": "Grid List component",
          "baseClass": "fd-item",
          "cssImport": "fundamental-styles/dist/grid-list.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-grid-list",
          "modifiers": [
            {
              "class": "fd-item--height-auto",
              "description": "height-auto variant"
            },
            {
              "class": "fd-item--unread",
              "description": "unread variant"
            },
            {
              "class": "fd-item--link",
              "description": "link variant"
            },
            {
              "class": "fd-item--no-padding",
              "description": "no-padding variant"
            },
            {
              "class": "fd-item--no-margin",
              "description": "no-margin variant"
            },
            {
              "class": "fd-item--mode",
              "description": "mode variant"
            }
          ],
          "elements": [
            {
              "class": "fd-item__group-header",
              "description": "group-header element",
              "modifiers": []
            },
            {
              "class": "fd-item__more",
              "description": "more element",
              "modifiers": []
            },
            {
              "class": "fd-item__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-item__highlight",
              "description": "highlight element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdGrid_List_Item_Border_Radius",
            "--fdGrid_List_Item_Hover_Border_Color",
            "--fdGrid_List_Item_Focus_Outline_Offset",
            "--fdGrid_List_Item_Focus_Box_Shadow",
            "--fdGrid_List_Item_Focus_Border",
            "--fdToolbar_Padding_Left",
            "--fdToolbar_Padding_Right",
            "--fdToolbar_Background",
            "--fdGrid_List_Item_Toolbar_Shadow"
          ],
          "tags": [],
          "examples": [],
          "category": "data-display",
          "subcategory": "grid",
          "useCases": [
            "Card grid layout",
            "Product catalog display",
            "Media gallery",
            "Tile-based content"
          ],
          "avoidWhen": [
            "Tabular data (use table)",
            "Simple lists (use list)",
            "Single column (use list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "list",
            "table",
            "card"
          ],
          "dependencies": []
        },
        {
          "id": "helpers",
          "name": "Helpers",
          "description": "Helpers component",
          "baseClass": "fd-helpers",
          "cssImport": "fundamental-styles/dist/helpers.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-helpers",
          "modifiers": [],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "utilities",
          "subcategory": null,
          "useCases": [],
          "avoidWhen": [],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [],
          "dependencies": []
        },
        {
          "id": "horizontal-navigation",
          "name": "Horizontal Navigation",
          "description": "Horizontal Navigation component",
          "baseClass": "fd-horizontal-navigation",
          "cssImport": "fundamental-styles/dist/horizontal-navigation.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-horizontal-navigation",
          "modifiers": [],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "navigation",
          "subcategory": null,
          "useCases": [
            "Secondary navigation below shellbar",
            "Category navigation",
            "Horizontal menu bar",
            "Application areas navigation"
          ],
          "avoidWhen": [
            "Primary navigation (use shellbar)",
            "Side navigation (use side-nav)",
            "In-page sections (use tabs)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "shellbar",
            "tabs",
            "navigation-menu"
          ],
          "dependencies": []
        },
        {
          "id": "icon-tab-bar",
          "name": "Icon Tab Bar",
          "description": "The Icon Tab Bar can be used for navigation within an object, or as a filter. Each tab of the component links to a different content area or view.",
          "baseClass": "fd-icon-tab-bar__popover",
          "cssImport": "fundamental-styles/dist/icon-tab-bar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-icon-tab-bar",
          "modifiers": [
            {
              "class": "fd-icon-tab-bar__popover--single-click",
              "description": "single-click variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--dnd-preview",
              "description": "dnd-preview variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--dnd-hovered",
              "description": "dnd-hovered variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--dnd-separator",
              "description": "dnd-separator variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--filter",
              "description": "filter variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--animated",
              "description": "animated variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--translucent",
              "description": "translucent variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--counters",
              "description": "counters variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--icon-only",
              "description": "icon-only variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--icon",
              "description": "icon variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--process",
              "description": "process variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--with-separator",
              "description": "with-separator variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--navigation-horizontal",
              "description": "navigation-horizontal variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--responsive-paddings",
              "description": "responsive-paddings variant"
            },
            {
              "class": "fd-icon-tab-bar__popover--overflow",
              "description": "overflow variant"
            }
          ],
          "elements": [
            {
              "class": "fd-icon-tab-bar__popover__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__panel",
              "description": "panel element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-icon-tab-bar__popover__item--overflow",
                  "description": "overflow variant of item"
                },
                {
                  "class": "fd-icon-tab-bar__popover__item--multi-click",
                  "description": "multi-click variant of item"
                },
                {
                  "class": "fd-icon-tab-bar__popover__item--closable",
                  "description": "closable variant of item"
                }
              ]
            },
            {
              "class": "fd-icon-tab-bar__popover__button-container",
              "description": "button-container element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__tab",
              "description": "tab element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__tab-container",
              "description": "tab-container element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__arrow",
              "description": "arrow element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__tag",
              "description": "tag element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__counter",
              "description": "counter element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__details",
              "description": "details element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__container",
              "description": "container element",
              "modifiers": [
                {
                  "class": "fd-icon-tab-bar__popover__container--filter",
                  "description": "filter variant of container"
                }
              ]
            },
            {
              "class": "fd-icon-tab-bar__popover__filter-label",
              "description": "filter-label element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__filter-counter",
              "description": "filter-counter element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__overflow",
              "description": "overflow element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__badge",
              "description": "badge element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__icon-separator",
              "description": "icon-separator element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__line-separator",
              "description": "line-separator element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__list",
              "description": "list element",
              "modifiers": []
            },
            {
              "class": "fd-icon-tab-bar__popover__list-item",
              "description": "list-item element",
              "modifiers": [
                {
                  "class": "fd-icon-tab-bar__popover__list-item--closable",
                  "description": "closable variant of list-item"
                }
              ]
            }
          ],
          "variables": [
            "--fdIcon_Tab_Bar_Focus_Offset",
            "--fdIcon_Tab_Bar_Semantic_Color_Negative",
            "--fdIcon_Tab_Bar_Semantic_Badge_Color_Negative",
            "--fdIcon_Tab_Bar_Semantic_Background_Color_Negative",
            "--fdIcon_Tab_Bar_Semantic_Color_Positive",
            "--fdIcon_Tab_Bar_Semantic_Badge_Color_Positive",
            "--fdIcon_Tab_Bar_Semantic_Background_Color_Positive",
            "--fdIcon_Tab_Bar_Semantic_Color_Critical",
            "--fdIcon_Tab_Bar_Semantic_Badge_Color_Critical",
            "--fdIcon_Tab_Bar_Semantic_Background_Color_Critical",
            "--fdIcon_Tab_Bar_Semantic_Color_Informative",
            "--fdIcon_Tab_Bar_Semantic_Badge_Color_Informative",
            "--fdIcon_Tab_Bar_Semantic_Background_Color_Informative",
            "--fdIcon_Tab_Bar_Selection_Bar_Height",
            "--fdIconTabBar_Selection_Bar_Color",
            "--fdIconTabBar_Tag_Icon_Color",
            "--fdIcon_Tab_Bar_Semantic_Icon_Display",
            "--fdIconTabBar_Badge_Background",
            "--fdIconTabBar_Badge_Background_After",
            "--fdIconTabBar_Tag_Color",
            "--fdIconTabBar_Tag_Icon_Content",
            "--fdIconTabBar_Icon_Color",
            "--fdIconTabBar_Icon_Border_Color",
            "--fdIconTabBar_Icon_Background",
            "--fdIcon_Tab_Bar_Multi_Click_Button_Focus_Radius",
            "--fdIconTabBar_Icon_Size",
            "--fdIconTabBar_Icon_Font_Size",
            "--fdIcon_Tab_Bar_Container_Badge_Size",
            "--fdIcon_Tab_Bar_Text_Focus_Radius",
            "--fdIconTabBar_Multi_Click_Separator_Background",
            "--fdIcon_Tab_Bar_Multi_Click_Button_Separator_Display",
            "--fdIcon_Tab_Bar_Separator_Color",
            "--fdButton_Hover_Shadow",
            "--fdIcon_Tab_Bar_Selection_Color",
            "--fdIconTabBar_Arrow_Color",
            "--fdButtonColor",
            "--fdIcon_Tab_Bar_Label_Hover_Color",
            "--fdIcon_Tab_Bar_Icon_Focus_Radius",
            "--fdIcon_Tab_Bar_Icon_Focus_Offset",
            "--fdIcon_Tab_Bar_Single_Click_Icon_Container_Padding_Left",
            "--fdIcon_Tab_Bar_Single_Click_Icon_Container_Padding_Right",
            "--fdIcon_Tab_Bar_Single_Click_Icon_Container_Width",
            "--fdIcon_Tab_Bar_Label_Font_Family",
            "--fdIcon_Tab_Bar_Icon_Border_Weight",
            "--fdIcon_Tab_Bar_Label_Color",
            "--fdIconTabBar_Overflow_Button_Icon_Color",
            "--fdIconTabBar_Overflow_Button_Background",
            "--fdIconTabBar_Overflow_Button_Border_Color",
            "--fdIconTabBar_Overflow_Button_Text_Color",
            "--fdIcon_Tab_Bar_Overflow_Button_Font_Family",
            "--fdIcon_Tab_Bar_Overflow_Button_Text_Color_Hover",
            "--fdIcon_Tab_Bar_Overflow_Button_Icon_Color_Hover",
            "--fdIcon_Tab_Bar_Overflow_Button_Focus_Border_Radius",
            "--fdList_Navigation_Link_Padding_Left",
            "--fdList_Navigation_Link_Padding_Right",
            "--fdIconTabBar_Button_Shell_Color_Active",
            "--fdIconTabBar_Overflow_Button_Shell_Background",
            "--fdIconTabBar_Overflow_Button_Shell_Text_Color",
            "--fdIconTabBar_Overflow_Button_Shell_Icon_Color",
            "--fdIconTabBar_Overflow_Button_Shell_Background_Hover",
            "--fdIconTabBar_Overflow_Button_Shell_Border_Color_Hover",
            "--fdIconTabBar_Overflow_Button_Shell_Text_Color_Hover",
            "--fdIconTabBar_Overflow_Button_Shell_Icon_Color_Hover",
            "--fdIconTabBar_Overflow_Button_Shell_Background_Active",
            "--fdIconTabBar_Overflow_Button_Shell_Border_Color_Active",
            "--fdIconTabBar_Overflow_Button_Shell_Text_Color_Active",
            "--fdIconTabBar_Overflow_Button_Shell_Icon_Color_Active",
            "--fdIconTabBar_Overflow_Button_Shell_Focus_Color",
            "--fdIconTabBar_Button_Shell_Color",
            "--fdIconTabBar_Button_Shell_Color_Hover",
            "--fdButtonBorderColor",
            "--fdIconTabBar_Button_Shell_Background_Color_Hover",
            "--fdButtonBackgroundColor",
            "--fdIconTabBar_Button_Shell_Background_Color_Active",
            "--fdIconTabBar_Button_Shell_Focus_Color",
            "--fdIconTabBar_Button_Shell_Background_Color_Selected"
          ],
          "tags": [
            "f3",
            "development"
          ],
          "examples": [
            "badge",
            "counter",
            "drag-and-drop",
            "filter",
            "icon-only-semantic",
            "icon-only",
            "icon",
            "multi-click",
            "navigation-flat",
            "navigation",
            "overflow",
            "paddings",
            "process",
            "resp-paddings",
            "single-click",
            "text-only-closable",
            "text-only-semantic",
            "text-only"
          ],
          "category": "navigation",
          "subcategory": "tabs",
          "useCases": [
            "Tabs with icons and counts",
            "Filter bar with visual indicators",
            "Status-based filtering",
            "Category switching with badges"
          ],
          "avoidWhen": [
            "Simple text tabs (use tabs)",
            "Navigation between pages (use side-nav)",
            "Icon-only actions (use toolbar)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "tabs",
            "toolbar",
            "segmented-button"
          ],
          "dependencies": []
        },
        {
          "id": "icon",
          "name": "Icon",
          "category": "visual",
          "subcategory": "icons",
          "description": "SAP icon font for displaying icons throughout the UI",
          "baseClass": "fd-icon",
          "cssImport": "fundamental-styles/dist/icon.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-icon",
          "useCases": [
            "Visual indicators",
            "Action buttons",
            "Status indicators",
            "Navigation elements"
          ],
          "modifiers": [],
          "accessibility": {
            "role": "presentation",
            "ariaAttributes": [
              "aria-label"
            ],
            "ariaHidden": "Use when decorative"
          },
          "relatedComponents": [
            "button",
            "avatar",
            "status-indicator"
          ],
          "dependencies": [],
          "iconCatalogs": [
            "SAP Icons",
            "TNT Icons",
            "Business Suite Icons"
          ],
          "tags": [],
          "elements": [],
          "variables": [
            "--fdIcon_Font_Size",
            "--fdIcon_Color",
            "--fdIcon_Background_Color"
          ],
          "examples": [],
          "avoidWhen": []
        },
        {
          "id": "illustrated-message",
          "name": "Illustrated Message",
          "description": "Illustrated messages for SAP Fiori are a simple yet powerful way to engage users and add personality to the experience.",
          "baseClass": "fd-illustrated-message",
          "cssImport": "fundamental-styles/dist/illustrated-message.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-illustrated-message",
          "modifiers": [
            {
              "class": "fd-illustrated-message--dialog",
              "description": "dialog variant"
            },
            {
              "class": "fd-illustrated-message--medium",
              "description": "medium variant"
            },
            {
              "class": "fd-illustrated-message--spot",
              "description": "spot variant"
            },
            {
              "class": "fd-illustrated-message--small",
              "description": "small variant"
            },
            {
              "class": "fd-illustrated-message--dot",
              "description": "dot variant"
            },
            {
              "class": "fd-illustrated-message--xsmall",
              "description": "xsmall variant"
            },
            {
              "class": "fd-illustrated-message--base",
              "description": "base variant"
            },
            {
              "class": "fd-illustrated-message--subtle",
              "description": "subtle variant"
            },
            {
              "class": "fd-illustrated-message--undecorated",
              "description": "undecorated variant"
            },
            {
              "class": "fd-illustrated-message--emphasized",
              "description": "emphasized variant"
            },
            {
              "class": "fd-illustrated-message--touch-target",
              "description": "touch-target variant"
            },
            {
              "class": "fd-illustrated-message--inverted",
              "description": "inverted variant"
            }
          ],
          "elements": [
            {
              "class": "fd-illustrated-message__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-illustrated-message__illustration",
              "description": "illustration element",
              "modifiers": []
            },
            {
              "class": "fd-illustrated-message__figcaption",
              "description": "figcaption element",
              "modifiers": []
            },
            {
              "class": "fd-illustrated-message__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-illustrated-message__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-illustrated-message__actions",
              "description": "actions element",
              "modifiers": []
            },
            {
              "class": "fd-illustrated-message__content",
              "description": "content element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdLink_Text_Decoration",
            "--fdLink_Text_Content_Decoration",
            "--fdLink_Text_Decoration_Hover",
            "--fdLink_Text_Content_Decoration_Hover",
            "--fdLink_Text_Decoration_Focus",
            "--fdLink_Text_Content_Decoration_Focus",
            "--fdLink_Text_Decoration_Active",
            "--fdLink_Text_Content_Decoration_Active",
            "--fdLink_Text_Decoration_Disabled",
            "--fdLink_Text_Content_Decoration_Disabled",
            "--fdLink_Text_Content_Decoration_Subtle",
            "--fdLink_Text_Content_Decoration_Subtle_Hover",
            "--fdLink_Text_Content_Decoration_Subtle_Active",
            "--fdLink_Text_Decoration_Subtle",
            "--fdLink_Text_Decoration_Subtle_Hover",
            "--fdLink_Text_Decoration_Subtle_Active",
            "--fdLink_Text_Decoration_Visited",
            "--fdLink_Text_Content_Decoration_Visited",
            "--fdLink_Display",
            "--fdLink_Line_Height",
            "--fdLink_Text_Focus_Color",
            "--fdLink_Focus_Background",
            "--fdLink_Focus_Border_Radius",
            "--fdLink_Focus_Text_Shadow",
            "--fdLink_Hover_Outline_Offset",
            "--fdLink_Hover_Outline_Color",
            "--fdLink_Hover_Outline_Style",
            "--fdLink_Hover_Outline_Width",
            "--fdScrollbar_Thumb_Color",
            "--fdScrollbar_Track_Color",
            "--fdScrollbar_Dimension",
            "--fdScrollbar_Thumb_Offset",
            "--fdScrollbar_Thumb_Border_Radius",
            "--fdScrollbar_Thumb_Hover_Color"
          ],
          "tags": [],
          "examples": [
            "base",
            "large",
            "medium",
            "small",
            "xsmall"
          ],
          "category": "feedback",
          "subcategory": null,
          "useCases": [
            "Empty state with illustration",
            "Error page with visual",
            "No results found",
            "First-time user guidance"
          ],
          "avoidWhen": [
            "Inline errors (use message-strip)",
            "Simple text messages (use text)",
            "Temporary feedback (use message-toast)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "message-page",
            "message-strip"
          ],
          "dependencies": []
        },
        {
          "id": "info-label",
          "name": "Info Label",
          "description": "Info Label is a small non-interactive numeric or text-based label.",
          "baseClass": "fd-info-label",
          "cssImport": "fundamental-styles/dist/info-label.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-info-label",
          "modifiers": [
            {
              "class": "fd-info-label--display",
              "description": "display variant"
            },
            {
              "class": "fd-info-label--accent-color-1",
              "description": "accent-color-1 variant"
            },
            {
              "class": "fd-info-label--accent-color-2",
              "description": "accent-color-2 variant"
            },
            {
              "class": "fd-info-label--accent-color-3",
              "description": "accent-color-3 variant"
            },
            {
              "class": "fd-info-label--accent-color-4",
              "description": "accent-color-4 variant"
            },
            {
              "class": "fd-info-label--accent-color-5",
              "description": "accent-color-5 variant"
            },
            {
              "class": "fd-info-label--accent-color-6",
              "description": "accent-color-6 variant"
            },
            {
              "class": "fd-info-label--accent-color-7",
              "description": "accent-color-7 variant"
            },
            {
              "class": "fd-info-label--accent-color-8",
              "description": "accent-color-8 variant"
            },
            {
              "class": "fd-info-label--accent-color-9",
              "description": "accent-color-9 variant"
            },
            {
              "class": "fd-info-label--accent-color-10",
              "description": "accent-color-10 variant"
            },
            {
              "class": "fd-info-label--numeric",
              "description": "numeric variant"
            }
          ],
          "elements": [
            {
              "class": "fd-info-label__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-info-label__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-info-label__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdInfo_Label_Background_Color1",
            "--fdInfo_Label_Border_Color1",
            "--fdInfo_Label_Color1",
            "--fdInfo_Label_Background_Color2",
            "--fdInfo_Label_Border_Color2",
            "--fdInfo_Label_Color2",
            "--fdInfo_Label_Background_Color3",
            "--fdInfo_Label_Border_Color3",
            "--fdInfo_Label_Color3",
            "--fdInfo_Label_Background_Color4",
            "--fdInfo_Label_Border_Color4",
            "--fdInfo_Label_Color4",
            "--fdInfo_Label_Background_Color5",
            "--fdInfo_Label_Border_Color5",
            "--fdInfo_Label_Color5",
            "--fdInfo_Label_Background_Color6",
            "--fdInfo_Label_Border_Color6",
            "--fdInfo_Label_Color6",
            "--fdInfo_Label_Background_Color7",
            "--fdInfo_Label_Border_Color7",
            "--fdInfo_Label_Color7",
            "--fdInfo_Label_Background_Color8",
            "--fdInfo_Label_Border_Color8",
            "--fdInfo_Label_Color8",
            "--fdInfo_Label_Background_Color9",
            "--fdInfo_Label_Border_Color9",
            "--fdInfo_Label_Color9",
            "--fdInfo_Label_Background_Color10",
            "--fdInfo_Label_Border_Color10",
            "--fdInfo_Label_Color10",
            "--fdInfoLabel_Margin",
            "--fdInfoLabel_Padding",
            "--fdInfoLabel_Icon_Size",
            "--fdInfoLabel_Height",
            "--fdInfo_Label_Height",
            "--fdInfoLabel_Label_Font_Size",
            "--fdInfoLabel_Color",
            "--fdInfoLabel_Color_Accent_7",
            "--fdInfoLabel_Border_Radius",
            "--fdInfo_Label_Border_Radius",
            "--fdInfoLabel_Border_Color",
            "--fdInfoLabel_Background",
            "--fdInfoLabel_Background_Color_Accent_7",
            "--fdInfo_Label_Height_Display",
            "--fdInfo_Label_Border_Radius_Display"
          ],
          "tags": [
            "btp"
          ],
          "examples": [
            "color-flavors",
            "display-only-info-label",
            "info-label-with-icon",
            "numeric-info-label"
          ],
          "category": "visual",
          "subcategory": null,
          "useCases": [
            "Colored status labels",
            "Category tags",
            "Priority indicators",
            "Classification badges"
          ],
          "avoidWhen": [
            "Counts (use counter or badge)",
            "Object status (use object-status)",
            "Removable tags (use token)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "badge",
            "object-status",
            "token"
          ],
          "dependencies": []
        },
        {
          "id": "input-group",
          "name": "Input Group",
          "description": "Input Group component",
          "baseClass": "fd-input-group",
          "cssImport": "fundamental-styles/dist/input-group.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-input-group",
          "modifiers": [
            {
              "class": "fd-input-group--inline",
              "description": "inline variant"
            },
            {
              "class": "fd-input-group--readonly",
              "description": "readonly variant"
            },
            {
              "class": "fd-input-group--button",
              "description": "button variant"
            },
            {
              "class": "fd-input-group--control",
              "description": "control variant"
            },
            {
              "class": "fd-input-group--display",
              "description": "display variant"
            }
          ],
          "elements": [
            {
              "class": "fd-input-group__addon",
              "description": "addon element",
              "modifiers": []
            },
            {
              "class": "fd-input-group__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdInputGroup_Background",
            "--fdInputGroup_Background_Color",
            "--fdInputGroup_Hover_Background",
            "--fdInputGroup_Hover_Background_Color",
            "--fdInput_Height",
            "--fdInput_Compact_Height",
            "--fdInput_Outline_Color",
            "--fdInput_Outline_Offset",
            "--fdInputGroup_Input_Background",
            "--fdInputGroup_Text_Shadow",
            "--fdInputGroup_Input_Border",
            "--fdInputGroup_Input_Color",
            "--fdInputGroup_Input_Placeholder_Color",
            "--fdInputGroup_Input_Placeholder_Style",
            "--fdInputGroup_Hover_Input_Background",
            "--fdInputGroup_Addon_Background",
            "--fdInput_Group_Addon_Width",
            "--fdInput_Group_Addon_Height",
            "--fdInput_Field_Margin_Block",
            "--fdInput_Field_Compact_Margin_Block",
            "--fdButton_Focus_Border_Radius",
            "--fdButton_Outline_Contrast",
            "--fdButtonPrioritizedBorderColor"
          ],
          "tags": [],
          "examples": [],
          "category": "form-inputs",
          "subcategory": "composite",
          "useCases": [
            "Input with prefix/suffix",
            "Input with button addon",
            "Input with icon",
            "Combined input controls"
          ],
          "avoidWhen": [
            "Simple inputs (use input)",
            "Dropdown selection (use select)",
            "Search functionality (use search-field)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "input",
            "search-field",
            "select"
          ],
          "dependencies": []
        },
        {
          "id": "input",
          "name": "Input",
          "category": "forms",
          "subcategory": "input",
          "description": "Single-line text input field for collecting user data",
          "baseClass": "fd-input",
          "cssImport": "fundamental-styles/dist/input.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-input",
          "useCases": [
            "Collect short text",
            "Enter numbers",
            "Email addresses",
            "Search terms"
          ],
          "avoidWhen": [
            "Long-form text input (use textarea instead)"
          ],
          "modifiers": [
            {
              "class": "fd-input--no-number-spinner",
              "description": "no-number-spinner variant"
            }
          ],
          "accessibility": {
            "role": "textbox",
            "ariaAttributes": [
              "aria-label",
              "aria-describedby",
              "aria-invalid",
              "aria-required"
            ],
            "labelRequired": true
          },
          "relatedComponents": [
            "input-group",
            "form-item",
            "form-label",
            "textarea"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-input__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [],
          "examples": []
        },
        {
          "id": "layout-grid",
          "name": "Layout Grid",
          "description": "Layout Grid component",
          "baseClass": "fd-layout-grid",
          "cssImport": "fundamental-styles/dist/layout-grid.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-layout-grid",
          "modifiers": [
            {
              "class": "fd-layout-grid--full",
              "description": "full variant"
            },
            {
              "class": "fd-layout-grid--wrap",
              "description": "wrap variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Responsive grid layouts",
            "Dashboard card arrangements",
            "Form column layouts",
            "Content grid organization"
          ],
          "avoidWhen": [
            "Simple flexbox needs (use sap-flex utilities)",
            "Master-detail (use flexible-column-layout)",
            "List layouts (use list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "flexible-column-layout",
            "fixed-card-layout"
          ],
          "dependencies": []
        },
        {
          "id": "layout-panel",
          "name": "Layout Panel",
          "description": "Layout Panel component",
          "baseClass": "fd-layout-panel",
          "cssImport": "fundamental-styles/dist/layout-panel.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-layout-panel",
          "modifiers": [
            {
              "class": "fd-layout-panel--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-layout-panel--full-bleed",
              "description": "full-bleed variant"
            },
            {
              "class": "fd-layout-panel--bleed",
              "description": "bleed variant"
            },
            {
              "class": "fd-layout-panel--end",
              "description": "end variant"
            },
            {
              "class": "fd-layout-panel--start",
              "description": "start variant"
            }
          ],
          "elements": [
            {
              "class": "fd-layout-panel__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-layout-panel__head",
              "description": "head element",
              "modifiers": []
            },
            {
              "class": "fd-layout-panel__description",
              "description": "description element",
              "modifiers": []
            },
            {
              "class": "fd-layout-panel__actions",
              "description": "actions element",
              "modifiers": []
            },
            {
              "class": "fd-layout-panel__filters",
              "description": "filters element",
              "modifiers": []
            },
            {
              "class": "fd-layout-panel__body",
              "description": "body element",
              "modifiers": []
            },
            {
              "class": "fd-layout-panel__footer",
              "description": "footer element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Standalone content panel",
            "Dashboard panel",
            "Content container with header",
            "Bordered content area"
          ],
          "avoidWhen": [
            "Collapsible panels (use panel)",
            "Cards with actions (use card)",
            "Form sections (use form-group)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "panel",
            "card",
            "section"
          ],
          "dependencies": []
        },
        {
          "id": "layout",
          "name": "Layout",
          "description": "Layout component",
          "baseClass": "fd-layout",
          "cssImport": "fundamental-styles/dist/layout.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-layout",
          "modifiers": [],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Basic page structure",
            "Container element",
            "Content wrapper",
            "Layout foundation"
          ],
          "avoidWhen": [
            "Complex layouts (use layout-grid)",
            "Multi-column (use flexible-column-layout)",
            "Pages (use page component)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "page",
            "layout-grid"
          ],
          "dependencies": []
        },
        {
          "id": "link",
          "name": "Link",
          "category": "interactive",
          "subcategory": "navigation",
          "description": "Navigation link for moving to different pages or sections",
          "baseClass": "fd-link",
          "cssImport": "fundamental-styles/dist/link.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-link",
          "useCases": [
            "Navigate to another page",
            "Link to external resources",
            "In-page navigation"
          ],
          "avoidWhen": [
            "Triggering actions (use button instead)"
          ],
          "modifiers": [],
          "accessibility": {
            "role": "link",
            "ariaAttributes": [
              "aria-label"
            ],
            "semanticHtml": true
          },
          "relatedComponents": [
            "button"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-link__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdLink_Line_Height",
            "--fdLink_Text_Decoration_Hover",
            "--fdLink_Text_Decoration_Focus",
            "--fdLink_Text_Focus_Color",
            "--fdLink_Text_Decoration_Active"
          ],
          "examples": []
        },
        {
          "id": "list",
          "name": "List",
          "category": "data-display",
          "subcategory": "lists",
          "description": "Vertical list of items for simple or complex data display",
          "baseClass": "fd-list",
          "cssImport": "fundamental-styles/dist/list.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-list",
          "useCases": [
            "Display simple lists",
            "Navigation menus",
            "Selection lists",
            "Action lists"
          ],
          "avoidWhen": [
            "Tabular data (use table instead)",
            "Hierarchical data (use tree instead)"
          ],
          "modifiers": [
            {
              "class": "fd-list--unread",
              "description": "unread variant"
            },
            {
              "class": "fd-list--no-data",
              "description": "no-data variant"
            },
            {
              "class": "fd-list--interractive",
              "description": "interractive variant"
            },
            {
              "class": "fd-list--interactive",
              "description": "interactive variant"
            },
            {
              "class": "fd-list--action",
              "description": "action variant"
            },
            {
              "class": "fd-list--growing",
              "description": "growing variant"
            },
            {
              "class": "fd-list--inactive",
              "description": "inactive variant"
            },
            {
              "class": "fd-list--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-list--critical",
              "description": "critical variant"
            },
            {
              "class": "fd-list--negative",
              "description": "negative variant"
            },
            {
              "class": "fd-list--informative",
              "description": "informative variant"
            },
            {
              "class": "fd-list--right",
              "description": "right variant"
            },
            {
              "class": "fd-list--left",
              "description": "left variant"
            },
            {
              "class": "fd-list--error",
              "description": "error variant"
            },
            {
              "class": "fd-list--warning",
              "description": "warning variant"
            },
            {
              "class": "fd-list--success",
              "description": "success variant"
            },
            {
              "class": "fd-list--information",
              "description": "information variant"
            },
            {
              "class": "fd-list--no-border",
              "description": "no-border variant"
            },
            {
              "class": "fd-list--has-message",
              "description": "has-message variant"
            },
            {
              "class": "fd-list--dropdown",
              "description": "dropdown variant"
            },
            {
              "class": "fd-list--multi-input",
              "description": "multi-input variant"
            },
            {
              "class": "fd-list--no-wrap",
              "description": "no-wrap variant"
            },
            {
              "class": "fd-list--byline",
              "description": "byline variant"
            },
            {
              "class": "fd-list--2-col",
              "description": "2-col variant"
            },
            {
              "class": "fd-list--wrap",
              "description": "wrap variant"
            },
            {
              "class": "fd-list--more",
              "description": "more variant"
            },
            {
              "class": "fd-list--subline",
              "description": "subline variant"
            },
            {
              "class": "fd-list--truncate",
              "description": "truncate variant"
            },
            {
              "class": "fd-list--message-view",
              "description": "message-view variant"
            },
            {
              "class": "fd-list--suggestion",
              "description": "suggestion variant"
            },
            {
              "class": "fd-list--navigation",
              "description": "navigation variant"
            },
            {
              "class": "fd-list--navigation-indication",
              "description": "navigation-indication variant"
            },
            {
              "class": "fd-list--navigation-indicator",
              "description": "navigation-indicator variant"
            },
            {
              "class": "fd-list--selection",
              "description": "selection variant"
            },
            {
              "class": "fd-list--unread-indicator",
              "description": "unread-indicator variant"
            },
            {
              "class": "fd-list--search-results",
              "description": "search-results variant"
            }
          ],
          "elements": [
            {
              "class": "fd-list__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-list__item--growing",
                  "description": "growing variant of item"
                },
                {
                  "class": "fd-list__item--action",
                  "description": "action variant of item"
                },
                {
                  "class": "fd-list__item--link",
                  "description": "link variant of item"
                },
                {
                  "class": "fd-list__item--interractive",
                  "description": "interractive variant of item"
                },
                {
                  "class": "fd-list__item--unread",
                  "description": "unread variant of item"
                },
                {
                  "class": "fd-list__item--inactive",
                  "description": "inactive variant of item"
                },
                {
                  "class": "fd-list__item--suggestion",
                  "description": "suggestion variant of item"
                },
                {
                  "class": "fd-list__item--byline",
                  "description": "byline variant of item"
                }
              ]
            },
            {
              "class": "fd-list__group-header",
              "description": "group-header element",
              "modifiers": []
            },
            {
              "class": "fd-list__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-list__title",
              "description": "title element",
              "modifiers": [
                {
                  "class": "fd-list__title--scope",
                  "description": "scope variant of title"
                },
                {
                  "class": "fd-list__title--wrap",
                  "description": "wrap variant of title"
                },
                {
                  "class": "fd-list__title--truncate",
                  "description": "truncate variant of title"
                }
              ]
            },
            {
              "class": "fd-list__secondary",
              "description": "secondary element",
              "modifiers": [
                {
                  "class": "fd-list__secondary--positive",
                  "description": "positive variant of secondary"
                },
                {
                  "class": "fd-list__secondary--critical",
                  "description": "critical variant of secondary"
                },
                {
                  "class": "fd-list__secondary--negative",
                  "description": "negative variant of secondary"
                },
                {
                  "class": "fd-list__secondary--informative",
                  "description": "informative variant of secondary"
                }
              ]
            },
            {
              "class": "fd-list__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-list__link",
              "description": "link element",
              "modifiers": [
                {
                  "class": "fd-list__link--navigation-indicator",
                  "description": "navigation-indicator variant of link"
                },
                {
                  "class": "fd-list__link--more",
                  "description": "more variant of link"
                }
              ]
            },
            {
              "class": "fd-list__bold",
              "description": "bold element",
              "modifiers": []
            },
            {
              "class": "fd-list__message",
              "description": "message element",
              "modifiers": []
            },
            {
              "class": "fd-list__infinite-scroll",
              "description": "infinite-scroll element",
              "modifiers": []
            },
            {
              "class": "fd-list__item-counter",
              "description": "item-counter element",
              "modifiers": []
            },
            {
              "class": "fd-list__byline",
              "description": "byline element",
              "modifiers": [
                {
                  "class": "fd-list__byline--2-col",
                  "description": "2-col variant of byline"
                },
                {
                  "class": "fd-list__byline--wrap",
                  "description": "wrap variant of byline"
                }
              ]
            },
            {
              "class": "fd-list__byline-right",
              "description": "byline-right element",
              "modifiers": [
                {
                  "class": "fd-list__byline-right--positive",
                  "description": "positive variant of byline-right"
                },
                {
                  "class": "fd-list__byline-right--informative",
                  "description": "informative variant of byline-right"
                }
              ]
            },
            {
              "class": "fd-list__subline",
              "description": "subline element",
              "modifiers": [
                {
                  "class": "fd-list__subline--truncate",
                  "description": "truncate variant of subline"
                }
              ]
            }
          ],
          "accessibility": {
            "role": "list",
            "ariaAttributes": [
              "aria-label"
            ],
            "semanticHtml": true
          },
          "relatedComponents": [
            "table",
            "grid-list",
            "tree",
            "navigation-list"
          ],
          "dependencies": [],
          "tags": [],
          "variables": [
            "--fdList_Item_Height",
            "--fdList_Item_Border_Color",
            "--fdList_Item_Background_Color",
            "--fdList_Item_Action_Border",
            "--fdList_Item_Action_Button_Size",
            "--fdList_Item_Action_Button_Spacing",
            "--fdList_Item_Action_Button_Border",
            "--fdList_Item_Action_Button_Border_Radius",
            "--fdList_Active_Outline_Color",
            "--fdList_Growing_Font_Weight",
            "--fdList_Item_Text_Color",
            "--fdList_Item_Text_Font_Size",
            "--fdList_Status_Text_Color",
            "--fdList_Item_Icon_Font_Size",
            "--fdList_Message_Background_Color",
            "--fdList_Button_Spacing",
            "--fdList_Item_Action_Button_Size_Compact",
            "--fdListNavigationIndicatorFontSize",
            "--fdList_Message_View_Item_Byline_Height",
            "--fdList_Message_View_Title_Size",
            "--fdList_Message_View_Item_Height",
            "--fdList_Navigation_Link_Padding_Left",
            "--fdList_Navigation_Link_Padding_Right"
          ],
          "examples": []
        },
        {
          "id": "margins",
          "name": "Margins",
          "description": "Margins component",
          "baseClass": "fd-margins",
          "cssImport": "fundamental-styles/dist/margins.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-margins",
          "modifiers": [
            {
              "class": "fd-margins--tiny",
              "description": "tiny variant"
            },
            {
              "class": "fd-margins--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-margins--md",
              "description": "md variant"
            },
            {
              "class": "fd-margins--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-margins--none",
              "description": "none variant"
            },
            {
              "class": "fd-margins--xl",
              "description": "xl variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "utilities",
          "subcategory": null,
          "useCases": [],
          "avoidWhen": [],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [],
          "dependencies": []
        },
        {
          "id": "menu",
          "name": "Menu",
          "category": "interactive",
          "subcategory": "menus",
          "description": "Contextual menu with list of actions or options",
          "baseClass": "fd-menu",
          "cssImport": "fundamental-styles/dist/menu.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-menu",
          "useCases": [
            "Display action lists",
            "Context menus",
            "Dropdown options",
            "Navigation menus"
          ],
          "modifiers": [
            {
              "class": "fd-menu--no-shadow",
              "description": "no-shadow variant"
            },
            {
              "class": "fd-menu--submenu",
              "description": "submenu variant"
            },
            {
              "class": "fd-menu--overflow",
              "description": "overflow variant"
            },
            {
              "class": "fd-menu--full-width",
              "description": "full-width variant"
            },
            {
              "class": "fd-menu--icons",
              "description": "icons variant"
            },
            {
              "class": "fd-menu--mobile",
              "description": "mobile variant"
            }
          ],
          "elements": [
            {
              "class": "fd-menu__list",
              "description": "list element",
              "modifiers": [
                {
                  "class": "fd-menu__list--overflow",
                  "description": "overflow variant of list"
                },
                {
                  "class": "fd-menu__list--no-shadow",
                  "description": "no-shadow variant of list"
                }
              ]
            },
            {
              "class": "fd-menu__sublist",
              "description": "sublist element",
              "modifiers": [
                {
                  "class": "fd-menu__sublist--icons",
                  "description": "icons variant of sublist"
                }
              ]
            },
            {
              "class": "fd-menu__list--overflow",
              "description": "list--overflow element",
              "modifiers": []
            },
            {
              "class": "fd-menu__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-menu__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-menu__link",
              "description": "link element",
              "modifiers": []
            },
            {
              "class": "fd-menu__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-menu__addon-before",
              "description": "addon-before element",
              "modifiers": []
            },
            {
              "class": "fd-menu__addon-after",
              "description": "addon-after element",
              "modifiers": [
                {
                  "class": "fd-menu__addon-after--submenu",
                  "description": "submenu variant of addon-after"
                }
              ]
            },
            {
              "class": "fd-menu__active-dot",
              "description": "active-dot element",
              "modifiers": []
            },
            {
              "class": "fd-menu__checkmark",
              "description": "checkmark element",
              "modifiers": []
            },
            {
              "class": "fd-menu__shortcut",
              "description": "shortcut element",
              "modifiers": []
            }
          ],
          "accessibility": {
            "role": "menu",
            "ariaAttributes": [
              "aria-label",
              "aria-expanded"
            ],
            "keyboardNavigation": true
          },
          "relatedComponents": [
            "button",
            "popover",
            "action-sheet"
          ],
          "dependencies": [],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "variables": [
            "--fdButton_Menu_Border_Radius",
            "--fdMenu_Icon_Width",
            "--fdMenu_Link_Height",
            "--fdMenu_Item_Spacing_Left",
            "--fdMenu_Item_Spacing_Right",
            "--fdMenu_Item_Border_Bottom_Color",
            "--fdMenu_Shortcut_Padding_Left",
            "--fdMenu_Shortcut_Padding_Right",
            "--fdMenu_Text_Spacing_Right",
            "--fdMenu_Icon_Color",
            "--fdMenu_Shortcut_Color",
            "--fdMenu_Shortcut_Color_Regular",
            "--fdMenu_Text_Color",
            "--fdMenu_Item_Background_Color",
            "--fdMenu_Active_Dot_Size",
            "--fdMenu_Shortcut_Color_Selected",
            "--fdMenu_Shortcut_Color_Selected_Hover",
            "--fdScrollbar_Border_Radius",
            "--fdMenu_Shortcut_Color_Active",
            "--fdMenu_Text_Color_Active",
            "--fdMenu_Active_State_Focus",
            "--fdMenu_Text_Shadow",
            "--fdMenu_Affordance_Arrow_Size"
          ],
          "examples": [
            "buttons",
            "default",
            "different-states",
            "input",
            "menu-icon",
            "mobile-mode",
            "overflow",
            "segmented-button",
            "seperated-items",
            "toggle-button",
            "with-submenu"
          ],
          "avoidWhen": []
        },
        {
          "id": "message-box",
          "name": "Message Box",
          "description": "The message box displays a dialog with a simple message to the user. Contrary to the **Popover**, message box can relay messages unrelated to the UI, such as technical errors. This component inherits the look and behavior of the **Dialog** (excluding dragging/resizing).",
          "baseClass": "fd-message-box",
          "cssImport": "fundamental-styles/dist/message-box.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-message-box",
          "modifiers": [
            {
              "class": "fd-message-box--mobile",
              "description": "mobile variant"
            },
            {
              "class": "fd-message-box--active",
              "description": "active variant"
            },
            {
              "class": "fd-message-box--information",
              "description": "information variant"
            },
            {
              "class": "fd-message-box--error",
              "description": "error variant"
            },
            {
              "class": "fd-message-box--success",
              "description": "success variant"
            },
            {
              "class": "fd-message-box--warning",
              "description": "warning variant"
            },
            {
              "class": "fd-message-box--confirmation",
              "description": "confirmation variant"
            }
          ],
          "elements": [
            {
              "class": "fd-message-box__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-message-box__content--s",
                  "description": "s variant of content"
                },
                {
                  "class": "fd-message-box__content--m",
                  "description": "m variant of content"
                },
                {
                  "class": "fd-message-box__content--l",
                  "description": "l variant of content"
                },
                {
                  "class": "fd-message-box__content--xl",
                  "description": "xl variant of content"
                }
              ]
            },
            {
              "class": "fd-message-box__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-message-box__body",
              "description": "body element",
              "modifiers": []
            },
            {
              "class": "fd-message-box__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-message-box__more",
              "description": "more element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdBar_Padding_X",
            "--fdMessageBox_Body_Inline_Padding",
            "--fdButton_Min_Width",
            "--fdBar_Shadow",
            "--fdIcon_Font_Size",
            "--fdIcon_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "responsive",
            "structure",
            "types"
          ],
          "category": "dialogs",
          "subcategory": "confirmation",
          "useCases": [
            "Confirmation dialogs",
            "Error dialogs requiring acknowledgment",
            "Warning with user decision",
            "Information requiring OK"
          ],
          "avoidWhen": [
            "Complex forms (use dialog)",
            "Non-blocking messages (use message-toast)",
            "Inline feedback (use message-strip)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "dialog",
            "message-strip",
            "message-toast"
          ],
          "dependencies": []
        },
        {
          "id": "message-page",
          "name": "Message Page",
          "description": "Message page displays a message to the user when an app or list is empty or if an error has occurred. The text and icon on the message page changes depending on the use case, however, the layout stays the same. It is responsive and adjusts to fit the available screen space.",
          "baseClass": "fd-message-page",
          "cssImport": "fundamental-styles/dist/message-page.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-message-page",
          "modifiers": [
            {
              "class": "fd-message-page--center",
              "description": "center variant"
            }
          ],
          "elements": [
            {
              "class": "fd-message-page__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__subtitle",
              "description": "subtitle element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__actions",
              "description": "actions element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__more",
              "description": "more element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__illustration-container",
              "description": "illustration-container element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__icon-container",
              "description": "icon-container element",
              "modifiers": []
            },
            {
              "class": "fd-message-page__icon",
              "description": "icon element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdMessage_Page_Container_Background",
            "--fdMessage_Page_Container_Corner_Radius",
            "--fdMessage_Page_Title_Margin_Top",
            "--fdMessage_Page_Title_Margin_Bottom"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "examples": [
            "buttons",
            "error",
            "filter",
            "no-items",
            "search"
          ],
          "category": "feedback",
          "subcategory": null,
          "useCases": [
            "Full page error states",
            "404 not found pages",
            "Access denied pages",
            "Maintenance mode display"
          ],
          "avoidWhen": [
            "Inline errors (use message-strip)",
            "Empty states within page (use illustrated-message)",
            "Temporary messages (use message-toast)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "illustrated-message",
            "message-strip"
          ],
          "dependencies": []
        },
        {
          "id": "message-popover",
          "name": "Message Popover",
          "description": "A Message Popover is used to display a summarized list of different types of messages (error, warning, success, and information messages).",
          "baseClass": "fd-message-popover",
          "cssImport": "fundamental-styles/dist/message-popover.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-message-popover",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-message-popover__trigger",
              "description": "trigger element",
              "modifiers": [
                {
                  "class": "fd-message-popover__trigger--negative",
                  "description": "negative variant of trigger"
                },
                {
                  "class": "fd-message-popover__trigger--information",
                  "description": "information variant of trigger"
                },
                {
                  "class": "fd-message-popover__trigger--critical",
                  "description": "critical variant of trigger"
                },
                {
                  "class": "fd-message-popover__trigger--success",
                  "description": "success variant of trigger"
                }
              ]
            }
          ],
          "variables": [
            "--fdButtonColor",
            "--fdButtonBackgroundColor",
            "--fdButtonBorderColor",
            "--fdButtonTextShadow",
            "--fdMessagePopover_Critical_Regular_Text_Shadow",
            "--fdMessagePopover_Critical_Hover_Text_Shadow",
            "--fdMessagePopover_Critical_Active_Text_Shadow",
            "--fdMessagePopover_Negative_Regular_Text_Shadow",
            "--fdMessagePopover_Negative_Hover_Text_Shadow",
            "--fdMessagePopover_Negative_Active_Text_Shadow",
            "--fdMessagePopover_Success_Regular_Text_Shadow",
            "--fdMessagePopover_Success_Hover_Text_Shadow",
            "--fdMessagePopover_Success_Active_Text_Shadow",
            "--fdMessagePopover_Information_Regular_Color",
            "--fdMessagePopover_Information_Regular_Background_Color",
            "--fdMessagePopover_Information_Regular_Border_Color",
            "--fdMessagePopover_Information_Regular_Text_Shadow",
            "--fdMessagePopover_Information_Hover_Color",
            "--fdMessagePopover_Information_Hover_Background_Color",
            "--fdMessagePopover_Information_Hover_Border_Color",
            "--fdMessagePopover_Information_Hover_Text_Shadow",
            "--fdMessagePopover_Information_Active_Color",
            "--fdMessagePopover_Information_Active_Background_Color",
            "--fdMessagePopover_Information_Active_Border_Color",
            "--fdMessagePopover_Information_Active_Text_Shadow",
            "--fdButtonFocusColor",
            "--fdMessagePopover_Trigger_Border_Width",
            "--fdMessagePopover_Information_Focus_Outline_Color",
            "--fdMessagePopover_Active_Focus_Outline_Color"
          ],
          "tags": [
            "f3",
            "theme"
          ],
          "examples": [
            "cozy-message-popover",
            "details-view",
            "message-trigger"
          ],
          "category": "dialogs",
          "subcategory": null,
          "useCases": [
            "Form validation summary",
            "Multiple error messages",
            "Warning collection display",
            "Message center popover"
          ],
          "avoidWhen": [
            "Single inline error (use form-message)",
            "Page-level message (use message-strip)",
            "Confirmation needed (use message-box)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "form-message",
            "message-strip",
            "popover"
          ],
          "dependencies": []
        },
        {
          "id": "message-strip",
          "name": "Message Strip",
          "category": "feedback",
          "subcategory": "messages",
          "description": "Inline informational message for contextual feedback",
          "baseClass": "fd-message-strip",
          "cssImport": "fundamental-styles/dist/message-strip.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-message-strip",
          "useCases": [
            "Inline feedback",
            "Form validation messages",
            "Contextual information",
            "Page-level messages"
          ],
          "avoidWhen": [
            "Critical system messages (use alert)",
            "Temporary notifications (use message-toast)"
          ],
          "modifiers": [
            {
              "class": "fd-message-strip--warning",
              "description": "warning variant"
            },
            {
              "class": "fd-message-strip--error",
              "description": "error variant"
            },
            {
              "class": "fd-message-strip--success",
              "description": "success variant"
            },
            {
              "class": "fd-message-strip--information",
              "description": "information variant"
            },
            {
              "class": "fd-message-strip--no-icon",
              "description": "no-icon variant"
            },
            {
              "class": "fd-message-strip--dismissible",
              "description": "dismissible variant"
            },
            {
              "class": "fd-message-strip--link",
              "description": "link variant"
            },
            {
              "class": "fd-message-strip--indication-color-1",
              "description": "indication-color-1 variant"
            },
            {
              "class": "fd-message-strip--indication-color-1b",
              "description": "indication-color-1b variant"
            },
            {
              "class": "fd-message-strip--indication-color-2",
              "description": "indication-color-2 variant"
            },
            {
              "class": "fd-message-strip--indication-color-2b",
              "description": "indication-color-2b variant"
            },
            {
              "class": "fd-message-strip--indication-color-3",
              "description": "indication-color-3 variant"
            },
            {
              "class": "fd-message-strip--indication-color-3b",
              "description": "indication-color-3b variant"
            },
            {
              "class": "fd-message-strip--indication-color-4",
              "description": "indication-color-4 variant"
            },
            {
              "class": "fd-message-strip--indication-color-4b",
              "description": "indication-color-4b variant"
            },
            {
              "class": "fd-message-strip--indication-color-5",
              "description": "indication-color-5 variant"
            },
            {
              "class": "fd-message-strip--indication-color-5b",
              "description": "indication-color-5b variant"
            },
            {
              "class": "fd-message-strip--indication-color-6",
              "description": "indication-color-6 variant"
            },
            {
              "class": "fd-message-strip--indication-color-6b",
              "description": "indication-color-6b variant"
            },
            {
              "class": "fd-message-strip--indication-color-7",
              "description": "indication-color-7 variant"
            },
            {
              "class": "fd-message-strip--indication-color-7b",
              "description": "indication-color-7b variant"
            },
            {
              "class": "fd-message-strip--indication-color-8",
              "description": "indication-color-8 variant"
            },
            {
              "class": "fd-message-strip--indication-color-8b",
              "description": "indication-color-8b variant"
            },
            {
              "class": "fd-message-strip--indication-color-9",
              "description": "indication-color-9 variant"
            },
            {
              "class": "fd-message-strip--indication-color-9b",
              "description": "indication-color-9b variant"
            },
            {
              "class": "fd-message-strip--indication-color-10",
              "description": "indication-color-10 variant"
            },
            {
              "class": "fd-message-strip--indication-color-10b",
              "description": "indication-color-10b variant"
            }
          ],
          "accessibility": {
            "role": "status",
            "ariaAttributes": [
              "aria-live"
            ]
          },
          "relatedComponents": [
            "alert",
            "message-toast",
            "form-message"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-message-strip__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-message-strip__icon-container",
              "description": "icon-container element",
              "modifiers": []
            },
            {
              "class": "fd-message-strip__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdMessageStrip_Border_Color",
            "--fdMessageStrip_Border_Color_Neutral",
            "--fdMessageStrip_Background_Color",
            "--fdMessageStrip_Icon_Color",
            "--fdMessageStrip_Icon_Color_Neutral",
            "--fdMessageStrip_Text_Color",
            "--fdMessageStrip_Vertical_Padding",
            "--fdMessageStrip_Left_Padding",
            "--fdMessageStrip_Right_Padding",
            "--fdMessageStrip_Icon_Color_Warning",
            "--fdMessageStrip_Border_Color_Warning",
            "--fdMessageStrip_Icon_Color_Error",
            "--fdMessageStrip_Border_Color_Error",
            "--fdMessageStrip_Icon_Color_Success",
            "--fdMessageStrip_Border_Color_Success",
            "--fdMessageStrip_Icon_Color_Information",
            "--fdMessageStrip_Border_Color_Informative",
            "--fdButtonColor",
            "--fdButtonBackgroundColor",
            "--fdButtonBorderColor"
          ],
          "examples": [
            "default-strip",
            "error",
            "information",
            "message-strip-with-accent-colors",
            "message-strip-with-custom-icon",
            "message-strip-with-link",
            "no-icons-not-dismissible",
            "no-icons",
            "success",
            "warning"
          ]
        },
        {
          "id": "message-toast",
          "name": "Message Toast",
          "description": "The message toast is a small, non-disruptive popup for success messages that disappears automatically after a few seconds. When message toast is displayed, it is always centered horizontally at the bottom of the screen and fades in and out automatically.",
          "baseClass": "fd-message-toast",
          "cssImport": "fundamental-styles/dist/message-toast.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-message-toast",
          "modifiers": [],
          "elements": [],
          "variables": [],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "default-toast"
          ],
          "category": "feedback",
          "subcategory": null,
          "useCases": [
            "Success confirmations",
            "Auto-dismissing notifications",
            "Non-critical updates",
            "Action completion feedback"
          ],
          "avoidWhen": [
            "Errors requiring action (use message-strip or message-box)",
            "Persistent messages (use message-strip)",
            "Messages with actions (use notification)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "message-strip",
            "notification",
            "message-box"
          ],
          "dependencies": []
        },
        {
          "id": "micro-process-flow",
          "name": "Micro Process Flow",
          "description": "The micro process flow control enables you to visualize the state of individual items in a linear workflow. You can embed it into a list or a table.",
          "baseClass": "fd-micro-process-flow",
          "cssImport": "fundamental-styles/dist/micro-process-flow.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-micro-process-flow",
          "modifiers": [
            {
              "class": "fd-micro-process-flow--information",
              "description": "information variant"
            },
            {
              "class": "fd-micro-process-flow--independent-steps",
              "description": "independent-steps variant"
            },
            {
              "class": "fd-micro-process-flow--intermediate",
              "description": "intermediate variant"
            }
          ],
          "elements": [
            {
              "class": "fd-micro-process-flow__wrapper",
              "description": "wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-micro-process-flow__overflow-container",
              "description": "overflow-container element",
              "modifiers": []
            },
            {
              "class": "fd-micro-process-flow__link-previous",
              "description": "link-previous element",
              "modifiers": []
            },
            {
              "class": "fd-micro-process-flow__link-next",
              "description": "link-next element",
              "modifiers": []
            },
            {
              "class": "fd-micro-process-flow__focusable-item",
              "description": "focusable-item element",
              "modifiers": []
            },
            {
              "class": "fd-micro-process-flow__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-micro-process-flow__connector",
              "description": "connector element",
              "modifiers": [
                {
                  "class": "fd-micro-process-flow__connector--intermediate",
                  "description": "intermediate variant of connector"
                }
              ]
            },
            {
              "class": "fd-micro-process-flow__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-micro-process-flow__item--positive",
                  "description": "positive variant of item"
                },
                {
                  "class": "fd-micro-process-flow__item--information",
                  "description": "information variant of item"
                },
                {
                  "class": "fd-micro-process-flow__item--negative",
                  "description": "negative variant of item"
                },
                {
                  "class": "fd-micro-process-flow__item--critical",
                  "description": "critical variant of item"
                }
              ]
            }
          ],
          "variables": [
            "--fdMicro_Process_Flow_Item_Background",
            "--fdMicro_Process_Flow_Item_Border_Color",
            "--fdMicro_Process_Flow_Item_Hover_Background",
            "--fdMicro_Process_Flow_Item_Hover_Border_Color",
            "--fdMicro_Process_Flow_Item_Active_Background",
            "--fdMicro_Process_Flow_Item_Active_Border_Color",
            "--fdMicro_Process_Flow_Item_Width",
            "--fdMicro_Process_Flow_Item_Min_Width",
            "--fdMicro_Process_Flow_Compact_Item_Width",
            "--fdMicro_Process_Flow_Compact_Item_Min_Width",
            "--fdMicro_Process_Flow_Connector_Width",
            "--fdMicro_Process_Flow_Compact_Connector_Width",
            "--fdMicro_Process_Flow_Icon_Font_Size",
            "--fdMicro_Process_Flow_Visible_items",
            "--fdMicro_Process_Flow_Max_Container_Width",
            "--fdMicro_Process_Flow_Compact_Max_Container_Width",
            "--fdMicro_Process_Flow_Icon_Color",
            "--fdMicro_Process_Flow_Active_Icon_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "default-micro-process-flow",
            "micro-process-flow-custom-width",
            "micro-process-flow-custom",
            "micro-process-flow-independent-steps",
            "micro-process-flow-with-objects",
            "micro-process-flow-with-popover",
            "overflow-micro-process-flow"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "Compact process visualization",
            "Inline process status",
            "Small workflow indicator",
            "Status flow in limited space"
          ],
          "avoidWhen": [
            "Full wizard (use wizard)",
            "Detailed process (use progress-indicator)",
            "Navigation steps (use tabs)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "wizard",
            "progress-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "navigation-list",
          "name": "Navigation List",
          "description": "Navigation List component",
          "baseClass": "fd-navigation-list__content",
          "cssImport": "fundamental-styles/dist/navigation-list.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-navigation-list",
          "modifiers": [
            {
              "class": "fd-navigation-list__content--separator",
              "description": "separator variant"
            },
            {
              "class": "fd-navigation-list__content--group",
              "description": "group variant"
            },
            {
              "class": "fd-navigation-list__content--quick-create",
              "description": "quick-create variant"
            },
            {
              "class": "fd-navigation-list__content--two-click",
              "description": "two-click variant"
            }
          ],
          "elements": [
            {
              "class": "fd-navigation-list__content__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-list__content__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-list__content__content-container",
              "description": "content-container element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-list__content__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-list__content__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-list__content__navigation-indicator",
              "description": "navigation-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-list__content__indication-arrow",
              "description": "indication-arrow element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdNavigationList_Content_Height",
            "--fdNavigationList_Content_Background",
            "--fdNavigationList_Content_Selection_Indicator_Color",
            "--fdNavigationList_Text_Offset",
            "--fdNavigationList_Text_Color",
            "--fdNavigationList_Text_Font_Size",
            "--fdNavigationList_Text_Font_Family",
            "--fdNavigationList_Icon_Font_Size",
            "--fdNavigationList_Expander_Width",
            "--fdNavigationList_Expander_Height",
            "--fdNavigationList_Expander_Font_Size",
            "--fdNavigationList_Expander_Color",
            "--fdNavigationList_Group_Item_Margin_Top",
            "--fdNavigationList_Content_Border_Top_Color",
            "--fdNavigationList_Content_Border_Bottom_Color",
            "--fdNavigationList_Content_Border_Right_Color",
            "--fdNavigationList_Content_Border_Left_Color",
            "--fdNavigationList_Content_Gap",
            "--fdNavigationList_Content_Padding_Inline_End",
            "--fdNavigationList_Content_Border_Radius",
            "--fdNavigationList_Content_Width",
            "--fdNavigationList_Content_Border_Color",
            "--fdNavigationList_Content_Outline_Offset",
            "--fdNavigationList_Text_Display",
            "--fdNavigationList_Expander_Display",
            "--fdNavigationList_Indicator_Display"
          ],
          "tags": [],
          "examples": [],
          "category": "navigation",
          "subcategory": "list",
          "useCases": [
            "Navigation item list",
            "Menu-style navigation",
            "Expandable navigation groups",
            "Nested navigation structure"
          ],
          "avoidWhen": [
            "Full side navigation (use side-nav)",
            "Simple list (use list)",
            "Action menu (use menu)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "side-nav",
            "list",
            "menu"
          ],
          "dependencies": []
        },
        {
          "id": "navigation-menu",
          "name": "Navigation Menu",
          "description": "Navigation Menu component",
          "baseClass": "fd-navigation-menu",
          "cssImport": "fundamental-styles/dist/navigation-menu.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-navigation-menu",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-navigation-menu__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-navigation-menu__item--has-children",
                  "description": "has-children variant of item"
                },
                {
                  "class": "fd-navigation-menu__item--has-link-indicator",
                  "description": "has-link-indicator variant of item"
                },
                {
                  "class": "fd-navigation-menu__item--child",
                  "description": "child variant of item"
                },
                {
                  "class": "fd-navigation-menu__item--group",
                  "description": "group variant of item"
                }
              ]
            },
            {
              "class": "fd-navigation-menu__item--has-children",
              "description": "item--has-children element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-menu__item--has-link-indicator",
              "description": "item--has-link-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-menu__item--child",
              "description": "item--child element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-menu__item--group",
              "description": "item--group element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-menu__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-navigation-menu__text",
              "description": "text element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdNavigationMenu_Item_Background",
            "--fdNavigationMenu_Item_Border_Color_Normal",
            "--fdNavigationMenu_Item_Border_Color",
            "--fdNavigationMenu_Item_Border_Bottom_Color",
            "--fdNavigationMenu_Item_Border_Bottom_Color_Normal",
            "--fdNavigationMenu_Item_Min_Height",
            "--fdNavigationMenu_Item_Padding_Right",
            "--fdNavigationMenu_Item_Spacing",
            "--fdNavigationMenu_Item_Selection_Indicator_Size",
            "--fdNavigationMenu_Item_Child_Indicator_Size",
            "--fdNavigationMenu_Item_Text_Color",
            "--fdNavigationMenu_Item_Font_Weight",
            "--fdNavigationMenu_Item_Font_Size",
            "--fdNavigationMenu_Item_Has_Child_Indicator_Icon",
            "--fdNavigationMenu_Item_Has_Link_Indicator_Icon",
            "--fdNavigationMenu_Selection_Indicator_Offset_Right",
            "--fdNavigationMenu_Item_Transition",
            "--fdNavigationMenu_Item_Border_Radius",
            "--fdNavigationMenu_Item_Border_Color_Hover",
            "--fdNavigationMenu_Item_Border_Color_Active",
            "--fdNavigationMenu_Item_Border_Color_Selected"
          ],
          "tags": [],
          "examples": [],
          "category": "navigation",
          "subcategory": null,
          "useCases": [
            "Dropdown navigation menu",
            "Mega menu structures",
            "Category navigation dropdown",
            "Multi-level navigation"
          ],
          "avoidWhen": [
            "Action menu (use menu)",
            "Side navigation (use side-nav)",
            "Simple tabs (use tabs)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "menu",
            "horizontal-navigation",
            "shellbar"
          ],
          "dependencies": []
        },
        {
          "id": "navigation",
          "name": "Navigation",
          "description": "Navigation component",
          "baseClass": "fd-navigation",
          "cssImport": "fundamental-styles/dist/navigation.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-navigation",
          "modifiers": [
            {
              "class": "fd-navigation--top",
              "description": "top variant"
            },
            {
              "class": "fd-navigation--bottom",
              "description": "bottom variant"
            },
            {
              "class": "fd-navigation--parent-items",
              "description": "parent-items variant"
            },
            {
              "class": "fd-navigation--spacer",
              "description": "spacer variant"
            },
            {
              "class": "fd-navigation--separator",
              "description": "separator variant"
            },
            {
              "class": "fd-navigation--overflow",
              "description": "overflow variant"
            },
            {
              "class": "fd-navigation--child",
              "description": "child variant"
            },
            {
              "class": "fd-navigation--group",
              "description": "group variant"
            },
            {
              "class": "fd-navigation--title",
              "description": "title variant"
            },
            {
              "class": "fd-navigation--menu",
              "description": "menu variant"
            },
            {
              "class": "fd-navigation--with-expander",
              "description": "with-expander variant"
            },
            {
              "class": "fd-navigation--create",
              "description": "create variant"
            },
            {
              "class": "fd-navigation--snapped",
              "description": "snapped variant"
            },
            {
              "class": "fd-navigation--phone",
              "description": "phone variant"
            },
            {
              "class": "fd-navigation--tablet",
              "description": "tablet variant"
            },
            {
              "class": "fd-navigation--horizontal",
              "description": "horizontal variant"
            },
            {
              "class": "fd-navigation--vertical",
              "description": "vertical variant"
            },
            {
              "class": "fd-navigation--popup",
              "description": "popup variant"
            }
          ],
          "elements": [
            {
              "class": "fd-navigation__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__list-container",
              "description": "list-container element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__list-wrapper",
              "description": "list-wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__list",
              "description": "list element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__list-item",
              "description": "list-item element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__link",
              "description": "link element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__selection-indicator",
              "description": "selection-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__has-children-indicator",
              "description": "has-children-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__external-link-indicator",
              "description": "external-link-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-navigation__back-indicator",
              "description": "back-indicator element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdNavigation_Height",
            "--fdNavigation_Padding_X",
            "--fdNavigation_Padding_Top",
            "--fdNavigation_Item_Spacing",
            "--fdNavigation_Padding_Bottom",
            "--fdNavigation_Horizontal_Height",
            "--fdNavigation_Expander_Position_Right",
            "--fdNavigation_Border_Radius",
            "--fdNavigation_Box_Shadow",
            "--fdNavigation_Link_Icon_Size",
            "--fdNavigation_Link_Icon_Color",
            "--fdNavigation_Link_Min_Height",
            "--fdNavigation_Link_Font_Family",
            "--fdNavigation_Link_Spacing",
            "--fdNavigation_Link_Text_Color",
            "--fdNavigation_Link_Shift_Left",
            "--fdNavigation_Link_Padding_Left",
            "--fdNavigation_Link_Padding_Right",
            "--fdNavigation_Link_Font_Size",
            "--fdNavigation_Link_Selection_Indicator_Size",
            "--fdNavigation_Link_Has_Child_Indicator_Display",
            "--fdNavigation_Link_Selection_Indicator_Display",
            "--fdNavigation_Link_Back_Indicator_Icon",
            "--fdNavigation_Link_Has_Child_Indicator_Icon",
            "--fdNavigation_Link_External_Link_Indicator_Icon",
            "--fdNavigation_Link_Background",
            "--fdNavigation_Link_Border_Color",
            "--fdNavigation_Link_Border_Color_Normal",
            "--fdNavigation_Link_Border_Bottom_Color",
            "--fdNavigation_Link_Border_Bottom_Color_Normal",
            "--fdNavigation_Item_Group_Display",
            "--fdNavigation_Item_Title_Display",
            "--fdNavigation_Item_Text_Display",
            "--fdNavigation_Item_Selected_Background",
            "--fdNavigation_List_Container_Display",
            "--fdNavigation_List_Parent_Items_Display",
            "--fdNavigation_Controls_Width",
            "--fdNavigation_Controls_Height",
            "--fdNavigation_Quick_Create_Border_Color",
            "--fdNavigation_Link_Border_Color_Hover",
            "--fdNavigation_Link_Border_Color_Active",
            "--fdNavigation_Link_Transition",
            "--fdNavigation_Link_Border_Radius",
            "--fdNavigation_Link_Border_Color_Selected",
            "--fdNavigation_Item_Title_Margin_Bottom",
            "--fdNavigation_Link_Has_Child_Indicator_Pos_Right",
            "--fdNavigation_Link_Has_Child_Indicator_Div_Display",
            "--fdNavigation_Link_External_Link_Indicator_Display",
            "--fdPopover_Offset",
            "--fdNavigation_Expander_Border_Color",
            "--fdNavigation_Expander_Border_Bottom_Color",
            "--fdButton_Nested_Border_Radius",
            "--fdButton_Nested_Background"
          ],
          "tags": [],
          "examples": [],
          "category": "navigation",
          "subcategory": null,
          "useCases": [
            "Generic navigation container",
            "Custom navigation structures",
            "Nested navigation items",
            "Navigation with groups"
          ],
          "avoidWhen": [
            "Standard side nav (use side-nav)",
            "Vertical menu (use vertical-nav)",
            "Tab navigation (use tabs)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "side-nav",
            "vertical-nav",
            "navigation-list"
          ],
          "dependencies": []
        },
        {
          "id": "notification",
          "name": "Notification",
          "description": "Notifications are used to relay information to the user about a situation or task that requires their input. They can notice and access the notifications by the bell icon in the shell bar on the top-right of the screen. In the notification popover, they take immediate action, navigate to the source of a specific notification or in the case of a notification group, they can sort the list items in various ways.",
          "baseClass": "fd-notification",
          "cssImport": "fundamental-styles/dist/notification.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-notification",
          "modifiers": [
            {
              "class": "fd-notification--unread",
              "description": "unread variant"
            }
          ],
          "elements": [
            {
              "class": "fd-notification__body",
              "description": "body element",
              "modifiers": []
            },
            {
              "class": "fd-notification__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-notification__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-notification__actions",
              "description": "actions element",
              "modifiers": []
            },
            {
              "class": "fd-notification__title",
              "description": "title element",
              "modifiers": [
                {
                  "class": "fd-notification__title--unread",
                  "description": "unread variant of title"
                }
              ]
            },
            {
              "class": "fd-notification__paragraph",
              "description": "paragraph element",
              "modifiers": []
            },
            {
              "class": "fd-notification__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-notification__footer-content",
              "description": "footer-content element",
              "modifiers": []
            },
            {
              "class": "fd-notification__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-notification__message-strip-container",
              "description": "message-strip-container element",
              "modifiers": []
            },
            {
              "class": "fd-notification__sr-only",
              "description": "sr-only element",
              "modifiers": []
            },
            {
              "class": "fd-notification__wrapper",
              "description": "wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-notification__header-arrow",
              "description": "header-arrow element",
              "modifiers": []
            },
            {
              "class": "fd-notification__header-title",
              "description": "header-title element",
              "modifiers": []
            },
            {
              "class": "fd-notification__list",
              "description": "list element",
              "modifiers": []
            },
            {
              "class": "fd-notification__growing-item",
              "description": "growing-item element",
              "modifiers": []
            },
            {
              "class": "fd-notification__growing-item-title",
              "description": "growing-item-title element",
              "modifiers": []
            },
            {
              "class": "fd-notification__growing-item-subtitle",
              "description": "growing-item-subtitle element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdNotification_Content_Gap",
            "--fdNotification_Actions_Offset",
            "--fdNotification_Title_Font_Weight",
            "--fdNotification_Title_Line_Height",
            "--fdNotification_Title_One_Button_Offset",
            "--fdNotification_Title_Two_Buttons_Offset",
            "--fdNotification_Background",
            "--fdNotification_Title_Color",
            "--fdNotification_Paragraph_Color",
            "--fdNotification_Separator_Color",
            "--fdNotification_Footer_Content_Color",
            "--fdNotification_Border_Block_End_Color",
            "--fdNotification_Border_Block_Start_Color",
            "--fdNotification_Border_Top_Color",
            "--fdNotification_Border_Inline_Color",
            "--fdNotification_Border_Left_Right_Color",
            "--fdNotification_Border_Radius",
            "--fdNotification_Background_Hover",
            "--fdNotification_Background_Active",
            "--fdNotification_Title_Color_Active",
            "--fdNotification_Paragraph_Color_Active",
            "--fdNotification_Footer_Content_Color_Active",
            "--fdNotification_Separator_Color_Active",
            "--fdNotification_Border_Inline_Color_Active",
            "--fdNotification_Border_Block_Start_Color_Active",
            "--fdNotification_Border_Block_End_Color_Active",
            "--fdNotification_Background_Selected",
            "--fdNotification_Border_Left_Right_Color_Selected",
            "--fdNotification_Border_Top_Color_Selected",
            "--fdNotification_Border_Block_End_Color_Selected",
            "--fdNotification_Background_Selected_Hover",
            "--fdNotification_Group_Header_Margin_Block",
            "--fdNotification_Group_Header_Border_Bottom_Color",
            "--fdNotification_Group_Header_Title_Color",
            "--fdNotification_Group_Header_Title_Font_Size",
            "--fdNotification_Group_Header_Title_Font_Weight",
            "--fdNotification_Group_List_Gap",
            "--fdNotification_Group_List_Margin_Block",
            "--fdNotification_Group_List_Margin_Inline",
            "--fdNotification_Growing_Item_Margin_Inline",
            "--fdNotification_Growing_Item_Margin_Block_End",
            "--fdNotification_Growing_Item_Title_Color",
            "--fdNotification_Growing_Item_Title_Font_Size",
            "--fdNotification_Growing_Item_Title_Font_Family",
            "--fdNotification_Growing_Item_Title_Font_Weight",
            "--fdNotification_Popover_Width",
            "--fdNotification_Popover_Max_Width",
            "--fdNotification_Title_Offset"
          ],
          "tags": [
            "development"
          ],
          "examples": [
            "banner",
            "notification-group",
            "primary"
          ],
          "category": "feedback",
          "subcategory": "toast",
          "useCases": [
            "Actionable notifications",
            "System alerts with actions",
            "Update notifications",
            "Messages requiring response"
          ],
          "avoidWhen": [
            "Simple confirmations (use message-toast)",
            "Inline feedback (use message-strip)",
            "Blocking messages (use message-box)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "message-toast",
            "message-strip",
            "alert"
          ],
          "dependencies": []
        },
        {
          "id": "numeric-content",
          "name": "Numeric Content",
          "description": "Numeric Content component",
          "baseClass": "fd-numeric-content",
          "cssImport": "fundamental-styles/dist/numeric-content.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-numeric-content",
          "modifiers": [
            {
              "class": "fd-numeric-content--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-numeric-content--critical",
              "description": "critical variant"
            },
            {
              "class": "fd-numeric-content--negative",
              "description": "negative variant"
            },
            {
              "class": "fd-numeric-content--informative",
              "description": "informative variant"
            },
            {
              "class": "fd-numeric-content--m",
              "description": "m variant"
            },
            {
              "class": "fd-numeric-content--s",
              "description": "s variant"
            },
            {
              "class": "fd-numeric-content--small-tile",
              "description": "small-tile variant"
            }
          ],
          "elements": [
            {
              "class": "fd-numeric-content__launch-icon-container",
              "description": "launch-icon-container element",
              "modifiers": []
            },
            {
              "class": "fd-numeric-content__kpi-container",
              "description": "kpi-container element",
              "modifiers": []
            },
            {
              "class": "fd-numeric-content__scale-container",
              "description": "scale-container element",
              "modifiers": []
            },
            {
              "class": "fd-numeric-content__launch-icon",
              "description": "launch-icon element",
              "modifiers": []
            },
            {
              "class": "fd-numeric-content__kpi",
              "description": "kpi element",
              "modifiers": []
            },
            {
              "class": "fd-numeric-content__scale",
              "description": "scale element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "business-objects",
          "subcategory": null,
          "useCases": [
            "KPI display",
            "Dashboard metrics",
            "Large number display",
            "Tile numeric content"
          ],
          "avoidWhen": [
            "Simple numbers (use object-number)",
            "Counts (use counter)",
            "Progress values (use progress-indicator)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "object-number",
            "tile",
            "counter"
          ],
          "dependencies": []
        },
        {
          "id": "object-attribute",
          "name": "Object Attribute",
          "description": "Object Attribute component",
          "baseClass": "fd-object-attribute",
          "cssImport": "fundamental-styles/dist/object-attribute.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-object-attribute",
          "modifiers": [
            {
              "class": "fd-object-attribute--link",
              "description": "link variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "business-objects",
          "subcategory": null,
          "useCases": [
            "Label-value pairs",
            "Object property display",
            "Metadata display",
            "Key-value information"
          ],
          "avoidWhen": [
            "Status display (use object-status)",
            "Numbers with units (use object-number)",
            "Form fields (use form-item)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "object-status",
            "object-number",
            "object-identifier"
          ],
          "dependencies": []
        },
        {
          "id": "object-identifier",
          "name": "Object Identifier",
          "description": "The object identifier is a short text that represents the key identifier of an object, and can be displayed in various types of containers, tables, panels, popovers and more. The text wraps if there is insufficient horizontal space.",
          "baseClass": "fd-object-identifier",
          "cssImport": "fundamental-styles/dist/object-identifier.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-object-identifier",
          "modifiers": [
            {
              "class": "fd-object-identifier--bold",
              "description": "bold variant"
            },
            {
              "class": "fd-object-identifier--medium",
              "description": "medium variant"
            }
          ],
          "elements": [
            {
              "class": "fd-object-identifier__title",
              "description": "title element",
              "modifiers": [
                {
                  "class": "fd-object-identifier__title--bold",
                  "description": "bold variant of title"
                }
              ]
            },
            {
              "class": "fd-object-identifier__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-object-identifier__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdObjectIdentifier_Font_Size",
            "--fdObjectIdentifier_Font_Weight"
          ],
          "tags": [
            "f3"
          ],
          "examples": [
            "bold-title",
            "medium-size",
            "title-and-text",
            "title-as-link",
            "title-only"
          ],
          "category": "visual",
          "subcategory": null,
          "useCases": [
            "Object title with description",
            "Entity identification",
            "Linked object reference",
            "Business object header"
          ],
          "avoidWhen": [
            "Simple text (use text)",
            "Navigation link (use link)",
            "Avatar with name (use avatar)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "object-attribute",
            "link",
            "avatar"
          ],
          "dependencies": []
        },
        {
          "id": "object-list",
          "name": "Object List",
          "description": "An object list is a type of list that consists of object list items, where each item provides a quick",
          "baseClass": "fd-object-list",
          "cssImport": "fundamental-styles/dist/object-list.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-object-list",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-object-list__intro",
              "description": "intro element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__header-left",
              "description": "header-left element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__header-right",
              "description": "header-right element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__row",
              "description": "row element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__row-left",
              "description": "row-left element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__row-right",
              "description": "row-right element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__object-number",
              "description": "object-number element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__object-identifier",
              "description": "object-identifier element",
              "modifiers": []
            },
            {
              "class": "fd-object-list__object-attribute",
              "description": "object-attribute element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdList_Item_Height",
            "--fdObject_List_Number_Font_Size",
            "--fdObject_List_Title_Font_Size",
            "--fdObject_List_Title_Font_Weight"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "examples": [
            "borderless",
            "navigation",
            "selection-with-navigation",
            "selection",
            "standart"
          ],
          "category": "data-display",
          "subcategory": "list",
          "useCases": [
            "Business object list",
            "Items with attributes",
            "Rich list items",
            "Object summaries"
          ],
          "avoidWhen": [
            "Simple lists (use list)",
            "Tabular data (use table)",
            "Card layouts (use grid-list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "list",
            "table",
            "grid-list"
          ],
          "dependencies": []
        },
        {
          "id": "object-marker",
          "name": "Object Marker",
          "description": "Object marker indicates the technical status of an object. It display the technical state like (draft,",
          "baseClass": "fd-object-marker",
          "cssImport": "fundamental-styles/dist/object-marker.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-object-marker",
          "modifiers": [
            {
              "class": "fd-object-marker--link",
              "description": "link variant"
            }
          ],
          "elements": [
            {
              "class": "fd-object-marker__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-object-marker__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "clickable-object-marker",
            "icon-and-text",
            "icon-only",
            "marker-text"
          ],
          "category": "tags",
          "subcategory": null,
          "useCases": [
            "Favorite indicator",
            "Flagged item marker",
            "Draft indicator",
            "Object state icons"
          ],
          "avoidWhen": [
            "Status text (use object-status)",
            "Counts (use counter)",
            "Tags (use token)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "object-status",
            "badge",
            "icon"
          ],
          "dependencies": []
        },
        {
          "id": "object-number",
          "name": "Object Number",
          "description": "An object number represents a numeric attribute of an object and its unit. The object number should be displayed with semantics to provide more insight to the user about the object's value.",
          "baseClass": "fd-object-number",
          "cssImport": "fundamental-styles/dist/object-number.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-object-number",
          "modifiers": [
            {
              "class": "fd-object-number--bold",
              "description": "bold variant"
            },
            {
              "class": "fd-object-number--large",
              "description": "large variant"
            },
            {
              "class": "fd-object-number--inverted",
              "description": "inverted variant"
            },
            {
              "class": "fd-object-number--interactive",
              "description": "interactive variant"
            },
            {
              "class": "fd-object-number--negative",
              "description": "negative variant"
            },
            {
              "class": "fd-object-number--critical",
              "description": "critical variant"
            },
            {
              "class": "fd-object-number--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-object-number--informative",
              "description": "informative variant"
            }
          ],
          "elements": [
            {
              "class": "fd-object-number__text",
              "description": "text element",
              "modifiers": [
                {
                  "class": "fd-object-number__text--bold",
                  "description": "bold variant of text"
                }
              ]
            },
            {
              "class": "fd-object-number__unit",
              "description": "unit element",
              "modifiers": []
            },
            {
              "class": "fd-object-number__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdObjectNumber_Padding",
            "--fdObjectNumber_Border",
            "--fdObjectNumber_Cursor",
            "--fdObjectNumber_Min_Height",
            "--fdObjectNumber_Background",
            "--fdObjectNumber_Line_Height",
            "--fdObjectNumber_Border_Radius",
            "--fdObjectNumber_Color",
            "--fdObjectNumber_Font_Size",
            "--fdObjectNumber_Font_Family",
            "--fdObjectNumber_Text_Decoration",
            "--fdObjectNumber_Text_Shadow",
            "--fdObjectNumber_Text_Font_Weight",
            "--fdObjectNumber_Border_Color"
          ],
          "tags": [],
          "examples": [
            "bold",
            "interactive",
            "inverted-interactive",
            "inverted",
            "large",
            "primary"
          ],
          "category": "visual",
          "subcategory": null,
          "useCases": [
            "Currency display",
            "Quantity with units",
            "Metrics and KPIs",
            "Numeric values with labels"
          ],
          "avoidWhen": [
            "Simple counts (use counter)",
            "Progress (use progress-indicator)",
            "Editable numbers (use step-input)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "counter",
            "numeric-content",
            "step-input"
          ],
          "dependencies": []
        },
        {
          "id": "object-status",
          "name": "Object Status",
          "description": "Object Status is a short text that represents the semantic status of an object. It has a semantic",
          "baseClass": "fd-object-status",
          "cssImport": "fundamental-styles/dist/object-status.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-object-status",
          "modifiers": [
            {
              "class": "fd-object-status--link",
              "description": "link variant"
            },
            {
              "class": "fd-object-status--large",
              "description": "large variant"
            },
            {
              "class": "fd-object-status--inverted",
              "description": "inverted variant"
            },
            {
              "class": "fd-object-status--truncate",
              "description": "truncate variant"
            },
            {
              "class": "fd-object-status--negative",
              "description": "negative variant"
            },
            {
              "class": "fd-object-status--critical",
              "description": "critical variant"
            },
            {
              "class": "fd-object-status--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-object-status--informative",
              "description": "informative variant"
            },
            {
              "class": "fd-object-status--indication-1",
              "description": "indication-1 variant"
            },
            {
              "class": "fd-object-status--indication-2",
              "description": "indication-2 variant"
            },
            {
              "class": "fd-object-status--indication-3",
              "description": "indication-3 variant"
            },
            {
              "class": "fd-object-status--indication-4",
              "description": "indication-4 variant"
            },
            {
              "class": "fd-object-status--indication-5",
              "description": "indication-5 variant"
            },
            {
              "class": "fd-object-status--indication-6",
              "description": "indication-6 variant"
            },
            {
              "class": "fd-object-status--indication-7",
              "description": "indication-7 variant"
            },
            {
              "class": "fd-object-status--indication-8",
              "description": "indication-8 variant"
            },
            {
              "class": "fd-object-status--neutral",
              "description": "neutral variant"
            },
            {
              "class": "fd-object-status--indication-1b",
              "description": "indication-1b variant"
            },
            {
              "class": "fd-object-status--indication-2b",
              "description": "indication-2b variant"
            },
            {
              "class": "fd-object-status--indication-3b",
              "description": "indication-3b variant"
            },
            {
              "class": "fd-object-status--indication-4b",
              "description": "indication-4b variant"
            },
            {
              "class": "fd-object-status--indication-5b",
              "description": "indication-5b variant"
            },
            {
              "class": "fd-object-status--indication-6b",
              "description": "indication-6b variant"
            },
            {
              "class": "fd-object-status--indication-7b",
              "description": "indication-7b variant"
            },
            {
              "class": "fd-object-status--indication-8b",
              "description": "indication-8b variant"
            },
            {
              "class": "fd-object-status--indication-9b",
              "description": "indication-9b variant"
            },
            {
              "class": "fd-object-status--indication-1b0",
              "description": "indication-1b0 variant"
            },
            {
              "class": "fd-object-status--indication-9",
              "description": "indication-9 variant"
            },
            {
              "class": "fd-object-status--indication-10",
              "description": "indication-10 variant"
            },
            {
              "class": "fd-object-status--icon-only",
              "description": "icon-only variant"
            }
          ],
          "elements": [
            {
              "class": "fd-object-status__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-object-status__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-object-status__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdObjectStatus_Positive_Color_Focus",
            "--fdObjectStatus_Positive_IconColor_Focus",
            "--fdObjectStatus_Critical_Color_Focus",
            "--fdObjectStatus_Critical_IconColor_Focus",
            "--fdObjectStatus_Negative_Color_Focus",
            "--fdObjectStatus_Negative_IconColor_Focus",
            "--fdObjectStatus_Informative_Color_Focus",
            "--fdObjectStatus_Informative_IconColor_Focus",
            "--fdObjectStatus_Neutral_Color_Focus",
            "--fdObjectStatus_Neutral_IconColor_Focus",
            "--fdObjectStatus_Accent_Color_1_Focus",
            "--fdObjectStatus_Accent_Color_2_Focus",
            "--fdObjectStatus_Accent_Color_3_Focus",
            "--fdObjectStatus_Accent_Color_4_Focus",
            "--fdObjectStatus_Accent_Color_5_Focus",
            "--fdObjectStatus_Accent_Color_6_Focus",
            "--fdObjectStatus_Accent_Color_7_Focus",
            "--fdObjectStatus_Accent_Color_8_Focus",
            "--fdObjectStatus_Inverted_Neutral_Color_Regular",
            "--fdObjectStatus_Inverted_Neutral_Background_Regular",
            "--fdObjectStatus_Inverted_Neutral_Border_Color_Regular",
            "--fdObjectStatus_Active_Text_Indication_Color_1",
            "--fdObjectStatus_Active_Text_Indication_Color_2",
            "--fdObjectStatus_Active_Text_Indication_Color_3",
            "--fdObjectStatus_Active_Text_Indication_Color_4",
            "--fdObjectStatus_Active_Text_Indication_Color_5",
            "--fdObjectStatus_Active_Text_Indication_Color_6",
            "--fdObjectStatus_Active_Text_Indication_Color_7",
            "--fdObjectStatus_Active_Text_Indication_Color_8",
            "--fdObjectStatus_Active_Text_Indication_Color_9",
            "--fdObjectStatus_Active_Text_Indication_Color_10",
            "--fdObjectStatus_Text_Indication_Color_1b",
            "--fdObjectStatus_Background_Indication_Color_1b",
            "--fdObjectStatus_Border_Indication_Color_1b",
            "--fdObjectStatus_Background_Hover_Indication_Color_1b",
            "--fdObjectStatus_Text_Indication_Color_2b",
            "--fdObjectStatus_Background_Indication_Color_2b",
            "--fdObjectStatus_Border_Indication_Color_2b",
            "--fdObjectStatus_Background_Hover_Indication_Color_2b",
            "--fdObjectStatus_Text_Indication_Color_3b",
            "--fdObjectStatus_Background_Indication_Color_3b",
            "--fdObjectStatus_Border_Indication_Color_3b",
            "--fdObjectStatus_Background_Hover_Indication_Color_3b",
            "--fdObjectStatus_Text_Indication_Color_4b",
            "--fdObjectStatus_Background_Indication_Color_4b",
            "--fdObjectStatus_Border_Indication_Color_4b",
            "--fdObjectStatus_Background_Hover_Indication_Color_4b",
            "--fdObjectStatus_Text_Indication_Color_5b",
            "--fdObjectStatus_Background_Indication_Color_5b",
            "--fdObjectStatus_Border_Indication_Color_5b",
            "--fdObjectStatus_Background_Hover_Indication_Color_5b",
            "--fdObjectStatus_Text_Indication_Color_6b",
            "--fdObjectStatus_Background_Indication_Color_6b",
            "--fdObjectStatus_Border_Indication_Color_6b",
            "--fdObjectStatus_Background_Hover_Indication_Color_6b",
            "--fdObjectStatus_Text_Indication_Color_7b",
            "--fdObjectStatus_Background_Indication_Color_7b",
            "--fdObjectStatus_Border_Indication_Color_7b",
            "--fdObjectStatus_Background_Hover_Indication_Color_7b",
            "--fdObjectStatus_Text_Indication_Color_8b",
            "--fdObjectStatus_Background_Indication_Color_8b",
            "--fdObjectStatus_Border_Indication_Color_8b",
            "--fdObjectStatus_Background_Hover_Indication_Color_8b",
            "--fdObjectStatus_Text_Indication_Color_9b",
            "--fdObjectStatus_Background_Indication_Color_9b",
            "--fdObjectStatus_Border_Indication_Color_9b",
            "--fdObjectStatus_Background_Hover_Indication_Color_9b",
            "--fdObjectStatus_Text_Indication_Color_10b",
            "--fdObjectStatus_Background_Indication_Color_10b",
            "--fdObjectStatus_Border_Indication_Color_10b",
            "--fdObjectStatus_Background_Hover_Indication_Color_10b",
            "--fdObjectStatus_Text_Color",
            "--fdObjectStatus_Icon_Color",
            "--fdObjectStatus_Background_Color",
            "--fdObjectStatus_Border_Color",
            "--fdObjectStatus_Inverted_Outline_Color",
            "--fdObjectStatus_Inverted_Box_Shadow",
            "--fdObjectStatus_Decoration",
            "--fdObjectStatus_Underline",
            "--fdObjectStatus_Text_Decoration",
            "--fdObjectStatus_TextDecoration_Regular",
            "--fdObjectStatus_Icon_Font_Size",
            "--fdObjectStatus_Text_Font_Family",
            "--fdObjectStatus_Text_Font_Size",
            "--fdObjectStatus_Height",
            "--fdObjectStatus_Text_Shadow",
            "--fdElementTextColor",
            "--fdElementIconColor",
            "--fdObjectStatus_TextDecoration_Visited",
            "--fdObjectStatus_TextDecoration_Hover",
            "--fdObjectStatus_TextDecoration_Down",
            "--fdObjectStatus_TextDecoration_Focus",
            "--fdObjectStatus_Focus_Border_Radius",
            "--fdObjectStatus_Focus_Background",
            "--fdObjectStatus_Focus_Outline",
            "--fdObjectStatus_Inverted_Padding_Block",
            "--fdObjectStatus_Inverted_Padding_Inline",
            "--fdObjectStatus_Inverted_Min_Width",
            "--fdObjectStatus_Inverted_Border_Width",
            "--fdObjectStatus_Inverted_Line_Height",
            "--fdObjectStatus_Inverted_Border_Radius",
            "--fdObjectStatus_Inverted_Underline_Width",
            "--fdObjectStatus_Text_Shadow_Indication_Color",
            "--fdObjectStatus_Inverted_Large_Font_Family"
          ],
          "tags": [],
          "examples": [
            "clickable-object-status",
            "generic-indication-colors",
            "icon-and-text",
            "icon",
            "inverted-indication-secondary",
            "inverted-indication",
            "inverted-states",
            "inverted",
            "large-object-status",
            "primary",
            "text",
            "truncate-example"
          ],
          "category": "visual",
          "subcategory": null,
          "useCases": [
            "Status indicators",
            "Semantic state display",
            "Approval status",
            "Process state"
          ],
          "avoidWhen": [
            "Colored labels (use info-label)",
            "Simple badges (use badge)",
            "Interactive status (use switch)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "info-label",
            "badge",
            "status-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "off-screen",
          "name": "Off Screen",
          "description": "Off Screen component",
          "baseClass": "fd-off-screen",
          "cssImport": "fundamental-styles/dist/off-screen.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-off-screen",
          "modifiers": [],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "utilities",
          "subcategory": null,
          "useCases": [],
          "avoidWhen": [],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [],
          "dependencies": []
        },
        {
          "id": "paddings",
          "name": "Paddings",
          "description": "Paddings component",
          "baseClass": "fd-paddings",
          "cssImport": "fundamental-styles/dist/paddings.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-paddings",
          "modifiers": [
            {
              "class": "fd-paddings--tiny",
              "description": "tiny variant"
            },
            {
              "class": "fd-paddings--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-paddings--md",
              "description": "md variant"
            },
            {
              "class": "fd-paddings--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-paddings--none",
              "description": "none variant"
            },
            {
              "class": "fd-paddings--xl",
              "description": "xl variant"
            }
          ],
          "elements": [],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "utilities",
          "subcategory": null,
          "useCases": [],
          "avoidWhen": [],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [],
          "dependencies": []
        },
        {
          "id": "page-footer",
          "name": "Page Footer",
          "description": "Page Footer component",
          "baseClass": "fd-page-footer",
          "cssImport": "fundamental-styles/dist/page-footer.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-page-footer",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-page-footer__logo",
              "description": "logo element",
              "modifiers": []
            },
            {
              "class": "fd-page-footer__row",
              "description": "row element",
              "modifiers": []
            },
            {
              "class": "fd-page-footer__text",
              "description": "text element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "containers",
          "subcategory": null,
          "useCases": [
            "Page action footer",
            "Sticky bottom bar",
            "Form submit footer",
            "Page-level actions container"
          ],
          "avoidWhen": [
            "Dialog footer (use bar)",
            "Inline actions (use toolbar)",
            "Navigation (use pagination)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "bar",
            "toolbar"
          ],
          "dependencies": []
        },
        {
          "id": "page",
          "name": "Page",
          "description": "Page component",
          "baseClass": "fd-page",
          "cssImport": "fundamental-styles/dist/page.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-page",
          "modifiers": [
            {
              "class": "fd-page--solid",
              "description": "solid variant"
            },
            {
              "class": "fd-page--list",
              "description": "list variant"
            },
            {
              "class": "fd-page--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-page--home",
              "description": "home variant"
            }
          ],
          "elements": [
            {
              "class": "fd-page__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-page__content--s",
                  "description": "s variant of content"
                },
                {
                  "class": "fd-page__content--m",
                  "description": "m variant of content"
                },
                {
                  "class": "fd-page__content--xl",
                  "description": "xl variant of content"
                },
                {
                  "class": "fd-page__content--S",
                  "description": "S variant of content"
                }
              ]
            },
            {
              "class": "fd-page__content--s",
              "description": "content--s element",
              "modifiers": []
            },
            {
              "class": "fd-page__content--m",
              "description": "content--m element",
              "modifiers": []
            },
            {
              "class": "fd-page__content--xl",
              "description": "content--xl element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdPage_Background",
            "--fdPage_List_Background",
            "--fdPage_Transparent_Background"
          ],
          "tags": [],
          "examples": [],
          "category": "containers",
          "subcategory": null,
          "useCases": [
            "Standard page container",
            "Page with header and footer",
            "Content wrapper",
            "Basic page structure"
          ],
          "avoidWhen": [
            "Collapsible header (use dynamic-page)",
            "Multi-column layouts (use flexible-column-layout)",
            "Dialog content (use dialog)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "dynamic-page",
            "panel",
            "section"
          ],
          "dependencies": []
        },
        {
          "id": "pagination",
          "name": "Pagination",
          "description": "Pagination allows users to separate their content into discrete pages, making it easier to digest and navigate through. Pagination is commonly used for tables and tiles.",
          "baseClass": "fd-pagination",
          "cssImport": "fundamental-styles/dist/pagination.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-pagination",
          "modifiers": [
            {
              "class": "fd-pagination--mobile",
              "description": "mobile variant"
            },
            {
              "class": "fd-pagination--short",
              "description": "short variant"
            }
          ],
          "elements": [
            {
              "class": "fd-pagination__per-page",
              "description": "per-page element",
              "modifiers": []
            },
            {
              "class": "fd-pagination__nav",
              "description": "nav element",
              "modifiers": []
            },
            {
              "class": "fd-pagination__more",
              "description": "more element",
              "modifiers": []
            },
            {
              "class": "fd-pagination__button",
              "description": "button element",
              "modifiers": [
                {
                  "class": "fd-pagination__button--mobile",
                  "description": "mobile variant of button"
                }
              ]
            }
          ],
          "variables": [
            "--fdPaginationMoreWidth",
            "--fdPagination_Placeholder_Dots_Width",
            "--fdPagination_Elements_Spacing",
            "--fdPagination_Placeholder_Dots_Width_Compact",
            "--fdButton_Outline_Offset",
            "--fdButton_Focus_Border_Radius",
            "--fdButton_Outline_Contrast",
            "--fdButtonPrioritizedBorderColor"
          ],
          "tags": [
            "btp",
            ""
          ],
          "examples": [
            "first-page",
            "last-page",
            "middle-page",
            "mobile",
            "per-page"
          ],
          "category": "navigation",
          "subcategory": "page",
          "useCases": [
            "Table/list pagination",
            "Page navigation for data",
            "Result set navigation",
            "Multi-page content"
          ],
          "avoidWhen": [
            "Infinite scroll (load more button)",
            "Small datasets (show all)",
            "Tab navigation (use tabs)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "table",
            "list"
          ],
          "dependencies": []
        },
        {
          "id": "panel",
          "name": "Panel",
          "description": "The panel is a container for grouping and displaying information. Panels are responsive and can be collapsed to save additional screen space.",
          "baseClass": "fd-panel",
          "cssImport": "fundamental-styles/dist/panel.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-panel",
          "modifiers": [
            {
              "class": "fd-panel--no-padding",
              "description": "no-padding variant"
            },
            {
              "class": "fd-panel--fixed",
              "description": "fixed variant"
            },
            {
              "class": "fd-panel--sticky",
              "description": "sticky variant"
            },
            {
              "class": "fd-panel--borderless",
              "description": "borderless variant"
            },
            {
              "class": "fd-panel--transparent",
              "description": "transparent variant"
            }
          ],
          "elements": [
            {
              "class": "fd-panel__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-panel__content--no-padding",
                  "description": "no-padding variant of content"
                }
              ]
            },
            {
              "class": "fd-panel__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-panel__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-panel__expand",
              "description": "expand element",
              "modifiers": []
            },
            {
              "class": "fd-panel__button",
              "description": "button element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdPanel_Header_Width",
            "--fdPanel_Header_Height",
            "--fdPanel_Flex_Direction",
            "--fdPanel_Margin_Bottom",
            "--fdPanel_Header_Border_Color",
            "--fdPanel_Header_Position_Top",
            "--fdPanel_Header_Position",
            "--fdPanel_Header_Padding_Inline_Start",
            "--fdPanel_Header_Padding_Inline_End",
            "--fdPanel_Header_Border_Top_Left_Radius",
            "--fdPanel_Border_Radius",
            "--fdPanel_Header_Border_Top_Right_Radius",
            "--fdPanel_Header_Border_Bottom_Right_Radius",
            "--fdPanel_Header_Border_Bottom_Left_Radius",
            "--fdPanel_Title_Font_Size",
            "--fdScrollbar_Border_Radius",
            "--fdPanel_Content_Padding_Inline",
            "--fdPanel_Content_Padding_Block",
            "--fdPanel_Content_Background_Color",
            "--fdPanel_Content_Border_Bottom_Color",
            "--fdPanel_Content_Border_Top_Left_Radius",
            "--fdPanel_Content_Border_Top_Right_Radius",
            "--fdPanel_Content_Border_Bottom_Right_Radius",
            "--fdPanel_Content_Border_Bottom_Left_Radius"
          ],
          "tags": [],
          "examples": [
            "borderless",
            "expandable",
            "fixed-height-content",
            "fixed",
            "sticky-header",
            "transparent"
          ],
          "category": "containers",
          "subcategory": null,
          "useCases": [
            "Collapsible content section",
            "Grouped content container",
            "Expandable information",
            "Content organization"
          ],
          "avoidWhen": [
            "Cards with actions (use card)",
            "Non-collapsible sections (use section)",
            "Full pages (use page)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "card",
            "section",
            "layout-panel"
          ],
          "dependencies": []
        },
        {
          "id": "popover",
          "name": "Popover",
          "category": "overlays",
          "subcategory": "popovers",
          "description": "Contextual popup for displaying supplementary information",
          "baseClass": "fd-popover",
          "cssImport": "fundamental-styles/dist/popover.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-popover",
          "useCases": [
            "Show additional context",
            "Display help text",
            "Contextual menus",
            "Quick info"
          ],
          "avoidWhen": [
            "Critical information (use dialog)",
            "Complex forms (use dialog)"
          ],
          "elements": [
            {
              "class": "fd-popover__modal",
              "description": "modal element",
              "modifiers": []
            },
            {
              "class": "fd-popover__control",
              "description": "control element",
              "modifiers": []
            },
            {
              "class": "fd-popover__wrapper",
              "description": "wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-popover__body",
              "description": "body element",
              "modifiers": [
                {
                  "class": "fd-popover__body--input-message-group",
                  "description": "input-message-group variant of body"
                },
                {
                  "class": "fd-popover__body--hidden",
                  "description": "hidden variant of body"
                },
                {
                  "class": "fd-popover__body--no-arrow",
                  "description": "no-arrow variant of body"
                },
                {
                  "class": "fd-popover__body--padding",
                  "description": "padding variant of body"
                },
                {
                  "class": "fd-popover__body--left",
                  "description": "left variant of body"
                },
                {
                  "class": "fd-popover__body--above",
                  "description": "above variant of body"
                },
                {
                  "class": "fd-popover__body--arrow-bottom",
                  "description": "arrow-bottom variant of body"
                },
                {
                  "class": "fd-popover__body--center",
                  "description": "center variant of body"
                },
                {
                  "class": "fd-popover__body--arrow-x-center",
                  "description": "arrow-x-center variant of body"
                },
                {
                  "class": "fd-popover__body--right",
                  "description": "right variant of body"
                },
                {
                  "class": "fd-popover__body--arrow-x-end",
                  "description": "arrow-x-end variant of body"
                },
                {
                  "class": "fd-popover__body--before",
                  "description": "before variant of body"
                },
                {
                  "class": "fd-popover__body--arrow-right",
                  "description": "arrow-right variant of body"
                },
                {
                  "class": "fd-popover__body--after",
                  "description": "after variant of body"
                },
                {
                  "class": "fd-popover__body--arrow-left",
                  "description": "arrow-left variant of body"
                },
                {
                  "class": "fd-popover__body--middle",
                  "description": "middle variant of body"
                },
                {
                  "class": "fd-popover__body--arrow-y-center",
                  "description": "arrow-y-center variant of body"
                },
                {
                  "class": "fd-popover__body--bottom",
                  "description": "bottom variant of body"
                },
                {
                  "class": "fd-popover__body--arrow-y-bottom",
                  "description": "arrow-y-bottom variant of body"
                },
                {
                  "class": "fd-popover__body--resizable",
                  "description": "resizable variant of body"
                }
              ]
            },
            {
              "class": "fd-popover__resize-handle",
              "description": "resize-handle element",
              "modifiers": []
            },
            {
              "class": "fd-popover__body-footer",
              "description": "body-footer element",
              "modifiers": [
                {
                  "class": "fd-popover__body-footer--center",
                  "description": "center variant of body-footer"
                }
              ]
            }
          ],
          "accessibility": {
            "ariaAttributes": [
              "aria-haspopup",
              "aria-expanded"
            ],
            "focusManagement": true
          },
          "relatedComponents": [
            "dialog",
            "menu"
          ],
          "dependencies": [],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "modifiers": [
            {
              "class": "fd-popover--visible",
              "description": "visible variant"
            },
            {
              "class": "fd-popover--no-arrow",
              "description": "no-arrow variant"
            },
            {
              "class": "fd-popover--left",
              "description": "left variant"
            },
            {
              "class": "fd-popover--center",
              "description": "center variant"
            },
            {
              "class": "fd-popover--right",
              "description": "right variant"
            },
            {
              "class": "fd-popover--before",
              "description": "before variant"
            },
            {
              "class": "fd-popover--after",
              "description": "after variant"
            },
            {
              "class": "fd-popover--middle",
              "description": "middle variant"
            },
            {
              "class": "fd-popover--bottom",
              "description": "bottom variant"
            },
            {
              "class": "fd-popover--above",
              "description": "above variant"
            },
            {
              "class": "fd-popover--arrow",
              "description": "arrow variant"
            },
            {
              "class": "fd-popover--dropdown",
              "description": "dropdown variant"
            },
            {
              "class": "fd-popover--static",
              "description": "static variant"
            },
            {
              "class": "fd-popover--input-message-group",
              "description": "input-message-group variant"
            },
            {
              "class": "fd-popover--inline-help",
              "description": "inline-help variant"
            },
            {
              "class": "fd-popover--slider",
              "description": "slider variant"
            },
            {
              "class": "fd-popover--full-width",
              "description": "full-width variant"
            },
            {
              "class": "fd-popover--btp",
              "description": "btp variant"
            },
            {
              "class": "fd-popover--padding",
              "description": "padding variant"
            }
          ],
          "variables": [
            "--fdModal_BackgroundColor",
            "--fdPopover_Display",
            "--fdScrollbar_Border_Radius",
            "--fdPopover_Body_Border_Radius",
            "--fdPopover_Offset",
            "--fdPopover_Center_Offset",
            "--fdPopover_Arrow_Size",
            "--fdPopover_Border_Radius",
            "--fdPopover_Body_Box_Shadow",
            "--fdPopover_Body_Box_Shadow_No_Arrow",
            "--fdIcon_Button_Height",
            "--fdIcon_Button_Width",
            "--fdPopover_Resize_Handle_Offset",
            "--fdPopover_Resize_Handle_Position_Top",
            "--fdPopover_Resize_Handle_Position_Right",
            "--fdPopover_Resize_Handle_Position_Bottom",
            "--fdPopover_Resize_Handle_Position_Left",
            "--fdPopover_Resize_Handle_Rotate_Angle",
            "--fdPopover_Resize_Handle_Cursor",
            "--fdPopover_Resize_Handle_Justify",
            "--fdPopover_Resize_Handle_Transform_Scale",
            "--fdPopover_Border_Width",
            "--fdPopover_Border_Color",
            "--fdPopover_Resize_Handle_Container_Justify"
          ],
          "examples": [
            "control-examples-btp",
            "control-examples",
            "no-arrow",
            "placement",
            "resizable",
            "scrollable",
            "variants"
          ]
        },
        {
          "id": "product-switch",
          "name": "Product Switch",
          "description": "The product switch provides users with role-based access to several products or lines of businesses (LoBs). The product switch displays an icon button that triggers a **Popover** with the products or LoBs. Because it is designed to be as simple as possible, the product switch only has one level of navigation.",
          "baseClass": "fd-product-switch",
          "cssImport": "fundamental-styles/dist/product-switch.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-product-switch",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-product-switch__list",
              "description": "list element",
              "modifiers": []
            },
            {
              "class": "fd-product-switch__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-product-switch__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-product-switch__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-product-switch__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-product-switch__subtitle",
              "description": "subtitle element",
              "modifiers": []
            },
            {
              "class": "fd-product-switch__body",
              "description": "body element",
              "modifiers": [
                {
                  "class": "fd-product-switch__body--col-3",
                  "description": "col-3 variant of body"
                },
                {
                  "class": "fd-product-switch__body--mobile",
                  "description": "mobile variant of body"
                }
              ]
            },
            {
              "class": "fd-product-switch__body--col-3",
              "description": "body--col-3 element",
              "modifiers": []
            },
            {
              "class": "fd-product-switch__body--mobile",
              "description": "body--mobile element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdProduct_Switch_Item_Border_Color",
            "--fdProductSwitch_Shadow",
            "--fdProductSwitch_Text_Shadow",
            "--fdButton_Focus_Border_Radius",
            "--fdButton_Outline_Contrast",
            "--fdButtonPrioritizedBorderColor"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "large",
            "medium",
            "small"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "App switcher in shellbar",
            "Product navigation",
            "Suite application switching",
            "Cross-app navigation"
          ],
          "avoidWhen": [
            "In-app navigation (use side-nav)",
            "User menu (use user-menu)",
            "Simple dropdown (use select)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "shellbar",
            "user-menu",
            "menu"
          ],
          "dependencies": []
        },
        {
          "id": "progress-indicator",
          "name": "Progress Indicator",
          "description": "The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.",
          "baseClass": "fd-progress-indicator",
          "cssImport": "fundamental-styles/dist/progress-indicator.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-progress-indicator",
          "modifiers": [
            {
              "class": "fd-progress-indicator--mobile",
              "description": "mobile variant"
            },
            {
              "class": "fd-progress-indicator--display",
              "description": "display variant"
            },
            {
              "class": "fd-progress-indicator--informative",
              "description": "informative variant"
            },
            {
              "class": "fd-progress-indicator--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-progress-indicator--critical",
              "description": "critical variant"
            },
            {
              "class": "fd-progress-indicator--negative",
              "description": "negative variant"
            }
          ],
          "elements": [
            {
              "class": "fd-progress-indicator__progress-bar",
              "description": "progress-bar element",
              "modifiers": []
            },
            {
              "class": "fd-progress-indicator__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-progress-indicator__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-progress-indicator__overflow",
              "description": "overflow element",
              "modifiers": []
            },
            {
              "class": "fd-progress-indicator__overflow-close",
              "description": "overflow-close element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdProgress_Indicator_Background_Color_Informative",
            "--fdProgress_Indicator_Progress_Bar_Border_Color_Informative",
            "--fdProgress_Indicator_Container_Background_Informative",
            "--fdProgress_Indicator_Container_Border_Informative",
            "--fdProgress_Icon_Informative",
            "--fdProgress_Icon_Color_Informative",
            "--fdProgress_Indicator_Label_Color",
            "--fdProgress_Indicator_Background_Color_Positive",
            "--fdProgress_Indicator_Progress_Bar_Border_Color_Positive",
            "--fdProgress_Indicator_Container_Background_Positive",
            "--fdProgress_Indicator_Container_Border_Positive",
            "--fdProgress_Icon_Positive",
            "--fdProgress_Icon_Color_Positive",
            "--fdProgress_Indicator_Background_Color_Negative",
            "--fdProgress_Indicator_Progress_Bar_Border_Color_Negative",
            "--fdProgress_Indicator_Container_Background_Negative",
            "--fdProgress_Indicator_Container_Border_Negative",
            "--fdProgress_Icon_Negative",
            "--fdProgress_Icon_Color_Negative",
            "--fdProgress_Indicator_Background_Color_Critical",
            "--fdProgress_Indicator_Progress_Bar_Border_Color_Critical",
            "--fdProgress_Indicator_Container_Background_Critical",
            "--fdProgress_Indicator_Container_Border_Critical",
            "--fdProgress_Icon_Critical",
            "--fdProgress_Icon_Color_Critical",
            "--fdProgress_Indicator_Background_Color_Neutral",
            "--fdProgress_Indicator_Progress_Bar_Border_Color_Neutral",
            "--fdProgress_Indicator_Border_Right_Color",
            "--fdProgress_Indicator_Container_Background_Neutral",
            "--fdProgress_Indicator_Container_Border_Neutral",
            "--fdProgress_Indicator_Label_Margin_Start",
            "--fdProgress_Indicator_Label_Margin_End",
            "--fdProgress_Indicator_Height",
            "--fdProgress_Indicator_Container_Margin_Block",
            "--fdProgress_Indicator_Container_Margin_Inline",
            "--fdProgress_Indicator_Container_Position",
            "--fdProgress_Indicator_Container_Width",
            "--fdProgress_Indicator_Container_Overflow",
            "--fdProgress_Indicator_Container_Height",
            "--fdProgress_Indicator_Progress_Bar_Boundary_Display",
            "--fdProgress_Indicator_Progress_Bar_Position_Left",
            "--fdProgress_Indicator_Progress_Bar_Height",
            "--fdProgress_Indicator_Progress_Bar_Margin_Block",
            "--fdProgress_Indicator_Progress_Bar_Border",
            "--fdProgress_Indicator_Border_Right",
            "--fdProgress_Indicator_Progress_Bar_Border_Radius",
            "--fdProgress_Indicator_Progress_Bar_Position_Bottom",
            "--fdProgress_Indicator_Label_Color_Contrast",
            "--fdProgress_Indicator_Icon_Position",
            "--fdProgress_Icon_Space_Before_Label",
            "--fdProgress_Indicator_Icon_Font_Size",
            "--fdProgress_Indicator_Label_Position",
            "--fdProgress_Indicator_Label_Font_Size"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "examples": [
            "layout",
            "truncation",
            "value-states"
          ],
          "category": "feedback",
          "subcategory": "loading",
          "useCases": [
            "Upload progress",
            "Process completion percentage",
            "Step progress",
            "Capacity/usage display"
          ],
          "avoidWhen": [
            "Unknown duration (use busy-indicator)",
            "Step-by-step wizard (use wizard)",
            "Status only (use object-status)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "busy-indicator",
            "wizard",
            "status-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "prompt-input",
          "name": "Prompt Input",
          "description": "Prompt Input component",
          "baseClass": "fd-prompt-input",
          "cssImport": "fundamental-styles/dist/prompt-input.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-prompt-input",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-prompt-input__wrapper",
              "description": "wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-prompt-input__inner-wrapper",
              "description": "inner-wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-prompt-input__counter",
              "description": "counter element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdPropmtInput_Offset"
          ],
          "tags": [],
          "examples": [],
          "category": "ai-components",
          "subcategory": null,
          "useCases": [
            "AI prompt input field",
            "Chat input for AI",
            "LLM query input",
            "AI assistant input"
          ],
          "avoidWhen": [
            "Regular text input (use input or textarea)",
            "Search (use search-field)",
            "Comments (use feed-input)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "ai-writing-assistant",
            "textarea",
            "search-field"
          ],
          "dependencies": []
        },
        {
          "id": "quick-view",
          "name": "Quick View",
          "description": "The quick view is similar to a popover but has a predefined structure, a fixed set of UI",
          "baseClass": "fd-quick-view",
          "cssImport": "fundamental-styles/dist/quick-view.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-quick-view",
          "modifiers": [
            {
              "class": "fd-quick-view--header-with-subheader",
              "description": "header-with-subheader variant"
            }
          ],
          "elements": [
            {
              "class": "fd-quick-view__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-quick-view__left",
              "description": "left element",
              "modifiers": []
            },
            {
              "class": "fd-quick-view__middle",
              "description": "middle element",
              "modifiers": []
            },
            {
              "class": "fd-quick-view__right",
              "description": "right element",
              "modifiers": []
            },
            {
              "class": "fd-quick-view__subheader-text",
              "description": "subheader-text element",
              "modifiers": []
            },
            {
              "class": "fd-quick-view__subtitle",
              "description": "subtitle element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "dialog",
            "no-header",
            "popover"
          ],
          "category": "dialogs",
          "subcategory": null,
          "useCases": [
            "Object preview popover",
            "Contact card preview",
            "Quick information display",
            "Hover details"
          ],
          "avoidWhen": [
            "Full object page (use dynamic-page)",
            "Actions needed (use popover)",
            "Simple tooltip (use title attribute)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "popover",
            "card",
            "dialog"
          ],
          "dependencies": []
        },
        {
          "id": "radio",
          "name": "Radio Button",
          "category": "forms",
          "subcategory": "selection",
          "description": "Single selection control for choosing one option from a group",
          "baseClass": "fd-radio",
          "cssImport": "fundamental-styles/dist/radio.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-radio",
          "useCases": [
            "Single selection from group",
            "Mutually exclusive options",
            "Form choices"
          ],
          "avoidWhen": [
            "Multiple selections (use checkbox)",
            "Too many options (consider select)"
          ],
          "modifiers": [
            {
              "class": "fd-radio--wrap",
              "description": "wrap variant"
            }
          ],
          "accessibility": {
            "role": "radio",
            "ariaAttributes": [
              "aria-checked",
              "aria-label"
            ],
            "labelRequired": true,
            "grouping": "fieldset"
          },
          "relatedComponents": [
            "checkbox",
            "select",
            "form-item"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-radio__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-radio__text",
              "description": "text element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdRadio_Outer_Circle_Padding",
            "--fdRadio_Inner_Circle_Diameter",
            "--fdRadio_Background_Color",
            "--fdRadio_Inner_Border_Width",
            "--fdRadio_Inner_Border_Style",
            "--fdRadio_Inner_Border_Color",
            "--fdRadio_Inner_Content_Size",
            "--fdRadio_Inner_Content_Padding",
            "--fdRadio_Hover_Background_Color",
            "--fdRadio_Inner_Border_Width_Default_Hover",
            "--fdRadio_Inner_Border_Style_Default_Hover",
            "--fdRadio_Inner_Border_Color_Default_Hover",
            "--fdRadio_Active_Dot_Color",
            "--fdRadio_Active_Dot_Color_Default_Hover",
            "--fdRadio_Background_Color_Default_Hover",
            "--fdRadio_Background_Color_Error",
            "--fdRadio_Inner_Border_Width_Error",
            "--fdRadio_Inner_Border_Style_Error",
            "--fdRadio_Inner_Border_Color_Error",
            "--fdRadio_Active_Dot_Color_Error",
            "--fdRadio_Background_Color_Error_Hover",
            "--fdRadio_Background_Color_Warning",
            "--fdRadio_Inner_Border_Width_Warning",
            "--fdRadio_Inner_Border_Style_Warning",
            "--fdRadio_Inner_Border_Color_Warning",
            "--fdRadio_Active_Dot_Color_Warning",
            "--fdRadio_Background_Color_Warning_Hover",
            "--fdRadio_Background_Color_Success",
            "--fdRadio_Inner_Border_Width_Success",
            "--fdRadio_Inner_Border_Style_Success",
            "--fdRadio_Inner_Border_Color_Success",
            "--fdRadio_Active_Dot_Color_Success",
            "--fdRadio_Background_Color_Success_Hover",
            "--fdRadio_Background_Color_Information",
            "--fdRadio_Inner_Border_Width_Information",
            "--fdRadio_Inner_Border_Style_Information",
            "--fdRadio_Inner_Border_Color_Information",
            "--fdRadio_Active_Dot_Color_Information",
            "--fdRadio_Background_Color_Information_Hover",
            "--fdRadio_Background_Color_ReadOnly",
            "--fdRadio_Inner_Border_Width_ReadOnly",
            "--fdRadio_Inner_Border_Style_ReadOnly",
            "--fdRadio_Inner_Border_Color_ReadOnly",
            "--fdRadio_Active_Dot_Color_ReadOnly",
            "--fdRadio_Focus_Outline_Offset",
            "--fdRadio_Outline_Border_Radius",
            "--fdRadio_Compact_Outer_Circle_Padding",
            "--fdRadio_Compact_Inner_Circle_Diameter",
            "--fdRadio_Inner_Content_Size_Compact",
            "--fdRadio_Inner_Content_Padding_Compact",
            "--fdRadio_Compact_Outline_Border_radius"
          ],
          "examples": []
        },
        {
          "id": "rating-indicator",
          "name": "Rating Indicator",
          "description": "The rating indicator displays a group of icons or images (usually stars) that indicate a rating.",
          "baseClass": "fd-rating-indicator",
          "cssImport": "fundamental-styles/dist/rating-indicator.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-rating-indicator",
          "modifiers": [
            {
              "class": "fd-rating-indicator--icon",
              "description": "icon variant"
            },
            {
              "class": "fd-rating-indicator--hide-dynamic-text",
              "description": "hide-dynamic-text variant"
            },
            {
              "class": "fd-rating-indicator--display-mode",
              "description": "display-mode variant"
            },
            {
              "class": "fd-rating-indicator--non-interactive",
              "description": "non-interactive variant"
            },
            {
              "class": "fd-rating-indicator--half-star",
              "description": "half-star variant"
            },
            {
              "class": "fd-rating-indicator--zero-rating",
              "description": "zero-rating variant"
            },
            {
              "class": "fd-rating-indicator--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-rating-indicator--xs",
              "description": "xs variant"
            },
            {
              "class": "fd-rating-indicator--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-rating-indicator--compact",
              "description": "compact variant"
            },
            {
              "class": "fd-rating-indicator--condensed",
              "description": "condensed variant"
            }
          ],
          "elements": [
            {
              "class": "fd-rating-indicator__input",
              "description": "input element",
              "modifiers": [
                {
                  "class": "fd-rating-indicator__input--zero-rating",
                  "description": "zero-rating variant of input"
                }
              ]
            },
            {
              "class": "fd-rating-indicator__label",
              "description": "label element",
              "modifiers": [
                {
                  "class": "fd-rating-indicator__label--zero-rating",
                  "description": "zero-rating variant of label"
                }
              ]
            },
            {
              "class": "fd-rating-indicator__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-rating-indicator__dynamic-text",
              "description": "dynamic-text element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio",
            "--fdRating_Indicator_Border_Radius",
            "--fdRating_Indicator_Focus_Outline_Offset",
            "--fdRating_Indicator_Selected_Hover_Opacity",
            "--fdRating_Indicator_Disabled_Control_Opacity",
            "--fdRating_Indicator_Disabled_Selected_Color",
            "--fdRating_Indicator_Disabled_Unselected_Color",
            "--fdRating_Indicator_Display_Only_Selected_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "custom-icons",
            "different-values",
            "disabled",
            "display-mode",
            "half-values",
            "non-interactive",
            "sizes"
          ],
          "category": "form-inputs",
          "subcategory": "numeric",
          "useCases": [
            "Star ratings display",
            "User ratings input",
            "Quality indicators",
            "Review ratings"
          ],
          "avoidWhen": [
            "Binary like/dislike (use button)",
            "Progress (use progress-indicator)",
            "Numeric input (use slider or step-input)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "slider",
            "step-input"
          ],
          "dependencies": []
        },
        {
          "id": "resizable-card-layout",
          "name": "Resizable Card Layout",
          "description": "Resizable Card Layout component",
          "baseClass": "fd-resizable-card-layout",
          "cssImport": "fundamental-styles/dist/resizable-card-layout.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-resizable-card-layout",
          "modifiers": [
            {
              "class": "fd-resizable-card-layout--vertical",
              "description": "vertical variant"
            },
            {
              "class": "fd-resizable-card-layout--horizontal",
              "description": "horizontal variant"
            }
          ],
          "elements": [
            {
              "class": "fd-resizable-card-layout__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-resizable-card-layout__card",
              "description": "card element",
              "modifiers": []
            },
            {
              "class": "fd-resizable-card-layout__icon-wrapper",
              "description": "icon-wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-resizable-card-layout__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-resizable-card-layout__resize",
              "description": "resize element",
              "modifiers": []
            },
            {
              "class": "fd-resizable-card-layout__indication-border",
              "description": "indication-border element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Resizable dashboard cards",
            "User-configurable layouts",
            "Draggable card grid",
            "Personalized dashboards"
          ],
          "avoidWhen": [
            "Fixed layouts (use fixed-card-layout)",
            "Simple grids (use layout-grid)",
            "Non-interactive cards (use grid-list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "fixed-card-layout",
            "layout-grid",
            "card"
          ],
          "dependencies": []
        },
        {
          "id": "scrollbar",
          "name": "Scrollbar",
          "description": "Themeable scrollbar is the scrollbar component made accordingly to the Fiori 3 design guidelines.",
          "baseClass": "fd-scrollbar",
          "cssImport": "fundamental-styles/dist/scrollbar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-scrollbar",
          "modifiers": [
            {
              "class": "fd-scrollbar--container",
              "description": "container variant"
            },
            {
              "class": "fd-scrollbar--subtle",
              "description": "subtle variant"
            },
            {
              "class": "fd-scrollbar--undecorated",
              "description": "undecorated variant"
            },
            {
              "class": "fd-scrollbar--emphasized",
              "description": "emphasized variant"
            },
            {
              "class": "fd-scrollbar--touch-target",
              "description": "touch-target variant"
            },
            {
              "class": "fd-scrollbar--inverted",
              "description": "inverted variant"
            }
          ],
          "elements": [
            {
              "class": "fd-scrollbar__content",
              "description": "content element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdScrollbar_Track_Color",
            "--fdScrollbar_Border_Radius",
            "--fdLink_Text_Decoration",
            "--fdLink_Text_Content_Decoration",
            "--fdLink_Text_Decoration_Hover",
            "--fdLink_Text_Content_Decoration_Hover",
            "--fdLink_Text_Decoration_Focus",
            "--fdLink_Text_Content_Decoration_Focus",
            "--fdLink_Text_Decoration_Active",
            "--fdLink_Text_Content_Decoration_Active",
            "--fdLink_Text_Decoration_Disabled",
            "--fdLink_Text_Content_Decoration_Disabled",
            "--fdLink_Text_Content_Decoration_Subtle",
            "--fdLink_Text_Content_Decoration_Subtle_Hover",
            "--fdLink_Text_Content_Decoration_Subtle_Active",
            "--fdLink_Text_Decoration_Subtle",
            "--fdLink_Text_Decoration_Subtle_Hover",
            "--fdLink_Text_Decoration_Subtle_Active",
            "--fdLink_Text_Decoration_Visited",
            "--fdLink_Text_Content_Decoration_Visited",
            "--fdLink_Display",
            "--fdLink_Line_Height",
            "--fdLink_Text_Focus_Color",
            "--fdLink_Focus_Background",
            "--fdLink_Focus_Border_Radius",
            "--fdLink_Focus_Text_Shadow",
            "--fdLink_Hover_Outline_Offset",
            "--fdLink_Hover_Outline_Color",
            "--fdLink_Hover_Outline_Style",
            "--fdLink_Hover_Outline_Width",
            "--fdScrollbar_Thumb_Color",
            "--fdScrollbar_Dimension",
            "--fdScrollbar_Thumb_Offset",
            "--fdScrollbar_Thumb_Border_Radius",
            "--fdScrollbar_Thumb_Hover_Color"
          ],
          "tags": [
            "f3",
            "theme",
            "development"
          ],
          "examples": [
            "default-example"
          ],
          "category": "utilities",
          "subcategory": null,
          "useCases": [],
          "avoidWhen": [],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [],
          "dependencies": []
        },
        {
          "id": "search-field",
          "name": "Search Field",
          "description": "The Search Field component is intended to be used in BTP Tool Header.",
          "baseClass": "fd-search-field",
          "cssImport": "fundamental-styles/dist/search-field.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-search-field",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-search-field__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-search-field__input",
              "description": "input element",
              "modifiers": []
            },
            {
              "class": "fd-search-field__underline",
              "description": "underline element",
              "modifiers": []
            },
            {
              "class": "fd-search-field__actions",
              "description": "actions element",
              "modifiers": []
            },
            {
              "class": "fd-search-field__action-container",
              "description": "action-container element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSearchField_Height",
            "--fdSearchField_Height_Compact",
            "--fdSearchField_Height_Border",
            "--fdSearchField_Border_Radius",
            "--fdSearchField_BorderRadius",
            "--fdSearchField_Padding",
            "--fdSearchField_Padding_Compact",
            "--fdSearchField_Box_Shadow",
            "--fdSearchField_Background",
            "--fdSearchField_Background_Normal",
            "--fdSearchField_Color",
            "--fdSearchField_Icon_Size",
            "--fdSearchField_Icon_Size_Offset",
            "--fdSearchField_Actions_Offset",
            "--fdSearchField_Actions_Offset_Compact",
            "--fdSearchField_Action_Container_Size",
            "--fdSearchField_Action_Container_Size_Compact",
            "--fdSearchField_Clear_Button_Display",
            "--fdSearchField_Padding_Left",
            "--fdSearchField_Padding_Left_Compact",
            "--fdSearchField_Padding_Right",
            "--fdSearchField_Padding_Right_Compact",
            "--fdSearchField_Padding_Right_Typed",
            "--fdSearchField_Padding_Right_Typed_Compact",
            "--fdSearchField_Border_Color",
            "--fdSearchField_Icon_Color",
            "--fdSearchField_Placeholder_Color",
            "--fdSearchField_Background_Focus",
            "--fdSearchField_Background_Hover",
            "--fdSearchField_Outline",
            "--fdSearchField_Outline_Offset",
            "--fdSearchField_Underline_Color",
            "--fdButton_Nested_Color"
          ],
          "tags": [
            "btp"
          ],
          "examples": [
            "default"
          ],
          "category": "form-inputs",
          "subcategory": "search",
          "useCases": [
            "Search input with icon",
            "Filterable search",
            "Global search",
            "List filtering"
          ],
          "avoidWhen": [
            "Simple text filter (use input)",
            "Advanced filters (use filter bar)",
            "Dropdown search (use select with search)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "input",
            "input-group"
          ],
          "dependencies": []
        },
        {
          "id": "section",
          "name": "Section",
          "description": "Section component",
          "baseClass": "fd-section",
          "cssImport": "fundamental-styles/dist/section.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-section",
          "modifiers": [
            {
              "class": "fd-section--no-border",
              "description": "no-border variant"
            },
            {
              "class": "fd-section--full-bleed",
              "description": "full-bleed variant"
            },
            {
              "class": "fd-section--bleed",
              "description": "bleed variant"
            }
          ],
          "elements": [
            {
              "class": "fd-section__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-section__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-section__actions",
              "description": "actions element",
              "modifiers": []
            },
            {
              "class": "fd-section__footer",
              "description": "footer element",
              "modifiers": []
            }
          ],
          "variables": [],
          "tags": [],
          "examples": [],
          "category": "containers",
          "subcategory": null,
          "useCases": [
            "Page content sections",
            "Grouped form sections",
            "Content dividers",
            "Titled content areas"
          ],
          "avoidWhen": [
            "Collapsible content (use panel)",
            "Cards (use card)",
            "Independent panels (use layout-panel)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "panel",
            "facet",
            "form-group"
          ],
          "dependencies": []
        },
        {
          "id": "segmented-button",
          "name": "Segmented Button",
          "description": "Segmented Button component",
          "baseClass": "fd-segmented-button",
          "cssImport": "fundamental-styles/dist/segmented-button.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-segmented-button",
          "modifiers": [
            {
              "class": "fd-segmented-button--vertical",
              "description": "vertical variant"
            }
          ],
          "elements": [],
          "variables": [
            "--fdButtonPrioritizedBorderColor",
            "--fdButton_Split_Border_Color",
            "--fdButtonPrioritizedBackgroundColor",
            "--fdButton_Split_Background_Color",
            "--fdButton_Border_Radius_Left",
            "--fdButton_Border_Radius_Right",
            "--fdButton_Segmented_Border_Offset",
            "--fdButton_Border_Radius_Left_RTL",
            "--fdButton_Border_Radius_Right_RTL",
            "--fdButton_Vertical_Border_Radius_Left",
            "--fdButton_Vertical_Border_Radius_Right",
            "--fdButton_Focus_Border_Radius",
            "--fdButton_Outline_Contrast"
          ],
          "tags": [],
          "examples": [
            "segmented-button-vertical",
            "segmented-button"
          ],
          "category": "buttons",
          "subcategory": "selection",
          "useCases": [
            "View switcher",
            "Single selection from options",
            "Toggle between modes",
            "Mutually exclusive choices"
          ],
          "avoidWhen": [
            "Primary action with dropdown (use button-split)",
            "Multiple selections (use checkbox)",
            "Many options (use select)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "button-split",
            "tabs",
            "radio"
          ],
          "dependencies": []
        },
        {
          "id": "select",
          "name": "Select",
          "category": "forms",
          "subcategory": "input",
          "description": "Dropdown selection control for choosing one option from many",
          "baseClass": "fd-select",
          "cssImport": "fundamental-styles/dist/select.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-select",
          "useCases": [
            "Choose one option from list",
            "Dropdown menus in forms",
            "Single selection"
          ],
          "avoidWhen": [
            "Multiple selections (use checkbox list)",
            "Very long lists (consider search/filter)"
          ],
          "modifiers": [],
          "accessibility": {
            "role": "combobox",
            "ariaAttributes": [
              "aria-label",
              "aria-required"
            ],
            "labelRequired": true
          },
          "relatedComponents": [
            "input",
            "menu",
            "form-item"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-select__control",
              "description": "control element",
              "modifiers": []
            },
            {
              "class": "fd-select__text-content",
              "description": "text-content element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSelect_Min_Width",
            "--fdSelect_Text_Shadow",
            "--fdSelect_Margin_Block",
            "--fdSelect_Background",
            "--fdSelect_Background_Color",
            "--fdSelect_Hover_Background",
            "--fdSelect_Hover_Background_Color",
            "--fdSelect_Focus_Background",
            "--fdSelect_Control_Cursor",
            "--fdSelect_Control_Height",
            "--fdSelect_Button_Opacity",
            "--fdSelect_Button_Cursor",
            "--fdSelect_Text_Padding_Inline_End",
            "--fdSelect_Text_Content_Visibility",
            "--fdSelect_Text_Content_Display",
            "--fdSelect_Text_Content_Color",
            "--fdSelect_Text_Padding_Inline_Start"
          ],
          "examples": [
            "as-form-item",
            "blank",
            "cozy",
            "disabled",
            "item-grouping",
            "larger-select",
            "match-select-popover-body-size",
            "mobile-mode",
            "no-wrapping",
            "readonly",
            "semantic-states",
            "text-wrapping",
            "two-column",
            "two-columns-and-icons"
          ]
        },
        {
          "id": "settings",
          "name": "Settings",
          "description": "The Settings Dialog allows users to personalize their Fiori experience by adjusting various settings.<br><br> <h3>Layout and Structure</h3>",
          "baseClass": "fd-settings",
          "cssImport": "fundamental-styles/dist/settings.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-settings",
          "modifiers": [
            {
              "class": "fd-settings--footer",
              "description": "footer variant"
            },
            {
              "class": "fd-settings--no-padding",
              "description": "no-padding variant"
            },
            {
              "class": "fd-settings--no-background",
              "description": "no-background variant"
            },
            {
              "class": "fd-settings--md",
              "description": "md variant"
            },
            {
              "class": "fd-settings--sm",
              "description": "sm variant"
            }
          ],
          "elements": [
            {
              "class": "fd-settings__list-area",
              "description": "list-area element",
              "modifiers": []
            },
            {
              "class": "fd-settings__list-container",
              "description": "list-container element",
              "modifiers": []
            },
            {
              "class": "fd-settings__detail-area",
              "description": "detail-area element",
              "modifiers": []
            },
            {
              "class": "fd-settings__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-settings__content--no-background",
                  "description": "no-background variant of content"
                }
              ]
            },
            {
              "class": "fd-settings__container",
              "description": "container element",
              "modifiers": [
                {
                  "class": "fd-settings__container--sm",
                  "description": "sm variant of container"
                },
                {
                  "class": "fd-settings__container--md",
                  "description": "md variant of container"
                },
                {
                  "class": "fd-settings__container--lg",
                  "description": "lg variant of container"
                },
                {
                  "class": "fd-settings__container--xl",
                  "description": "xl variant of container"
                }
              ]
            },
            {
              "class": "fd-settings__list",
              "description": "list element",
              "modifiers": [
                {
                  "class": "fd-settings__list--footer",
                  "description": "footer variant of list"
                }
              ]
            }
          ],
          "variables": [
            "--fdSettings_Dialog_Content_Min_Width",
            "--fdSettings_Dialog_Content_Min_Height",
            "--fdSettings_Dialog_Content_Max_Width",
            "--fdSettings_Dialog_Content_Max_Height",
            "--fdSettings_Dialog_Content_Height",
            "--fdSettings_List_Nav_Indicator_Content",
            "--fdSettings_Header_Margin_Top",
            "--fdSettings_List_Area_Width",
            "--fdSettings_List_Area_Border",
            "--fdBar_Shadow"
          ],
          "tags": [
            "uxc"
          ],
          "examples": [
            "md",
            "sm",
            "xl-default",
            "xl"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "Settings page layout",
            "Preferences organization",
            "Configuration sections",
            "Settings navigation"
          ],
          "avoidWhen": [
            "Simple forms (use form-group)",
            "Navigation (use side-nav)",
            "Single setting (use switch or select)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "form-group",
            "side-nav"
          ],
          "dependencies": []
        },
        {
          "id": "shellbar",
          "name": "Shellbar",
          "category": "navigation",
          "subcategory": "headers",
          "description": "Application header bar with branding, navigation, and actions",
          "baseClass": "fd-shellbar",
          "cssImport": "fundamental-styles/dist/shellbar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-shellbar",
          "useCases": [
            "Application header",
            "Main navigation",
            "Branding area",
            "Global actions"
          ],
          "elements": [
            {
              "class": "fd-shellbar__branding",
              "description": "branding element",
              "modifiers": []
            },
            {
              "class": "fd-shellbar__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-shellbar__subtitle",
              "description": "subtitle element",
              "modifiers": []
            },
            {
              "class": "fd-shellbar__product",
              "description": "product element",
              "modifiers": []
            },
            {
              "class": "fd-shellbar__logo",
              "description": "logo element",
              "modifiers": []
            },
            {
              "class": "fd-shellbar__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-shellbar__spacer",
              "description": "spacer element",
              "modifiers": []
            },
            {
              "class": "fd-shellbar__button",
              "description": "button element",
              "modifiers": [
                {
                  "class": "fd-shellbar__button--menu",
                  "description": "menu variant of button"
                }
              ]
            },
            {
              "class": "fd-shellbar__avatar",
              "description": "avatar element",
              "modifiers": [
                {
                  "class": "fd-shellbar__avatar--circle",
                  "description": "circle variant of avatar"
                }
              ]
            },
            {
              "class": "fd-shellbar__group",
              "description": "group element",
              "modifiers": [
                {
                  "class": "fd-shellbar__group--product",
                  "description": "product variant of group"
                },
                {
                  "class": "fd-shellbar__group--context-area",
                  "description": "context-area variant of group"
                },
                {
                  "class": "fd-shellbar__group--actions",
                  "description": "actions variant of group"
                },
                {
                  "class": "fd-shellbar__group--full-width",
                  "description": "full-width variant of group"
                }
              ]
            },
            {
              "class": "fd-shellbar__search-category",
              "description": "search-category element",
              "modifiers": [
                {
                  "class": "fd-shellbar__search-category--collapsed",
                  "description": "collapsed variant of search-category"
                }
              ]
            }
          ],
          "accessibility": {
            "role": "banner",
            "landmark": true
          },
          "relatedComponents": [
            "side-nav",
            "user-menu",
            "button"
          ],
          "dependencies": [],
          "tags": [
            "experimental",
            "uxc"
          ],
          "modifiers": [
            {
              "class": "fd-shellbar--mobile-flex",
              "description": "mobile-flex variant"
            },
            {
              "class": "fd-shellbar--mobile",
              "description": "mobile variant"
            },
            {
              "class": "fd-shellbar--desktop",
              "description": "desktop variant"
            },
            {
              "class": "fd-shellbar--non-interactive",
              "description": "non-interactive variant"
            },
            {
              "class": "fd-shellbar--image-replaced",
              "description": "image-replaced variant"
            },
            {
              "class": "fd-shellbar--menu",
              "description": "menu variant"
            },
            {
              "class": "fd-shellbar--grow",
              "description": "grow variant"
            },
            {
              "class": "fd-shellbar--shrink",
              "description": "shrink variant"
            },
            {
              "class": "fd-shellbar--collapsed",
              "description": "collapsed variant"
            },
            {
              "class": "fd-shellbar--basis-auto",
              "description": "basis-auto variant"
            },
            {
              "class": "fd-shellbar--product",
              "description": "product variant"
            },
            {
              "class": "fd-shellbar--copilot",
              "description": "copilot variant"
            },
            {
              "class": "fd-shellbar--center",
              "description": "center variant"
            },
            {
              "class": "fd-shellbar--context-area",
              "description": "context-area variant"
            },
            {
              "class": "fd-shellbar--actions",
              "description": "actions variant"
            },
            {
              "class": "fd-shellbar--full-width",
              "description": "full-width variant"
            },
            {
              "class": "fd-shellbar--s",
              "description": "s variant"
            },
            {
              "class": "fd-shellbar--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-shellbar--m",
              "description": "m variant"
            },
            {
              "class": "fd-shellbar--l",
              "description": "l variant"
            },
            {
              "class": "fd-shellbar--md",
              "description": "md variant"
            },
            {
              "class": "fd-shellbar--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-shellbar--xl",
              "description": "xl variant"
            },
            {
              "class": "fd-shellbar--xxl",
              "description": "xxl variant"
            },
            {
              "class": "fd-shellbar--side-nav",
              "description": "side-nav variant"
            },
            {
              "class": "fd-shellbar--responsive-paddings",
              "description": "responsive-paddings variant"
            }
          ],
          "variables": [
            "--fdSelect_Text_Content_Display",
            "--fdSelect_Min_Width",
            "--fdShellbar_Inline_Padding",
            "--fdShellBar_Branding_Cursor",
            "--fdShellBar_Branding_Background",
            "--fdShellBar_Branding_Border_Color",
            "--fdShellbar_Branding_Hover_Background",
            "--fdShellbar_Branding_Hover_Border_Color",
            "--fdShellbar_Branding_Active_Background",
            "--fdShellbar_Branding_Active_Border_Color",
            "--fdShellbar_Button_Outline_Color",
            "--fdShellbar_Title_Color",
            "--fdShellbar_Subtitle_Color",
            "--fdButtonBackgroundColor",
            "--fdButtonBorderColor",
            "--fdButtonColor",
            "--fdButtonIconColor",
            "--fdShellbar_Button_Hover_Border_Color",
            "--fdShellbar_Button_Active_Border_Color",
            "--fdButton_Height",
            "--fdButton_Clickable_Height",
            "--fdButton_Min_Width",
            "--fdButton_Focus_Border_Radius",
            "--fdShellbar_SearchField_Border_Radius",
            "--fdShellbar_SearchField_Box_Shadow",
            "--fdShellbar_SearchField_Shadow",
            "--fdShellbar_SearchField_Background_Color",
            "--fdShellbar_SearchField_Background_Color_Hover",
            "--fdShellbar_SearchField_Background_Color_Active",
            "--fdShellbar_Active_Shadow",
            "--fdInputGroup_Input_Padding",
            "--fdShellbar_SearchField_Input_Border_Radius",
            "--fdShellbar_SearchField_Input_Placeholder_TextColor",
            "--fdInputGroup_Input_Color",
            "--fdShellbar_SearchField_Input_Text_Color",
            "--fdInputGroup_Input_Border",
            "--fdShellbar_SearchField_Input_Border",
            "--fdInputGroup_Input_Background",
            "--fdShellbar_SearchField_Input_Background_Regular",
            "--fdInputGroup_Hover_Input_Background",
            "--fdShellbar_SearchField_Input_Background_Hover",
            "--fdShellbar_SearchField_Input_Border_Hover",
            "--fdShellbar_SearchField_Input_Background_Active",
            "--fdShellbar_SearchField_Input_Border_Active",
            "--fdShellbar_SearchField_Input_Padding_Inline",
            "--fdShellbar_SearchField_Input_Background_Focus",
            "--fdShellbar_SearchField_Input_Outline",
            "--fdShellbar_SearchField_Input_Outline_Offset",
            "--fdShellbar_SearchField_Submit_Button_Color",
            "--fdShellbar_SearchField_Submit_Button_Border_Color",
            "--fdShellbar_SearchField_Submit_Button_Background_Color",
            "--fdShellbar_SearchField_Submit_Button_Border_Color_Hover",
            "--fdShellbar_SearchField_Submit_Button_Background_Color_Hover",
            "--fdShellbar_SearchField_Button_Width",
            "--fdShellbar_SearchField_Addon_Margin_Inline",
            "--fdShellbar_SearchField_Button_Height",
            "--fdShellbar_SearchField_Button_Border_Radius",
            "--fdShellbar_SearchField_Button_Focus_Inset",
            "--fdShell_Search_Field_Category_Margin_End",
            "--fdShell_Search_Field_Category_Divider_Display",
            "--fdShell_Search_Dropdown_Height",
            "--fdShell_Search_Dropdown_Button_Radius",
            "--fdShell_Search_Dropdown_Box_Shadow_Hover",
            "--fdShell_Search_Dropdown_Border_Radius",
            "--fdShell_Search_Category_Border",
            "--fdShell_Search_Dropdown_Hover_Background",
            "--fdShell_Search_Dropdown_Active_Background",
            "--fdShellbar_Button_Active_Background",
            "--fdShellbar_Button_Active_Color",
            "--fdButton_Outline_Contrast",
            "--fdButtonPrioritizedBorderColor"
          ],
          "examples": [
            "optional-items",
            "overflow-toolbar",
            "primary",
            "responsive-paddings",
            "responsiveness"
          ],
          "avoidWhen": []
        },
        {
          "id": "side-nav",
          "name": "Side Nav",
          "description": "Side Nav component",
          "baseClass": "fd-side-nav",
          "cssImport": "fundamental-styles/dist/side-nav.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-side-nav",
          "modifiers": [
            {
              "class": "fd-side-nav--top",
              "description": "top variant"
            },
            {
              "class": "fd-side-nav--bottom",
              "description": "bottom variant"
            }
          ],
          "elements": [
            {
              "class": "fd-side-nav__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-side-nav__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-side-nav__group-header",
              "description": "group-header element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSideNav_Width",
            "--fdSideNav_Overflow"
          ],
          "tags": [],
          "examples": [],
          "category": "navigation",
          "subcategory": "sidebar",
          "useCases": [
            "Main application navigation",
            "Collapsible side menu",
            "Hierarchical navigation",
            "App area switching"
          ],
          "avoidWhen": [
            "Horizontal navigation (use tabs or horizontal-navigation)",
            "Simple menus (use menu)",
            "Contextual actions (use toolbar)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "vertical-nav",
            "shellbar",
            "navigation-list"
          ],
          "dependencies": []
        },
        {
          "id": "skeleton",
          "name": "Skeleton",
          "description": "Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.",
          "baseClass": "fd-skeleton",
          "cssImport": "fundamental-styles/dist/skeleton.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-skeleton",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-skeleton__canvas",
              "description": "canvas element",
              "modifiers": []
            },
            {
              "class": "fd-skeleton__outer",
              "description": "outer element",
              "modifiers": []
            },
            {
              "class": "fd-skeleton__middle",
              "description": "middle element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSkeletonGradientMiddleColor"
          ],
          "tags": [
            "f3"
          ],
          "examples": [
            "circle",
            "complex",
            "lines",
            "skeleton"
          ],
          "category": "feedback",
          "subcategory": null,
          "useCases": [
            "Content loading placeholder",
            "Page loading state",
            "Perceived performance improvement",
            "Layout preservation during load"
          ],
          "avoidWhen": [
            "Quick operations (use busy-indicator)",
            "Known progress (use progress-indicator)",
            "Error states (use illustrated-message)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "busy-indicator",
            "progress-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "slider",
          "name": "Slider",
          "description": "There are two types of sliders, <a href=\"https://experience.sap.com/internal/fiori-design-web/slider/\">Standard Slider</a> and  <a href=\"https://experience.sap.com/internal/fiori-design-web/range-slider/\">Range Slider</a>. The standard slider is a control that enables the user to adjust single values within a specified numerical range. The range slider enables the user to select a value range within a predefined numerical interval.",
          "baseClass": "fd-slider",
          "cssImport": "fundamental-styles/dist/slider.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-slider",
          "modifiers": [
            {
              "class": "fd-slider--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-slider--vertical",
              "description": "vertical variant"
            },
            {
              "class": "fd-slider--range",
              "description": "range variant"
            },
            {
              "class": "fd-slider--in-range",
              "description": "in-range variant"
            }
          ],
          "elements": [
            {
              "class": "fd-slider__inner",
              "description": "inner element",
              "modifiers": []
            },
            {
              "class": "fd-slider__track",
              "description": "track element",
              "modifiers": []
            },
            {
              "class": "fd-slider__track-range",
              "description": "track-range element",
              "modifiers": []
            },
            {
              "class": "fd-slider__tick-wrapper",
              "description": "tick-wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-slider__ticks",
              "description": "ticks element",
              "modifiers": []
            },
            {
              "class": "fd-slider__labels",
              "description": "labels element",
              "modifiers": []
            },
            {
              "class": "fd-slider__tick",
              "description": "tick element",
              "modifiers": [
                {
                  "class": "fd-slider__tick--in-range",
                  "description": "in-range variant of tick"
                }
              ]
            },
            {
              "class": "fd-slider__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-slider__handle",
              "description": "handle element",
              "modifiers": []
            },
            {
              "class": "fd-slider__track-focus-range",
              "description": "track-focus-range element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSlider_Endpoint_Background",
            "--fdSlider_Endpoint_Border",
            "--fdSlider_Endpoint_Active_Border",
            "--fdSlider_Endpoint_Active_Background",
            "--fdSlider_Track_Height",
            "--fdSlider_Tick_Height",
            "--fdSlider_Handle_Height",
            "--fdSlider_Handle_Width",
            "--fdSlider_Mobile_Handle_Width",
            "--fdSlider_Mobile_Handle_Height",
            "--fdSlider_Handle_Active_Width",
            "--fdSlider_Mobile_Handle_Active_Size",
            "--fdSlider_Handle_Active_Height",
            "--fdSlider_Endpoint_Size",
            "--fdSlider_Track_Background",
            "--fdSlider_Track_BorderRadius",
            "--fdSlider_Track_Border_Width",
            "--fdSlider_Track_Border_Color",
            "--fdSlider_Track_Active_Background",
            "--fdSlider_Track_Active_Border",
            "--fdSlider_Track_Active_Box_Shadow",
            "--fdSlider_Tick_Background",
            "--fdSlider_Active_Tick_Background",
            "--fdSlider_Handle_Border_Radius",
            "--fdSlider_Handle_Background",
            "--fdSlider_Handle_Border",
            "--fdSlider_Handle_Icon_Display",
            "--fdSlider_Focus_Handle_Background",
            "--fdSlider_Focus_Handle_Border",
            "--fdSlider_Hover_Handle_Border",
            "--fdSlider_Handle_Border_Hover_Color",
            "--fdSlider_Hover_Handle_Background",
            "--fdSlider_Active_Handle_Background",
            "--fdSlider_Active_Handle_Border",
            "--fdSlider_Range_Track_Border_Radius",
            "--fdSlider_Focus_Range_Outline",
            "--fdSlider_Range_Handle_Background",
            "--fdSlider_Range_Handle_Border",
            "--fdSlider_Range_Hover_Handle_Background",
            "--fdSlider_Range_Hover_Handle_Border_Color",
            "--fdSlider_Range_Active_Handle_Background",
            "--fdSlider_Range_Active_Handle_Border_Color",
            "--fdSlider_Focus_Handle_Display",
            "--fdSlider_Range_Focus_Handle_Background",
            "--fdSlider_Range_Focus_Handle_Border"
          ],
          "tags": [
            "f3",
            "theme"
          ],
          "examples": [
            "mobile-mode",
            "range",
            "standard",
            "ticks-and-labels",
            "ticks",
            "vertical-mode"
          ],
          "category": "form-inputs",
          "subcategory": "numeric",
          "useCases": [
            "Range value selection",
            "Volume/brightness controls",
            "Price range filtering",
            "Numeric range input"
          ],
          "avoidWhen": [
            "Precise numeric input (use step-input)",
            "Discrete options (use segmented-button)",
            "Rating (use rating-indicator)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "step-input",
            "rating-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "splitter",
          "name": "Splitter",
          "description": "Splitter component",
          "baseClass": "fd-splitter",
          "cssImport": "fundamental-styles/dist/splitter.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-splitter",
          "modifiers": [
            {
              "class": "fd-splitter--horizontal",
              "description": "horizontal variant"
            },
            {
              "class": "fd-splitter--vertical",
              "description": "vertical variant"
            },
            {
              "class": "fd-splitter--translucent",
              "description": "translucent variant"
            },
            {
              "class": "fd-splitter--solid",
              "description": "solid variant"
            },
            {
              "class": "fd-splitter--active",
              "description": "active variant"
            },
            {
              "class": "fd-splitter--subtle",
              "description": "subtle variant"
            },
            {
              "class": "fd-splitter--undecorated",
              "description": "undecorated variant"
            },
            {
              "class": "fd-splitter--emphasized",
              "description": "emphasized variant"
            },
            {
              "class": "fd-splitter--touch-target",
              "description": "touch-target variant"
            },
            {
              "class": "fd-splitter--inverted",
              "description": "inverted variant"
            }
          ],
          "elements": [
            {
              "class": "fd-splitter__pagination",
              "description": "pagination element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__pagination-item-dot",
              "description": "pagination-item-dot element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__resizer",
              "description": "resizer element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__resizer-grip",
              "description": "resizer-grip element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__resizer-grip-icon",
              "description": "resizer-grip-icon element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__resizer-decoration-before",
              "description": "resizer-decoration-before element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__resizer-decoration-after",
              "description": "resizer-decoration-after element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__pane-container",
              "description": "pane-container element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__pane",
              "description": "pane element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__split-pane",
              "description": "split-pane element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__pagination-item",
              "description": "pagination-item element",
              "modifiers": []
            },
            {
              "class": "fd-splitter__content",
              "description": "content element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSplitter_Resizer_Line_Thickness",
            "--fdSplitter_Resizer_Line_Size",
            "--fdSplitter_Split_Pane_BoxShadow",
            "--fdSplitter_Split_Pane_Background",
            "--fdSplitter_Pane_Container_Flex_Direction",
            "--fdSplitter_Pagination_Dot_Value",
            "--fdSplitter_Pagination_Container_Height",
            "--fdSplitter_Resizer_Gap",
            "--fdSplitter_Resizer_Width",
            "--fdSplitter_Resizer_Height",
            "--fdSplitter_Resizer_Cursor",
            "--fdSplitter_Resizer_Grip_Cursor",
            "--fdSplitter_Resizer_Flex_Direction",
            "--fdSplitter_Resizer_Background",
            "--fdSplitter_Resizer_Before_Background",
            "--fdSplitter_Resizer_After_Background",
            "--fdSplitter_Resizer_Line_Border_Radius",
            "--fdSplitter_Resizer_Border",
            "--fdLink_Text_Decoration",
            "--fdLink_Text_Content_Decoration",
            "--fdLink_Text_Decoration_Hover",
            "--fdLink_Text_Content_Decoration_Hover",
            "--fdLink_Text_Decoration_Focus",
            "--fdLink_Text_Content_Decoration_Focus",
            "--fdLink_Text_Decoration_Active",
            "--fdLink_Text_Content_Decoration_Active",
            "--fdLink_Text_Decoration_Disabled",
            "--fdLink_Text_Content_Decoration_Disabled",
            "--fdLink_Text_Content_Decoration_Subtle",
            "--fdLink_Text_Content_Decoration_Subtle_Hover",
            "--fdLink_Text_Content_Decoration_Subtle_Active",
            "--fdLink_Text_Decoration_Subtle",
            "--fdLink_Text_Decoration_Subtle_Hover",
            "--fdLink_Text_Decoration_Subtle_Active",
            "--fdLink_Text_Decoration_Visited",
            "--fdLink_Text_Content_Decoration_Visited",
            "--fdLink_Display",
            "--fdLink_Line_Height",
            "--fdLink_Text_Focus_Color",
            "--fdLink_Focus_Background",
            "--fdLink_Focus_Border_Radius",
            "--fdLink_Focus_Text_Shadow",
            "--fdLink_Hover_Outline_Offset",
            "--fdLink_Hover_Outline_Color",
            "--fdLink_Hover_Outline_Style",
            "--fdLink_Hover_Outline_Width",
            "--fdScrollbar_Thumb_Color",
            "--fdScrollbar_Track_Color",
            "--fdScrollbar_Dimension",
            "--fdScrollbar_Thumb_Offset",
            "--fdScrollbar_Thumb_Border_Radius",
            "--fdScrollbar_Thumb_Hover_Color"
          ],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Resizable panes",
            "Two-panel layouts",
            "Adjustable content areas",
            "Side-by-side comparison"
          ],
          "avoidWhen": [
            "Three-column responsive (use flexible-column-layout)",
            "Fixed layouts (use layout-grid)",
            "Simple side nav (use side-nav)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "flexible-column-layout",
            "dynamic-side-content"
          ],
          "dependencies": []
        },
        {
          "id": "status-indicator",
          "name": "Status Indicator",
          "description": "The status indicator displays a SVG images that indicate a pictorial representation of an object.",
          "baseClass": "fd-status-indicator",
          "cssImport": "fundamental-styles/dist/status-indicator.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-status-indicator",
          "modifiers": [
            {
              "class": "fd-status-indicator--horizontal-label",
              "description": "horizontal-label variant"
            },
            {
              "class": "fd-status-indicator--link",
              "description": "link variant"
            },
            {
              "class": "fd-status-indicator--negative",
              "description": "negative variant"
            },
            {
              "class": "fd-status-indicator--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-status-indicator--critical",
              "description": "critical variant"
            },
            {
              "class": "fd-status-indicator--positive",
              "description": "positive variant"
            },
            {
              "class": "fd-status-indicator--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-status-indicator--md",
              "description": "md variant"
            },
            {
              "class": "fd-status-indicator--xl",
              "description": "xl variant"
            }
          ],
          "elements": [
            {
              "class": "fd-status-indicator__label",
              "description": "label element",
              "modifiers": [
                {
                  "class": "fd-status-indicator__label--top",
                  "description": "top variant of label"
                },
                {
                  "class": "fd-status-indicator__label--right",
                  "description": "right variant of label"
                },
                {
                  "class": "fd-status-indicator__label--left",
                  "description": "left variant of label"
                },
                {
                  "class": "fd-status-indicator__label--bottom",
                  "description": "bottom variant of label"
                },
                {
                  "class": "fd-status-indicator__label--lg",
                  "description": "lg variant of label"
                }
              ]
            }
          ],
          "variables": [],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "fill-values",
            "sizes",
            "status-indicator-angular-filling",
            "status-indicator-coreo-graphy",
            "status-indicator-labels",
            "status-indicator-linear-filling",
            "status-indicator-radial-filling"
          ],
          "category": "feedback",
          "subcategory": null,
          "useCases": [
            "Process status visualization",
            "Multi-state indicators",
            "Quality indicators",
            "Score visualization"
          ],
          "avoidWhen": [
            "Simple status (use object-status)",
            "Progress (use progress-indicator)",
            "Ratings (use rating-indicator)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "object-status",
            "progress-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "step-input",
          "name": "Step Input",
          "description": "The step input control allows the user to change the input values in predefined increments (steps).",
          "baseClass": "fd-step-input",
          "cssImport": "fundamental-styles/dist/step-input.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-step-input",
          "modifiers": [
            {
              "class": "fd-step-input--full-width",
              "description": "full-width variant"
            }
          ],
          "elements": [
            {
              "class": "fd-step-input__button",
              "description": "button element",
              "modifiers": []
            },
            {
              "class": "fd-step-input__input",
              "description": "input element",
              "modifiers": []
            },
            {
              "class": "fd-step-input__container",
              "description": "container element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdStepInput_Button_Width",
            "--fdStepInput_Button_Width_Cozy",
            "--fdStepInput_Bordered_Button_Width",
            "--fdStepInput_Button_Width_Semantic_Cozy",
            "--fdInput_Field_Padding_Inline",
            "--fdStepInput_Button_Width_Compact",
            "--fdStepInput_Button_Width_Semantic_Compact",
            "--fdInput_Field_Compact_Padding"
          ],
          "tags": [],
          "examples": [
            "disabled",
            "focused",
            "full-width",
            "primary",
            "read-only",
            "states"
          ],
          "category": "form-inputs",
          "subcategory": "numeric",
          "useCases": [
            "Quantity input with +/- buttons",
            "Precise numeric input",
            "Increment/decrement values",
            "Quantity selectors"
          ],
          "avoidWhen": [
            "Range selection (use slider)",
            "Large value ranges (use input)",
            "Rating (use rating-indicator)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "slider",
            "input",
            "rating-indicator"
          ],
          "dependencies": []
        },
        {
          "id": "switch",
          "name": "Switch",
          "description": "The switch mimics a physical switch, allowing users to set individual features (such as personalization or display settings) to either active or inactive. What the switch controls should be clarified with an inline label, while the state it’s currently in should be displayed on the switch itself.",
          "baseClass": "fd-switch",
          "cssImport": "fundamental-styles/dist/switch.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-switch",
          "modifiers": [
            {
              "class": "fd-switch--off",
              "description": "off variant"
            },
            {
              "class": "fd-switch--on",
              "description": "on variant"
            },
            {
              "class": "fd-switch--semantic",
              "description": "semantic variant"
            },
            {
              "class": "fd-switch--text",
              "description": "text variant"
            }
          ],
          "elements": [
            {
              "class": "fd-switch__control",
              "description": "control element",
              "modifiers": []
            },
            {
              "class": "fd-switch__slider",
              "description": "slider element",
              "modifiers": []
            },
            {
              "class": "fd-switch__track",
              "description": "track element",
              "modifiers": []
            },
            {
              "class": "fd-switch__text",
              "description": "text element",
              "modifiers": [
                {
                  "class": "fd-switch__text--on",
                  "description": "on variant of text"
                },
                {
                  "class": "fd-switch__text--off",
                  "description": "off variant of text"
                }
              ]
            },
            {
              "class": "fd-switch__icon",
              "description": "icon element",
              "modifiers": [
                {
                  "class": "fd-switch__icon--on",
                  "description": "on variant of icon"
                },
                {
                  "class": "fd-switch__icon--off",
                  "description": "off variant of icon"
                }
              ]
            },
            {
              "class": "fd-switch__handle",
              "description": "handle element",
              "modifiers": []
            },
            {
              "class": "fd-switch__input",
              "description": "input element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSwitch_Track_Offset",
            "--fdSwitch_Handle_Offset",
            "--fdSwitch_Active_Handle_Offset",
            "--fdSwitch_Compact_Handle_Offset",
            "--fdSwitch_Compact_Active_Handle_Offset",
            "--fdSwitch_Semantic_Handle_Offset",
            "--fdSwitch_Semantic_Handle_Active_Offset",
            "--fdSwitch_Compact_Semantic_Handle_Offset",
            "--fdSwitch_Compact_Semantic_Active_Handle_Offset",
            "--fdSwitch_Text_Handle_Offset",
            "--fdSwitch_Text_Handle_Active_Offset",
            "--fdSwitch_Compact_Text_Handle_Offset",
            "--fdSwitch_Compact_Text_Handle_Active_Offset",
            "--fdSwitch_Padding",
            "--fdSwitch_Track_Background",
            "--fdSwitch_Width",
            "--fdSwitch_Height",
            "--fdSwitch_Border",
            "--fdSwitch_Border_Radius",
            "--fdSwitch_Shadow",
            "--fdSwitch_Border_Color",
            "--fdSwitch_Semantic_Icon_Position",
            "--fdSwitch_Text_Inactive_Color",
            "--fdSwitch_Text_Active_Color",
            "--fdSwitch_Icon_Size",
            "--fdSwitch_Icon_Display",
            "--fdSwitch_Handle_Inactive_Color",
            "--fdSwitch_Icon_Error_Margin",
            "--fdSwitch_Handle_Active_Color",
            "--fdSwitch_Icon_Success_Margin",
            "--fdSwitch_Slider_Box_Sizing",
            "--fdSwitch_Handle_Border_Width",
            "--fdSwitch_Handle_Border_Color",
            "--fdSwitch_Handle_Background",
            "--fdSwitch_Handle_Width",
            "--fdSwitch_Handle_Height",
            "--fdSwitch_Handle_Border_Radius",
            "--fdSwitch_Focus_Outline_Vertical_Offset",
            "--fdSwitch_Focus_Outline_Horizontal_Offset",
            "--fdSwitch_Focus_Outline_Border_Radius",
            "--fdSwitch_Active_Shadow",
            "--fdSwitch_On_Hover_Slider_Background",
            "--fdSwitch_On_Hover_Slider_Shadow",
            "--fdSwitch_Handle_Hover_Border_Color",
            "--fdSwitch_Hover_Handle_Background",
            "--fdSwitch_On_Hover_Slider_Border",
            "--fdSwitch_On_Hover_Slider_Active_Background",
            "--fdSwitch_On_Hover_Slider_Active_Shadow",
            "--fdSwitch_Hover_Handle_Active_Background",
            "--fdSwitch_Handle_Selected_Hover_Border_Color",
            "--fdSwitch_Compact_Padding_Block",
            "--fdSwitch_Compact_Handle_Width",
            "--fdSwitch_Compact_Handle_Height",
            "--fdSwitch_Compact_Width",
            "--fdSwitch_Compact_Height",
            "--fdSwitch_Compact_Icon_Size",
            "--fdSwitch_Semantic_Width",
            "--fdSwitch_Semantic_Height",
            "--fdSwitch_Semantic_Error_Background_Color",
            "--fdSwitch_Semantic_Error_Box_Shadow",
            "--fdSwitch_Semantic_Error_Handle_Background_Color",
            "--fdSwitch_Semantic_Error_Handle_Border_Color",
            "--fdSwitch_Semantic_Handle_Success_Color",
            "--fdSwitch_Semantic_Handle_Error_Color",
            "--fdSwitch_Semantic_Success_Background_Color",
            "--fdSwitch_Semantic_Success_Box_Shadow",
            "--fdSwitch_Semantic_Success_Handle_Border_Color",
            "--fdSwitch_Semantic_Success_Handle_Background_Color",
            "--fdSwitch_Compact_Semantic_Width",
            "--fdSwitch_Compact_Semantic_Height",
            "--fdSwitch_Semantic_Hover_Error_Background_Color",
            "--fdSwitch_Semantic_Hover_Error_Box_Shadow",
            "--fdSwitch_Semantic_Error_Handle_Hover_Background_Color",
            "--fdSwitch_Semantic_Error_Handle_Hover_Border_Color",
            "--fdSwitch_Semantic_Hover_Error_Color",
            "--fdSwitch_Semantic_Hover_Success_Color",
            "--fdSwitch_Semantic_Hover_Error_Border_Color",
            "--fdSwitch_Semantic_Hover_Success_Background_Color",
            "--fdSwitch_Semantic_Hover_Success_Box_Shadow",
            "--fdSwitch_Semantic_Success_Handle_Hover_Background_Color",
            "--fdSwitch_Semantic_Success_Handle_Hover_Border_Color",
            "--fdSwitch_Semantic_Hover_Success_Border_Color",
            "--fdSwitch_Text_Width",
            "--fdSwitch_Text_Handle_Width",
            "--fdSwitch_Compact_Text_Width",
            "--fdSwitch_Compact_Text_Handle_Width",
            "--fdSwitch_Compact_Text_Height"
          ],
          "tags": [],
          "examples": [
            "basic",
            "semantic-switch",
            "with-text"
          ],
          "category": "form-inputs",
          "subcategory": "toggle",
          "useCases": [
            "On/off toggles",
            "Feature enable/disable",
            "Settings toggles",
            "Binary state changes"
          ],
          "avoidWhen": [
            "Multiple options (use checkbox)",
            "Form agreement (use checkbox)",
            "Toggle between views (use segmented-button)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "checkbox",
            "segmented-button"
          ],
          "dependencies": []
        },
        {
          "id": "table",
          "name": "Table",
          "category": "data-display",
          "subcategory": "tables",
          "description": "Structured data table for displaying and interacting with tabular data",
          "baseClass": "fd-table",
          "cssImport": "fundamental-styles/dist/table.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-table",
          "useCases": [
            "Display structured data",
            "Sortable columns",
            "Selectable rows",
            "Large datasets"
          ],
          "avoidWhen": [
            "Simple lists (use list component)",
            "Visual card layouts (use grid-list)"
          ],
          "modifiers": [
            {
              "class": "fd-table--navigation",
              "description": "navigation variant"
            },
            {
              "class": "fd-table--non-interactive",
              "description": "non-interactive variant"
            },
            {
              "class": "fd-table--no-wrap",
              "description": "no-wrap variant"
            },
            {
              "class": "fd-table--no-data",
              "description": "no-data variant"
            },
            {
              "class": "fd-table--mock",
              "description": "mock variant"
            },
            {
              "class": "fd-table--checkbox",
              "description": "checkbox variant"
            },
            {
              "class": "fd-table--fit-content",
              "description": "fit-content variant"
            },
            {
              "class": "fd-table--no-padding",
              "description": "no-padding variant"
            },
            {
              "class": "fd-table--status-indicator",
              "description": "status-indicator variant"
            },
            {
              "class": "fd-table--navigated",
              "description": "navigated variant"
            },
            {
              "class": "fd-table--hoverable",
              "description": "hoverable variant"
            },
            {
              "class": "fd-table--activable",
              "description": "activable variant"
            },
            {
              "class": "fd-table--focusable",
              "description": "focusable variant"
            },
            {
              "class": "fd-table--hidden",
              "description": "hidden variant"
            },
            {
              "class": "fd-table--fixed",
              "description": "fixed variant"
            },
            {
              "class": "fd-table--fixed-end",
              "description": "fixed-end variant"
            },
            {
              "class": "fd-table--pop-in",
              "description": "pop-in variant"
            },
            {
              "class": "fd-table--title",
              "description": "title variant"
            },
            {
              "class": "fd-table--main",
              "description": "main variant"
            },
            {
              "class": "fd-table--secondary",
              "description": "secondary variant"
            },
            {
              "class": "fd-table--no-vertical-borders",
              "description": "no-vertical-borders variant"
            },
            {
              "class": "fd-table--no-horizontal-borders",
              "description": "no-horizontal-borders variant"
            },
            {
              "class": "fd-table--no-vertical-border",
              "description": "no-vertical-border variant"
            },
            {
              "class": "fd-table--no-horizontal-border",
              "description": "no-horizontal-border variant"
            },
            {
              "class": "fd-table--responsive",
              "description": "responsive variant"
            },
            {
              "class": "fd-table--no-outer-border",
              "description": "no-outer-border variant"
            },
            {
              "class": "fd-table--group",
              "description": "group variant"
            },
            {
              "class": "fd-table--tree",
              "description": "tree variant"
            },
            {
              "class": "fd-table--expand",
              "description": "expand variant"
            },
            {
              "class": "fd-table--open",
              "description": "open variant"
            },
            {
              "class": "fd-table--condensed",
              "description": "condensed variant"
            }
          ],
          "elements": [
            {
              "class": "fd-table__cell",
              "description": "cell element",
              "modifiers": [
                {
                  "class": "fd-table__cell--non-interactive",
                  "description": "non-interactive variant of cell"
                },
                {
                  "class": "fd-table__cell--checkbox",
                  "description": "checkbox variant of cell"
                },
                {
                  "class": "fd-table__cell--status-indicator",
                  "description": "status-indicator variant of cell"
                },
                {
                  "class": "fd-table__cell--group",
                  "description": "group variant of cell"
                },
                {
                  "class": "fd-table__cell--fit-content",
                  "description": "fit-content variant of cell"
                },
                {
                  "class": "fd-table__cell--fixed",
                  "description": "fixed variant of cell"
                },
                {
                  "class": "fd-table__cell--fixed-last",
                  "description": "fixed-last variant of cell"
                },
                {
                  "class": "fd-table__cell--fixed-end",
                  "description": "fixed-end variant of cell"
                },
                {
                  "class": "fd-table__cell--fixed-end-last",
                  "description": "fixed-end-last variant of cell"
                },
                {
                  "class": "fd-table__cell--focusable",
                  "description": "focusable variant of cell"
                },
                {
                  "class": "fd-table__cell--expand",
                  "description": "expand variant of cell"
                },
                {
                  "class": "fd-table__cell--activable",
                  "description": "activable variant of cell"
                },
                {
                  "class": "fd-table__cell--hoverable",
                  "description": "hoverable variant of cell"
                },
                {
                  "class": "fd-table__cell--no-padding",
                  "description": "no-padding variant of cell"
                },
                {
                  "class": "fd-table__cell--navigated",
                  "description": "navigated variant of cell"
                },
                {
                  "class": "fd-table__cell--no-data",
                  "description": "no-data variant of cell"
                },
                {
                  "class": "fd-table__cell--valid",
                  "description": "valid variant of cell"
                },
                {
                  "class": "fd-table__cell--warning",
                  "description": "warning variant of cell"
                },
                {
                  "class": "fd-table__cell--error",
                  "description": "error variant of cell"
                },
                {
                  "class": "fd-table__cell--information",
                  "description": "information variant of cell"
                }
              ]
            },
            {
              "class": "fd-table__row",
              "description": "row element",
              "modifiers": [
                {
                  "class": "fd-table__row--hoverable",
                  "description": "hoverable variant of row"
                },
                {
                  "class": "fd-table__row--secondary",
                  "description": "secondary variant of row"
                },
                {
                  "class": "fd-table__row--activable",
                  "description": "activable variant of row"
                },
                {
                  "class": "fd-table__row--focusable",
                  "description": "focusable variant of row"
                },
                {
                  "class": "fd-table__row--main",
                  "description": "main variant of row"
                }
              ]
            },
            {
              "class": "fd-table__header",
              "description": "header element",
              "modifiers": [
                {
                  "class": "fd-table__header--non-interactive",
                  "description": "non-interactive variant of header"
                }
              ]
            },
            {
              "class": "fd-table__body",
              "description": "body element",
              "modifiers": [
                {
                  "class": "fd-table__body--no-horizontal-borders",
                  "description": "no-horizontal-borders variant of body"
                },
                {
                  "class": "fd-table__body--no-vertical-borders",
                  "description": "no-vertical-borders variant of body"
                }
              ]
            },
            {
              "class": "fd-table__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-table__text",
              "description": "text element",
              "modifiers": [
                {
                  "class": "fd-table__text--no-wrap",
                  "description": "no-wrap variant of text"
                },
                {
                  "class": "fd-table__text--title",
                  "description": "title variant of text"
                }
              ]
            },
            {
              "class": "fd-table__icon",
              "description": "icon element",
              "modifiers": [
                {
                  "class": "fd-table__icon--navigation",
                  "description": "navigation variant of icon"
                }
              ]
            },
            {
              "class": "fd-table__inner",
              "description": "inner element",
              "modifiers": []
            },
            {
              "class": "fd-table__column-header-icons",
              "description": "column-header-icons element",
              "modifiers": []
            },
            {
              "class": "fd-table__caption",
              "description": "caption element",
              "modifiers": []
            },
            {
              "class": "fd-table__item--clickable",
              "description": "item--clickable element",
              "modifiers": []
            },
            {
              "class": "fd-table__popover",
              "description": "popover element",
              "modifiers": []
            },
            {
              "class": "fd-table__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-table__item--clickable",
                  "description": "clickable variant of item"
                }
              ]
            },
            {
              "class": "fd-table__expand",
              "description": "expand element",
              "modifiers": [
                {
                  "class": "fd-table__expand--open",
                  "description": "open variant of expand"
                }
              ]
            },
            {
              "class": "fd-table__cell--status-indicator",
              "description": "cell--status-indicator element",
              "modifiers": [
                {
                  "class": "fd-table__cell--status-indicator--valid",
                  "description": "valid variant of cell--status-indicator"
                },
                {
                  "class": "fd-table__cell--status-indicator--warning",
                  "description": "warning variant of cell--status-indicator"
                },
                {
                  "class": "fd-table__cell--status-indicator--error",
                  "description": "error variant of cell--status-indicator"
                },
                {
                  "class": "fd-table__cell--status-indicator--information",
                  "description": "information variant of cell--status-indicator"
                }
              ]
            }
          ],
          "accessibility": {
            "role": "table",
            "ariaAttributes": [
              "aria-label",
              "aria-describedby"
            ],
            "semanticHtml": true
          },
          "relatedComponents": [
            "list",
            "grid-list",
            "tree",
            "pagination",
            "toolbar"
          ],
          "dependencies": [],
          "tags": [],
          "variables": [
            "--fdTable_Header_Cell_Height",
            "--fdTable_Cell_Height",
            "--fdTable_Border_Radius",
            "--fdTable_Header_Horizontal_Border",
            "--fdTable_Header_Cell_Hover_Background",
            "--fdTable_Header_Cell_Hover_Active_Color",
            "--fdTable_Header_Cell_Active_Background",
            "--fdTable_Cell_Horizontal_Border_Style",
            "--fdTable_Cell_Vertical_Border_Style",
            "--fdTable_Hover_Down_Color",
            "--fdTable_Condensed_Focus_Outline_Offset",
            "--fdTable_Group_Header_Background"
          ],
          "examples": [
            "advanced-toolbar",
            "borderless",
            "borderlessbody",
            "checkbox",
            "condensed-checkbox",
            "condensed-footer",
            "contextual-menu",
            "fix-column-header",
            "focusable-cells",
            "focusable-rows",
            "footer",
            "grid-table",
            "group-rows-in-table",
            "interactive",
            "menu-header",
            "nav-icon",
            "nav-indicators",
            "no-data-table",
            "no-outer-border",
            "pagination",
            "primary",
            "responsive-table-pop-in-mode",
            "responsive-table",
            "semantic-rows",
            "tree-rows-table"
          ]
        },
        {
          "id": "tabs",
          "name": "Tabs",
          "description": "Tabs component",
          "baseClass": "fd-tabs__process",
          "cssImport": "fundamental-styles/dist/tabs.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-tabs",
          "modifiers": [
            {
              "class": "fd-tabs__process--error",
              "description": "error variant"
            },
            {
              "class": "fd-tabs__process--warning",
              "description": "warning variant"
            },
            {
              "class": "fd-tabs__process--success",
              "description": "success variant"
            },
            {
              "class": "fd-tabs__process--information",
              "description": "information variant"
            },
            {
              "class": "fd-tabs__process--neutral",
              "description": "neutral variant"
            },
            {
              "class": "fd-tabs__process--icon-only",
              "description": "icon-only variant"
            },
            {
              "class": "fd-tabs__process--process",
              "description": "process variant"
            },
            {
              "class": "fd-tabs__process--filter",
              "description": "filter variant"
            },
            {
              "class": "fd-tabs__process--header",
              "description": "header variant"
            },
            {
              "class": "fd-tabs__process--s",
              "description": "s variant"
            },
            {
              "class": "fd-tabs__process--m",
              "description": "m variant"
            },
            {
              "class": "fd-tabs__process--l",
              "description": "l variant"
            },
            {
              "class": "fd-tabs__process--xl",
              "description": "xl variant"
            },
            {
              "class": "fd-tabs__process--xxl",
              "description": "xxl variant"
            }
          ],
          "elements": [
            {
              "class": "fd-tabs__process__count",
              "description": "count element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__link",
              "description": "link element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__tag",
              "description": "tag element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__panel",
              "description": "panel element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__counter-header",
              "description": "counter-header element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__overflow",
              "description": "overflow element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__process-icon",
              "description": "process-icon element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-tabs__process__header",
              "description": "header element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdIcon_Tab_Bar_Selection_Bar_Height",
            "--fdTabs_Icon_Size",
            "--fdTabs_Icon_Selection_Height",
            "--fdTabs_Label_Padding_Bottom",
            "--fdTabs_Filter_Link_Height",
            "--fdIcon_Tab_Bar_Selection_Bar_Color",
            "--fdIcon_Tab_Bar_Selection_Color",
            "--fdIcon_Tab_Bar_Icon_Border_Weight",
            "--fdIcon_Tab_Bar_Icon_Border_Color",
            "--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color"
          ],
          "tags": [],
          "examples": [],
          "category": "navigation",
          "subcategory": "tabs",
          "useCases": [
            "Same-page content sections",
            "Form step organization",
            "View switching",
            "Content categorization"
          ],
          "avoidWhen": [
            "App-level navigation (use side-nav)",
            "Tabs with counts/badges (use icon-tab-bar)",
            "Sequential steps (use wizard)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "icon-tab-bar",
            "side-nav",
            "wizard"
          ],
          "dependencies": []
        },
        {
          "id": "text",
          "name": "Text",
          "description": "The text component displays text inside a form, table, or any other content area.",
          "baseClass": "fd-text",
          "cssImport": "fundamental-styles/dist/text.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-text",
          "modifiers": [
            {
              "class": "fd-text--max-lines",
              "description": "max-lines variant"
            },
            {
              "class": "fd-text--pre-wrap",
              "description": "pre-wrap variant"
            },
            {
              "class": "fd-text--hyphenation",
              "description": "hyphenation variant"
            },
            {
              "class": "fd-text--more",
              "description": "more variant"
            },
            {
              "class": "fd-text--subline",
              "description": "subline variant"
            }
          ],
          "elements": [
            {
              "class": "fd-text__link",
              "description": "link element",
              "modifiers": [
                {
                  "class": "fd-text__link--more",
                  "description": "more variant of link"
                }
              ]
            },
            {
              "class": "fd-text__ai-highlight",
              "description": "ai-highlight element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdText_Selected_Background_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "default-example",
            "expand",
            "hyphenation",
            "max-lines",
            "whitespace"
          ],
          "category": "typography",
          "subcategory": null,
          "useCases": [
            "Body text display",
            "Paragraph content",
            "Description text",
            "General text content"
          ],
          "avoidWhen": [
            "Headings (use title)",
            "Code (use code)",
            "Links (use link)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "title",
            "code",
            "link"
          ],
          "dependencies": []
        },
        {
          "id": "textarea",
          "name": "Textarea",
          "category": "forms",
          "subcategory": "input",
          "description": "Multi-line text input for collecting long-form content",
          "baseClass": "fd-textarea",
          "cssImport": "fundamental-styles/dist/textarea.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-textarea",
          "useCases": [
            "Long-form text input",
            "Comments and descriptions",
            "Multi-line content",
            "Notes and feedback"
          ],
          "avoidWhen": [
            "Short text input (use input instead)"
          ],
          "modifiers": [
            {
              "class": "fd-textarea--ai",
              "description": "ai variant"
            }
          ],
          "accessibility": {
            "role": "textbox",
            "ariaAttributes": [
              "aria-label",
              "aria-describedby",
              "aria-required"
            ],
            "labelRequired": true
          },
          "relatedComponents": [
            "input",
            "form-item"
          ],
          "dependencies": [],
          "tags": [],
          "elements": [
            {
              "class": "fd-textarea__sr-only",
              "description": "sr-only element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdTextarea_Line_Height"
          ],
          "examples": []
        },
        {
          "id": "tile",
          "name": "Tile",
          "description": "Tile component",
          "baseClass": "fd-tile",
          "cssImport": "fundamental-styles/dist/tile.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-tile",
          "modifiers": [
            {
              "class": "fd-tile--2-col",
              "description": "2-col variant"
            },
            {
              "class": "fd-tile--double",
              "description": "double variant"
            },
            {
              "class": "fd-tile--s",
              "description": "s variant"
            },
            {
              "class": "fd-tile--kpi",
              "description": "kpi variant"
            },
            {
              "class": "fd-tile--launch",
              "description": "launch variant"
            },
            {
              "class": "fd-tile--feed",
              "description": "feed variant"
            },
            {
              "class": "fd-tile--slide",
              "description": "slide variant"
            },
            {
              "class": "fd-tile--pause",
              "description": "pause variant"
            },
            {
              "class": "fd-tile--active",
              "description": "active variant"
            },
            {
              "class": "fd-tile--action",
              "description": "action variant"
            },
            {
              "class": "fd-tile--list",
              "description": "list variant"
            },
            {
              "class": "fd-tile--line",
              "description": "line variant"
            }
          ],
          "elements": [
            {
              "class": "fd-tile__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-tile__content",
              "description": "content element",
              "modifiers": []
            },
            {
              "class": "fd-tile__footer",
              "description": "footer element",
              "modifiers": []
            },
            {
              "class": "fd-tile__header-content",
              "description": "header-content element",
              "modifiers": []
            },
            {
              "class": "fd-tile__section",
              "description": "section element",
              "modifiers": []
            },
            {
              "class": "fd-tile__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-tile__subtitle",
              "description": "subtitle element",
              "modifiers": []
            },
            {
              "class": "fd-tile__footer-text",
              "description": "footer-text element",
              "modifiers": []
            },
            {
              "class": "fd-tile__refresh",
              "description": "refresh element",
              "modifiers": []
            },
            {
              "class": "fd-tile__profile-img",
              "description": "profile-img element",
              "modifiers": []
            },
            {
              "class": "fd-tile__logo",
              "description": "logo element",
              "modifiers": []
            },
            {
              "class": "fd-tile__action-close",
              "description": "action-close element",
              "modifiers": []
            },
            {
              "class": "fd-tile__action-indicator",
              "description": "action-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-tile__overlay",
              "description": "overlay element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdSlide_Tile_Indicator_Dot_Size",
            "--fdSlide_Tile_Indicator_Ative_Dot_Size",
            "--fdSlide_Tile_Indicator_Dot_Spacing",
            "--fdGenericTileLineTileHeight",
            "--fdGenericTileLineTileMaxHeight",
            "--fdGenericTileLineHeight",
            "--fdGenericTileTitleHorizontalSpacing",
            "--fdTile_Border",
            "--fdTile_Hover_Border",
            "--fdTile_Hover_Box_Shadow",
            "--fdTile_Title_Font_Size",
            "--fdTile_Title_Font_Weight",
            "--fdSlide_Tile_Background_Color",
            "--fdSlide_Tile_Background_Opacity",
            "--fdSlide_Tile_Title_Font_Weight",
            "--fdSlide_Tile_Title_Color",
            "--fdSlide_Tile_Title_Text_Shadow",
            "--fdSlide_Tile_Indicator_Dot_Color",
            "--fdSlide_Tile_Indicator_Dot_Border",
            "--fdSlide_Tile_Indicator_Dot_Opacity",
            "--fdSlide_Tile_Indicator_Dot_Shadow",
            "--fdSlide_Tile_Indicator_Active_Dot_Color",
            "--fdSlide_Tile_Indicator_Active_Dot_Border",
            "--fdTile_Box_Shadow",
            "--fdTile_Background",
            "--fdButton_Focus_Border_Radius",
            "--fdButton_Outline_Contrast",
            "--fdButtonPrioritizedBorderColor"
          ],
          "tags": [],
          "examples": [],
          "category": "containers",
          "subcategory": null,
          "useCases": [
            "Dashboard tiles",
            "App launcher tiles",
            "KPI display tiles",
            "Quick access shortcuts"
          ],
          "avoidWhen": [
            "Rich content cards (use card)",
            "List items (use list)",
            "Image galleries (use grid-list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "card",
            "numeric-content"
          ],
          "dependencies": []
        },
        {
          "id": "time",
          "name": "Time",
          "description": "The time component is used to select a time value. It can be used to choose hours, minutes, seconds and/or a given period of the day. This component is rarely used alone and will likely be paired with the **Time Picker** pattern.",
          "baseClass": "fd-time",
          "cssImport": "fundamental-styles/dist/time.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-time",
          "modifiers": [
            {
              "class": "fd-time--active",
              "description": "active variant"
            },
            {
              "class": "fd-time--meridian",
              "description": "meridian variant"
            },
            {
              "class": "fd-time--current",
              "description": "current variant"
            },
            {
              "class": "fd-time--collapsed",
              "description": "collapsed variant"
            },
            {
              "class": "fd-time--hidden",
              "description": "hidden variant"
            },
            {
              "class": "fd-time--tablet",
              "description": "tablet variant"
            },
            {
              "class": "fd-time--scrollable",
              "description": "scrollable variant"
            }
          ],
          "elements": [
            {
              "class": "fd-time__col",
              "description": "col element",
              "modifiers": [
                {
                  "class": "fd-time__col--period",
                  "description": "period variant of col"
                }
              ]
            },
            {
              "class": "fd-time__current-indicator",
              "description": "current-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-time__wrapper",
              "description": "wrapper element",
              "modifiers": [
                {
                  "class": "fd-time__wrapper--active",
                  "description": "active variant of wrapper"
                },
                {
                  "class": "fd-time__wrapper--meridian",
                  "description": "meridian variant of wrapper"
                }
              ]
            },
            {
              "class": "fd-time__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-time__item--collapsed",
                  "description": "collapsed variant of item"
                }
              ]
            },
            {
              "class": "fd-time__unit",
              "description": "unit element",
              "modifiers": []
            },
            {
              "class": "fd-time__list",
              "description": "list element",
              "modifiers": []
            },
            {
              "class": "fd-time__slider-label",
              "description": "slider-label element",
              "modifiers": []
            },
            {
              "class": "fd-time__control",
              "description": "control element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdTime_Item_Height",
            "--fdTime_Dropdown_Padding",
            "--fdTime_Wrapper_Height",
            "--fdTime_Unit_Line_Height",
            "--fdTime_Text_Shadow"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "default-cozy-mode",
            "scrollable-mode",
            "tablet-mode"
          ],
          "category": "date-time",
          "subcategory": null,
          "useCases": [
            "Time picker component",
            "Time selection input",
            "Schedule time input",
            "Duration input"
          ],
          "avoidWhen": [
            "Date selection (use calendar)",
            "Date and time (use combined picker)",
            "Simple text time (use input)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "calendar",
            "timepicker"
          ],
          "dependencies": []
        },
        {
          "id": "timepicker",
          "name": "Timepicker",
          "description": "The time picker allows the user to select a localized time, based on the 12-hour syste or the 24-hour system. It can be used with touch, mouse, or keyboard input. <br> For more information visit <a href=\"https://experience.sap.com/fiori-design-web//time-picker/\" target=\"_blank\">Fiori Design Guidelines</a>",
          "baseClass": "fd-timepicker",
          "cssImport": "fundamental-styles/dist/timepicker.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-timepicker",
          "modifiers": [
            {
              "class": "fd-timepicker--inner",
              "description": "inner variant"
            },
            {
              "class": "fd-timepicker--hour",
              "description": "hour variant"
            },
            {
              "class": "fd-timepicker--selected",
              "description": "selected variant"
            },
            {
              "class": "fd-timepicker--hover",
              "description": "hover variant"
            },
            {
              "class": "fd-timepicker--invisible",
              "description": "invisible variant"
            }
          ],
          "elements": [
            {
              "class": "fd-timepicker__dropdown",
              "description": "dropdown element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__output",
              "description": "output element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__colon",
              "description": "colon element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__clock-container",
              "description": "clock-container element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__clock",
              "description": "clock element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__tick",
              "description": "tick element",
              "modifiers": []
            },
            {
              "class": "fd-timepicker__number",
              "description": "number element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdTimePickerElementSize",
            "--fdTimePickerClockFace",
            "--fdTimePickerTickWidth",
            "--fdTimePickerTickHeight",
            "--fdTimePickerTickMarginBlock",
            "--fdTimePickerTickMarginInline"
          ],
          "tags": [
            "f3",
            "theme"
          ],
          "examples": [
            "hours12-cozy",
            "hours24-cozy",
            "minutes-cozy",
            "mobile",
            "seconds-cozy"
          ],
          "category": "date-time",
          "subcategory": null,
          "useCases": [
            "Time input with picker",
            "Schedule time selection",
            "Time field with dropdown",
            "Time selection control"
          ],
          "avoidWhen": [
            "Inline time display (use time)",
            "Date and time (use combined component)",
            "Simple text time (use input)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "time",
            "calendar"
          ],
          "dependencies": []
        },
        {
          "id": "title-bar",
          "name": "Title Bar",
          "description": "Title Bar component",
          "baseClass": "fd-title-bar",
          "cssImport": "fundamental-styles/dist/title-bar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-title-bar",
          "modifiers": [],
          "elements": [
            {
              "class": "fd-title-bar__button-container",
              "description": "button-container element",
              "modifiers": []
            },
            {
              "class": "fd-title-bar__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-title-bar__title-container",
              "description": "title-container element",
              "modifiers": []
            },
            {
              "class": "fd-title-bar__title",
              "description": "title element",
              "modifiers": []
            },
            {
              "class": "fd-title-bar__subtitle",
              "description": "subtitle element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdTitleBar_Button_Container_Size"
          ],
          "tags": [],
          "examples": [],
          "category": "toolbars",
          "subcategory": null,
          "useCases": [
            "Panel title bar",
            "Section header bar",
            "Container header",
            "Titled content area header"
          ],
          "avoidWhen": [
            "Page headers (use bar or action-bar)",
            "Dialog headers (use bar)",
            "Simple titles (use title)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "bar",
            "action-bar",
            "title"
          ],
          "dependencies": []
        },
        {
          "id": "title",
          "name": "Title",
          "description": "A title component whose semantic level and visual appearance can be set separately, providing flexibility in design while adhering to accessibility best practices.",
          "baseClass": "fd-title",
          "cssImport": "fundamental-styles/dist/title.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-title",
          "modifiers": [
            {
              "class": "fd-title--h1",
              "description": "h1 variant"
            },
            {
              "class": "fd-title--h2",
              "description": "h2 variant"
            },
            {
              "class": "fd-title--h3",
              "description": "h3 variant"
            },
            {
              "class": "fd-title--h4",
              "description": "h4 variant"
            },
            {
              "class": "fd-title--h5",
              "description": "h5 variant"
            },
            {
              "class": "fd-title--h6",
              "description": "h6 variant"
            },
            {
              "class": "fd-title--wrap",
              "description": "wrap variant"
            },
            {
              "class": "fd-title--two-line-clamp",
              "description": "two-line-clamp variant"
            }
          ],
          "elements": [],
          "variables": [
            "--fdTitle_Font_Size",
            "--fdTitle_Color",
            "--fdTitle_Font_Family"
          ],
          "tags": [
            "f3"
          ],
          "examples": [
            "elision",
            "levels",
            "visual-level",
            "wrapping"
          ],
          "category": "typography",
          "subcategory": null,
          "useCases": [
            "Page headings",
            "Section titles",
            "Component headers",
            "Semantic headings (h1-h6)"
          ],
          "avoidWhen": [
            "Body text (use text)",
            "Bar titles (use bar with title)",
            "Form labels (use form-label)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "text",
            "title-bar"
          ],
          "dependencies": []
        },
        {
          "id": "token",
          "name": "Token",
          "description": "Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.",
          "baseClass": "fd-token",
          "cssImport": "fundamental-styles/dist/token.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-token",
          "modifiers": [
            {
              "class": "fd-token--disabled",
              "description": "disabled variant"
            },
            {
              "class": "fd-token--readonly",
              "description": "readonly variant"
            },
            {
              "class": "fd-token--display",
              "description": "display variant"
            },
            {
              "class": "fd-token--selected",
              "description": "selected variant"
            }
          ],
          "elements": [
            {
              "class": "fd-token__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-token__close",
              "description": "close element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdToken_Text_Color",
            "--fdToken_Padding_Inline",
            "--fdToken_ReadOnly_Padding_Inline",
            "--fdToken_Border",
            "--fdToken_Border_Color_Read_Only",
            "--fdToken_Background_Color",
            "--fdToken_Background_Color_Read_Only",
            "--fdToken_Height",
            "--fdToken_Min_Width",
            "--fdToken_Close_Color",
            "--fdToken_Close_Padding_Block",
            "--fdToken_Close_Padding_Inline",
            "--fdToken_Close_Width",
            "--fdToken_Outline_Offset",
            "--fdToken_Border_Radius",
            "--fdToken_Focus_Border_Radius",
            "--fdToken_Text_Shadow",
            "--fdToken_Background_Color_Hover",
            "--fdToken_Border_Color_Hover",
            "--fdToken_Outline_Offset_Compact",
            "--fdToken_Selected_Border",
            "--fdToken_Selected_Border_BottomStyle",
            "--fdToken_Selected_Font_Family",
            "--fdToken_Border_Color_Selected_Focus"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "primary"
          ],
          "category": "tags",
          "subcategory": null,
          "useCases": [
            "Selected filter display",
            "Removable tags",
            "Multi-select display",
            "Chip-style selections"
          ],
          "avoidWhen": [
            "Status labels (use info-label)",
            "Non-removable tags (use badge)",
            "Single selection (use select)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "tokenizer",
            "info-label",
            "badge"
          ],
          "dependencies": []
        },
        {
          "id": "tokenizer",
          "name": "Tokenizer",
          "description": "Tokenizer is a container that wraps multiple tokens. The Tokenizer is used either stand alone or within Input controls such as **MultiInput**.In cozy mode the user can swipe the tokens to the left or right.",
          "baseClass": "fd-tokenizer",
          "cssImport": "fundamental-styles/dist/tokenizer.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-tokenizer",
          "modifiers": [
            {
              "class": "fd-tokenizer--readonly",
              "description": "readonly variant"
            },
            {
              "class": "fd-tokenizer--display",
              "description": "display variant"
            },
            {
              "class": "fd-tokenizer--scrollable",
              "description": "scrollable variant"
            }
          ],
          "elements": [
            {
              "class": "fd-tokenizer__inner",
              "description": "inner element",
              "modifiers": []
            },
            {
              "class": "fd-tokenizer__indicator",
              "description": "indicator element",
              "modifiers": []
            },
            {
              "class": "fd-tokenizer__control",
              "description": "control element",
              "modifiers": []
            },
            {
              "class": "fd-tokenizer__body",
              "description": "body element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdTokenizer_Inner_Padding",
            "--fdTokenizer_Indicator_Color",
            "--fdInput_Field_Compact_Min_Width"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme"
          ],
          "examples": [
            "cozy-tokenizer",
            "scrollable-tokenizer"
          ],
          "category": "tags",
          "subcategory": null,
          "useCases": [
            "Multiple token container",
            "Multi-select input display",
            "Tag collection",
            "Selected items display"
          ],
          "avoidWhen": [
            "Single selection (use select)",
            "Simple list (use list)",
            "Editable tags (use input-group)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "token",
            "select",
            "input-group"
          ],
          "dependencies": []
        },
        {
          "id": "tool-header",
          "name": "Tool Header",
          "description": "Tool Header component",
          "baseClass": "fd-tool-header",
          "cssImport": "fundamental-styles/dist/tool-header.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-tool-header",
          "modifiers": [
            {
              "class": "fd-tool-header--menu",
              "description": "menu variant"
            },
            {
              "class": "fd-tool-header--center",
              "description": "center variant"
            },
            {
              "class": "fd-tool-header--actions",
              "description": "actions variant"
            },
            {
              "class": "fd-tool-header--hidden",
              "description": "hidden variant"
            },
            {
              "class": "fd-tool-header--compact",
              "description": "compact variant"
            }
          ],
          "elements": [
            {
              "class": "fd-tool-header__group",
              "description": "group element",
              "modifiers": []
            },
            {
              "class": "fd-tool-header__element",
              "description": "element element",
              "modifiers": []
            },
            {
              "class": "fd-tool-header__logo",
              "description": "logo element",
              "modifiers": []
            },
            {
              "class": "fd-tool-header__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-tool-header__product-name",
              "description": "product-name element",
              "modifiers": []
            },
            {
              "class": "fd-tool-header__second-title",
              "description": "second-title element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdToolHeader_Min_Height",
            "--fdToolHeader_Padding_Left",
            "--fdToolHeader_Padding_Right",
            "--fdToolHeader_Border_Color"
          ],
          "tags": [],
          "examples": [],
          "category": "toolbars",
          "subcategory": null,
          "useCases": [
            "Tool application header",
            "Compact app header",
            "Utility app header",
            "Secondary app header"
          ],
          "avoidWhen": [
            "Main app header (use shellbar)",
            "Page headers (use action-bar)",
            "Dialog headers (use bar)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "shellbar",
            "action-bar",
            "bar"
          ],
          "dependencies": []
        },
        {
          "id": "tool-layout",
          "name": "Tool Layout",
          "description": "Tool Layout component",
          "baseClass": "fd-tool-layout",
          "cssImport": "fundamental-styles/dist/tool-layout.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-tool-layout",
          "modifiers": [
            {
              "class": "fd-tool-layout--horizontal",
              "description": "horizontal variant"
            },
            {
              "class": "fd-tool-layout--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-tool-layout--list",
              "description": "list variant"
            },
            {
              "class": "fd-tool-layout--horizontal-navigation",
              "description": "horizontal-navigation variant"
            },
            {
              "class": "fd-tool-layout--tablet",
              "description": "tablet variant"
            },
            {
              "class": "fd-tool-layout--phone",
              "description": "phone variant"
            },
            {
              "class": "fd-tool-layout--sticky",
              "description": "sticky variant"
            }
          ],
          "elements": [
            {
              "class": "fd-tool-layout__container",
              "description": "container element",
              "modifiers": []
            },
            {
              "class": "fd-tool-layout__header-container",
              "description": "header-container element",
              "modifiers": []
            },
            {
              "class": "fd-tool-layout__navigation-container",
              "description": "navigation-container element",
              "modifiers": []
            },
            {
              "class": "fd-tool-layout__content-container",
              "description": "content-container element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdToolLayout_Gap",
            "--fdToolLayout_Padding_Block",
            "--fdToolLayout_Padding_Inline",
            "--fdToolLayout_Content_Container_Border_Radius",
            "--fdToolLayout_Content_Container_Background",
            "--fdToolLayout_Content_Container_BoxShadow",
            "--fdToolLayout_Background"
          ],
          "tags": [],
          "examples": [],
          "category": "layout",
          "subcategory": null,
          "useCases": [
            "Tool application layout",
            "Utility page structure",
            "Secondary app layout",
            "Tool-specific page container"
          ],
          "avoidWhen": [
            "Standard apps (use page)",
            "Complex layouts (use flexible-column-layout)",
            "Simple pages (use layout)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "page",
            "layout",
            "tool-header"
          ],
          "dependencies": []
        },
        {
          "id": "toolbar",
          "name": "Toolbar",
          "description": "The toolbar enables the user to change the UI or trigger an action. For example, the user can change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. This component is usually paired with buttons, which are always right-aligned.",
          "baseClass": "fd-toolbar",
          "cssImport": "fundamental-styles/dist/toolbar.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-toolbar",
          "modifiers": [
            {
              "class": "fd-toolbar--fixed",
              "description": "fixed variant"
            },
            {
              "class": "fd-toolbar--menu",
              "description": "menu variant"
            },
            {
              "class": "fd-toolbar--auto",
              "description": "auto variant"
            },
            {
              "class": "fd-toolbar--solid",
              "description": "solid variant"
            },
            {
              "class": "fd-toolbar--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-toolbar--clear",
              "description": "clear variant"
            },
            {
              "class": "fd-toolbar--ai",
              "description": "ai variant"
            },
            {
              "class": "fd-toolbar--title",
              "description": "title variant"
            },
            {
              "class": "fd-toolbar--info",
              "description": "info variant"
            },
            {
              "class": "fd-toolbar--active",
              "description": "active variant"
            },
            {
              "class": "fd-toolbar--fade-in",
              "description": "fade-in variant"
            },
            {
              "class": "fd-toolbar--fade-out",
              "description": "fade-out variant"
            },
            {
              "class": "fd-toolbar--title-bar",
              "description": "title-bar variant"
            }
          ],
          "elements": [
            {
              "class": "fd-toolbar__spacer",
              "description": "spacer element",
              "modifiers": [
                {
                  "class": "fd-toolbar__spacer--fixed",
                  "description": "fixed variant of spacer"
                }
              ]
            },
            {
              "class": "fd-toolbar__separator",
              "description": "separator element",
              "modifiers": []
            },
            {
              "class": "fd-toolbar__overflow",
              "description": "overflow element",
              "modifiers": []
            },
            {
              "class": "fd-toolbar__title",
              "description": "title element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdToolbar_Height",
            "--fdToolbar_Separator_Margin",
            "--fdToolbar_Padding_Left",
            "--fdToolbar_Padding_Right",
            "--fdToolbar_Separator_Height",
            "--fdToolbar_Overflow_Max_Width",
            "--fdToolbar_Separator_Width",
            "--fdToolbar_Info_Color",
            "--fdToolbar_Background",
            "--fdToolbar_Border_Bottom",
            "--fdToolbar_Border_Top",
            "--fdToolbar_Overflow_Padding_Block",
            "--fdToolbar_Overflow_Padding_Inline",
            "--fdTitle_Font_Size",
            "--fdTitle_Color",
            "--fdToolbar_Auto_Background",
            "--fdToolbar_Solid_Background",
            "--fdToolbar_Transparent_Background",
            "--fdToolbar_Info_Outline_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "design"
          ],
          "examples": [
            "alignment",
            "overflow",
            "primary",
            "separator",
            "types"
          ],
          "category": "toolbars",
          "subcategory": null,
          "useCases": [
            "Content area actions",
            "Table/list toolbar",
            "Formatting toolbar",
            "Action button container"
          ],
          "avoidWhen": [
            "Page header (use bar or action-bar)",
            "Dialog footer (use bar)",
            "App navigation (use shellbar)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "bar",
            "action-bar",
            "tool-header"
          ],
          "dependencies": []
        },
        {
          "id": "tree",
          "name": "Tree",
          "description": "Tree allows the user to display and work with a hierarchical set of items. Trees are mostly used in the master list for a master-detail scenario using the **Flexible Column Layout** and in **Popovers** or **Dialogs**. In certain use cases, they can also be used in the **Dynamic Page Layout**.",
          "baseClass": "fd-tree",
          "cssImport": "fundamental-styles/dist/tree.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-tree",
          "modifiers": [
            {
              "class": "fd-tree--active",
              "description": "active variant"
            },
            {
              "class": "fd-tree--wrap",
              "description": "wrap variant"
            },
            {
              "class": "fd-tree--navigation",
              "description": "navigation variant"
            },
            {
              "class": "fd-tree--error",
              "description": "error variant"
            },
            {
              "class": "fd-tree--warning",
              "description": "warning variant"
            },
            {
              "class": "fd-tree--success",
              "description": "success variant"
            },
            {
              "class": "fd-tree--no-border",
              "description": "no-border variant"
            },
            {
              "class": "fd-tree--no-data",
              "description": "no-data variant"
            },
            {
              "class": "fd-tree--independent-multi-selection",
              "description": "independent-multi-selection variant"
            }
          ],
          "elements": [
            {
              "class": "fd-tree__item",
              "description": "item element",
              "modifiers": []
            },
            {
              "class": "fd-tree__button",
              "description": "button element",
              "modifiers": []
            },
            {
              "class": "fd-tree__expander",
              "description": "expander element",
              "modifiers": []
            },
            {
              "class": "fd-tree__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-tree__content--wrap",
                  "description": "wrap variant of content"
                }
              ]
            },
            {
              "class": "fd-tree__icon",
              "description": "icon element",
              "modifiers": [
                {
                  "class": "fd-tree__icon--navigation",
                  "description": "navigation variant of icon"
                }
              ]
            },
            {
              "class": "fd-tree__text",
              "description": "text element",
              "modifiers": []
            },
            {
              "class": "fd-tree__item-container",
              "description": "item-container element",
              "modifiers": [
                {
                  "class": "fd-tree__item-container--active",
                  "description": "active variant of item-container"
                }
              ]
            }
          ],
          "variables": [
            "--fdTree_Button_Spacing",
            "--fdList_Button_Spacing",
            "--fdTree_Expander_Size",
            "--fdTree_Expander_Icon_Font_Size",
            "--fdTree_Item_Height",
            "--fdTree_Item_Font_Size",
            "--fdTree_Item_Wrap_Text_Line_Height",
            "--fdButton_Outline_Offset",
            "--fdTree_Item_Level_Spacing",
            "--fdTree_Item_Highlight_Color"
          ],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "examples": [
            "borderless",
            "highlight-indicators",
            "navigable",
            "primary",
            "selection",
            "tree-with-no-data"
          ],
          "category": "data-display",
          "subcategory": "hierarchical",
          "useCases": [
            "Hierarchical data display",
            "File/folder structures",
            "Organizational hierarchies",
            "Nested category navigation"
          ],
          "avoidWhen": [
            "Flat lists (use list)",
            "Tabular data (use table)",
            "Navigation menu (use side-nav)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "list",
            "table",
            "side-nav"
          ],
          "dependencies": []
        },
        {
          "id": "upload-collection",
          "name": "Upload Collection",
          "description": "The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP Fiori app. Typically, uploaded files appear in an Attachments tab. However, files can also be displayed elsewhere.",
          "baseClass": "fd-upload-collection",
          "cssImport": "fundamental-styles/dist/upload-collection.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-upload-collection",
          "modifiers": [
            {
              "class": "fd-upload-collection--interactive",
              "description": "interactive variant"
            },
            {
              "class": "fd-upload-collection--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-upload-collection--byline",
              "description": "byline variant"
            },
            {
              "class": "fd-upload-collection--2-col",
              "description": "2-col variant"
            },
            {
              "class": "fd-upload-collection--wrap",
              "description": "wrap variant"
            },
            {
              "class": "fd-upload-collection--more",
              "description": "more variant"
            }
          ],
          "elements": [
            {
              "class": "fd-upload-collection__thumbnail",
              "description": "thumbnail element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__button-group",
              "description": "button-group element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__title-container",
              "description": "title-container element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__description",
              "description": "description element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__status-group",
              "description": "status-group element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__extension",
              "description": "extension element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__text-separator",
              "description": "text-separator element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__form-item",
              "description": "form-item element",
              "modifiers": []
            },
            {
              "class": "fd-upload-collection__item",
              "description": "item element",
              "modifiers": [
                {
                  "class": "fd-upload-collection__item--interactive",
                  "description": "interactive variant of item"
                }
              ]
            }
          ],
          "variables": [],
          "tags": [
            "f3",
            "a11y",
            "theme",
            "development"
          ],
          "examples": [
            "edit",
            "no-data",
            "standard"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "Uploaded files list",
            "Attachment management",
            "Document collection",
            "File list with actions"
          ],
          "avoidWhen": [
            "Simple upload (use file-uploader)",
            "Image gallery (use grid-list)",
            "Generic list (use list)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "file-uploader",
            "list"
          ],
          "dependencies": []
        },
        {
          "id": "user-menu",
          "name": "User Menu",
          "description": "The User Menu is an integral part of the Shell Bar, accessible by clicking the avatar located at its far-right end. It provides user-specific options and remains available across all screens. In addition to standard options, the User Menu can include product-specific functionality.",
          "baseClass": "fd-user-menu",
          "cssImport": "fundamental-styles/dist/user-menu.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-user-menu",
          "modifiers": [
            {
              "class": "fd-user-menu--truncate",
              "description": "truncate variant"
            },
            {
              "class": "fd-user-menu--mobile",
              "description": "mobile variant"
            },
            {
              "class": "fd-user-menu--tool-header",
              "description": "tool-header variant"
            }
          ],
          "elements": [
            {
              "class": "fd-user-menu__body",
              "description": "body element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__header-container",
              "description": "header-container element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__subheader",
              "description": "subheader element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__user-name",
              "description": "user-name element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__user-info",
              "description": "user-info element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__user-role",
              "description": "user-role element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__subline",
              "description": "subline element",
              "modifiers": [
                {
                  "class": "fd-user-menu__subline--truncate",
                  "description": "truncate variant of subline"
                }
              ]
            },
            {
              "class": "fd-user-menu__content-container",
              "description": "content-container element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__navigation-submenu",
              "description": "navigation-submenu element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__navigation-submenu-wrapper",
              "description": "navigation-submenu-wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__popover-body",
              "description": "popover-body element",
              "modifiers": []
            },
            {
              "class": "fd-user-menu__footer",
              "description": "footer element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdBar_Shadow",
            "--fdPanel_Header_Border_Bottom_Left_Radius",
            "--fdPanel_Header_Border_Bottom_Right_Radius",
            "--fdUserMenu_User_Name_Font_Family",
            "--fdPanel_Margin_Bottom",
            "--fdMenu_Icon_Width",
            "--fdMenu_Link_Height",
            "--fdMenu_Item_Spacing_Left",
            "--fdMenu_Item_Spacing_Right",
            "--fdNavigation_Item_Title_Display"
          ],
          "tags": [
            "uxc"
          ],
          "examples": [
            "default",
            "mobile"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "User profile menu",
            "Account settings access",
            "Sign out option",
            "User-specific actions"
          ],
          "avoidWhen": [
            "App navigation (use product-switch)",
            "Generic menu (use menu)",
            "Settings page (use side-nav)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "shellbar",
            "menu",
            "avatar"
          ],
          "dependencies": []
        },
        {
          "id": "variant-management",
          "name": "Variant Management",
          "description": "Variants store filter settings which have been defined, for example, within the filter bar.",
          "baseClass": "fd-variant-management",
          "cssImport": "fundamental-styles/dist/variant-management.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-variant-management",
          "modifiers": [
            {
              "class": "fd-variant-management--object-header",
              "description": "object-header variant"
            },
            {
              "class": "fd-variant-management--snapped-object-header",
              "description": "snapped-object-header variant"
            },
            {
              "class": "fd-variant-management--table",
              "description": "table variant"
            },
            {
              "class": "fd-variant-management--custom",
              "description": "custom variant"
            },
            {
              "class": "fd-variant-management--active",
              "description": "active variant"
            }
          ],
          "elements": [
            {
              "class": "fd-variant-management__header",
              "description": "header element",
              "modifiers": []
            },
            {
              "class": "fd-variant-management__title",
              "description": "title element",
              "modifiers": [
                {
                  "class": "fd-variant-management__title--object-header",
                  "description": "object-header variant of title"
                },
                {
                  "class": "fd-variant-management__title--snapped-object-header",
                  "description": "snapped-object-header variant of title"
                },
                {
                  "class": "fd-variant-management__title--table",
                  "description": "table variant of title"
                }
              ]
            },
            {
              "class": "fd-variant-management__dirty-indicator",
              "description": "dirty-indicator element",
              "modifiers": [
                {
                  "class": "fd-variant-management__dirty-indicator--custom",
                  "description": "custom variant of dirty-indicator"
                }
              ]
            },
            {
              "class": "fd-variant-management__favourite-state",
              "description": "favourite-state element",
              "modifiers": []
            },
            {
              "class": "fd-variant-management__centered-checkbox",
              "description": "centered-checkbox element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdTitle_Color",
            "--fdVariantManagementHeadingColor",
            "--fdVariantManagementHeadingHoverColor",
            "--fdVariantManagementHeadingActiveColor",
            "--fdTitle_Font_Size",
            "--fdTitle_Font_Family"
          ],
          "tags": [
            "f3",
            "theme",
            "development"
          ],
          "examples": [
            "dirty-label",
            "sizes"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "Saved view management",
            "Filter variant selection",
            "Layout preferences",
            "Personalization options"
          ],
          "avoidWhen": [
            "Simple selection (use select)",
            "Settings (use settings component)",
            "One-time choices (use radio)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "select",
            "popover"
          ],
          "dependencies": []
        },
        {
          "id": "vertical-nav",
          "name": "Vertical Nav",
          "description": "Vertical Nav component",
          "baseClass": "fd-vertical-nav",
          "cssImport": "fundamental-styles/dist/vertical-nav.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-vertical-nav",
          "modifiers": [
            {
              "class": "fd-vertical-nav--overflow",
              "description": "overflow variant"
            },
            {
              "class": "fd-vertical-nav--condensed",
              "description": "condensed variant"
            },
            {
              "class": "fd-vertical-nav--expandable",
              "description": "expandable variant"
            },
            {
              "class": "fd-vertical-nav--first-level",
              "description": "first-level variant"
            },
            {
              "class": "fd-vertical-nav--second-level",
              "description": "second-level variant"
            }
          ],
          "elements": [
            {
              "class": "fd-vertical-nav__main-navigation",
              "description": "main-navigation element",
              "modifiers": []
            },
            {
              "class": "fd-vertical-nav__utility-section",
              "description": "utility-section element",
              "modifiers": []
            },
            {
              "class": "fd-vertical-nav__navigation-item",
              "description": "navigation-item element",
              "modifiers": [
                {
                  "class": "fd-vertical-nav__navigation-item--condensed",
                  "description": "condensed variant of navigation-item"
                }
              ]
            },
            {
              "class": "fd-vertical-nav__navigation-item--condensed",
              "description": "navigation-item--condensed element",
              "modifiers": []
            }
          ],
          "variables": [
            "--fdVerticalNav_Text_Shadow",
            "--fdVerticalNav_Item_Border_Top_Bottom",
            "--fdVerticalNavigation_Indicator_Spacing",
            "--fdVerticalNav_Item_Text_Spacing",
            "--fdVerticalNav_Item_Indicator_Top",
            "--fdVerticalNav_Item_Indicator_Height",
            "--fdVerticalNav_Item_Focus_Outline_Offset",
            "--fdVerticalNav_Item_Indicated_Outline_Offset",
            "--fdVerticalNav_Item_Expandable_Margin_Block",
            "--fdVerticalNav_Item_Expanded_Margin",
            "--fdVerticalNav_Item_Expanded_Border_Radius",
            "--fdVerticalNav_Item_Expanded_Box_Shadow",
            "--fdVerticalNav_Item_Expanded_Padding_Left",
            "--fdVerticalNav_Item_Text_No_Icon_Margin",
            "--fdVerticalNav_Item_Child_Text_Color",
            "--fdVerticalNav_Expanded_Item_Margin_Left",
            "--fdVerticalNav_Icon_Color"
          ],
          "tags": [],
          "examples": [],
          "category": "navigation",
          "subcategory": null,
          "useCases": [
            "Vertical navigation menu",
            "Side menu without collapse",
            "Simple vertical links",
            "Static navigation list"
          ],
          "avoidWhen": [
            "Collapsible navigation (use side-nav)",
            "Main app navigation (use side-nav with shellbar)",
            "Horizontal layout (use tabs)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "side-nav",
            "navigation-list"
          ],
          "dependencies": []
        },
        {
          "id": "wizard",
          "name": "Wizard",
          "description": "Wizard component",
          "baseClass": "fd-wizard",
          "cssImport": "fundamental-styles/dist/wizard.css",
          "storybookUrl": "https://sap.github.io/fundamental-styles/?path=/docs/components-wizard",
          "modifiers": [
            {
              "class": "fd-wizard--sm",
              "description": "sm variant"
            },
            {
              "class": "fd-wizard--md",
              "description": "md variant"
            },
            {
              "class": "fd-wizard--lg",
              "description": "lg variant"
            },
            {
              "class": "fd-wizard--xl",
              "description": "xl variant"
            },
            {
              "class": "fd-wizard--completed",
              "description": "completed variant"
            },
            {
              "class": "fd-wizard--current",
              "description": "current variant"
            },
            {
              "class": "fd-wizard--upcoming",
              "description": "upcoming variant"
            },
            {
              "class": "fd-wizard--no-label",
              "description": "no-label variant"
            },
            {
              "class": "fd-wizard--stacked-top",
              "description": "stacked-top variant"
            },
            {
              "class": "fd-wizard--stacked",
              "description": "stacked variant"
            },
            {
              "class": "fd-wizard--active",
              "description": "active variant"
            },
            {
              "class": "fd-wizard--optional",
              "description": "optional variant"
            },
            {
              "class": "fd-wizard--branching",
              "description": "branching variant"
            },
            {
              "class": "fd-wizard--solid",
              "description": "solid variant"
            },
            {
              "class": "fd-wizard--list",
              "description": "list variant"
            },
            {
              "class": "fd-wizard--transparent",
              "description": "transparent variant"
            },
            {
              "class": "fd-wizard--floating",
              "description": "floating variant"
            }
          ],
          "elements": [
            {
              "class": "fd-wizard__navigation",
              "description": "navigation element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__progress-bar",
              "description": "progress-bar element",
              "modifiers": [
                {
                  "class": "fd-wizard__progress-bar--md",
                  "description": "md variant of progress-bar"
                },
                {
                  "class": "fd-wizard__progress-bar--sm",
                  "description": "sm variant of progress-bar"
                },
                {
                  "class": "fd-wizard__progress-bar--xl",
                  "description": "xl variant of progress-bar"
                }
              ]
            },
            {
              "class": "fd-wizard__step-wrapper",
              "description": "step-wrapper element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__step",
              "description": "step element",
              "modifiers": [
                {
                  "class": "fd-wizard__step--completed",
                  "description": "completed variant of step"
                },
                {
                  "class": "fd-wizard__step--stacked",
                  "description": "stacked variant of step"
                },
                {
                  "class": "fd-wizard__step--upcoming",
                  "description": "upcoming variant of step"
                },
                {
                  "class": "fd-wizard__step--current",
                  "description": "current variant of step"
                },
                {
                  "class": "fd-wizard__step--stacked-top",
                  "description": "stacked-top variant of step"
                },
                {
                  "class": "fd-wizard__step--no-label",
                  "description": "no-label variant of step"
                }
              ]
            },
            {
              "class": "fd-wizard__step-container",
              "description": "step-container element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__step-indicator",
              "description": "step-indicator element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__icon",
              "description": "icon element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__label-container",
              "description": "label-container element",
              "modifiers": [
                {
                  "class": "fd-wizard__label-container--optional",
                  "description": "optional variant of label-container"
                }
              ]
            },
            {
              "class": "fd-wizard__label",
              "description": "label element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__optional-text",
              "description": "optional-text element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__connector",
              "description": "connector element",
              "modifiers": [
                {
                  "class": "fd-wizard__connector--active",
                  "description": "active variant of connector"
                },
                {
                  "class": "fd-wizard__connector--branching",
                  "description": "branching variant of connector"
                }
              ]
            },
            {
              "class": "fd-wizard__content",
              "description": "content element",
              "modifiers": [
                {
                  "class": "fd-wizard__content--list",
                  "description": "list variant of content"
                },
                {
                  "class": "fd-wizard__content--md",
                  "description": "md variant of content"
                },
                {
                  "class": "fd-wizard__content--sm",
                  "description": "sm variant of content"
                },
                {
                  "class": "fd-wizard__content--xl",
                  "description": "xl variant of content"
                }
              ]
            },
            {
              "class": "fd-wizard__step-content-container",
              "description": "step-content-container element",
              "modifiers": []
            },
            {
              "class": "fd-wizard__next-step",
              "description": "next-step element",
              "modifiers": [
                {
                  "class": "fd-wizard__next-step--floating",
                  "description": "floating variant of next-step"
                }
              ]
            }
          ],
          "variables": [
            "--fdWizard_Completed_Step_Label_Color",
            "--fdWizard_Completed_Step_Color",
            "--fdWizard_Completed_Step_Border",
            "--fdWizard_Completed_Step_Icon_Color",
            "--fdWizard_Current_Step_Label_Color",
            "--fdWizard_Current_Step_Border",
            "--fdWizard_Current_Step_Background_Color",
            "--fdWizard_Current_Step_Color",
            "--fdWizard_Current_Step_Icon_Color",
            "--fdWizard_Selection_Bar_Height",
            "--fdWizard_Selection_Bar_Background",
            "--fdWizard_Upcoming_Step_Color",
            "--fdWizard_Upcoming_Step_Icon_Color",
            "--fdWizard_Active_Step_Border_Color",
            "--fdWizard_Active_Step_Color",
            "--fdWizard_Active_Step_Icon_Color",
            "--fdWizard_Step_Indicator_Margin_Right",
            "--fdWizard_Label_Font_Family",
            "--fdWizard_Label_Font_Weight",
            "--fdWizard_Connector_Active_Border_Color",
            "--fdWizard_Content_Solid_Background",
            "--fdWizard_Content_List_Background",
            "--fdWizard_Content_Transparent_Background",
            "--fdWizard_Step_Content_Container_Spacing",
            "--fdWizard_Step_Content_Container_Background_Color"
          ],
          "tags": [
            "f3",
            "theme",
            "development"
          ],
          "examples": [
            "customized",
            "default-example",
            "mobile",
            "responsive",
            "reverted-steps"
          ],
          "category": "specialized",
          "subcategory": null,
          "useCases": [
            "Multi-step processes",
            "Guided workflows",
            "Setup wizards",
            "Sequential form completion"
          ],
          "avoidWhen": [
            "Non-sequential content (use tabs)",
            "Simple forms (use form-group)",
            "Single step (use dialog)"
          ],
          "accessibility": {
            "role": null,
            "ariaAttributes": []
          },
          "relatedComponents": [
            "tabs",
            "dialog",
            "progress-indicator"
          ],
          "dependencies": []
        }
      ]
    }
  },
  "componentCategories": {
    "toolbars": [
      "action-bar",
      "action-sheet",
      "bar",
      "title-bar",
      "tool-header",
      "toolbar"
    ],
    "ai-components": [
      "ai-busy-indicator",
      "ai-loading-bar",
      "ai-text",
      "ai-writing-assistant-versioning",
      "ai-writing-assistant",
      "prompt-input"
    ],
    "feedback": [
      "alert",
      "busy-indicator",
      "illustrated-message",
      "message-page",
      "message-strip",
      "message-toast",
      "notification",
      "progress-indicator",
      "skeleton",
      "status-indicator"
    ],
    "visual": [
      "avatar-group",
      "avatar",
      "badge",
      "counter",
      "icon",
      "info-label",
      "object-identifier",
      "object-number",
      "object-status"
    ],
    "navigation": [
      "breadcrumb",
      "horizontal-navigation",
      "icon-tab-bar",
      "navigation-list",
      "navigation-menu",
      "navigation",
      "pagination",
      "shellbar",
      "side-nav",
      "tabs",
      "vertical-nav"
    ],
    "buttons": [
      "button-split",
      "segmented-button"
    ],
    "interactive": [
      "button",
      "link",
      "menu"
    ],
    "date-time": [
      "calendar",
      "time",
      "timepicker"
    ],
    "containers": [
      "card",
      "facet",
      "page-footer",
      "page",
      "panel",
      "section",
      "tile"
    ],
    "specialized": [
      "carousel",
      "dynamic-page",
      "micro-process-flow",
      "product-switch",
      "settings",
      "upload-collection",
      "user-menu",
      "variant-management",
      "wizard"
    ],
    "forms": [
      "checkbox",
      "form-item",
      "form-label",
      "input",
      "radio",
      "select",
      "textarea"
    ],
    "typography": [
      "code",
      "text",
      "title"
    ],
    "overlays": [
      "dialog",
      "popover"
    ],
    "layout": [
      "dynamic-side-content",
      "fixed-card-layout",
      "flexible-column-layout",
      "layout-grid",
      "layout-panel",
      "layout",
      "resizable-card-layout",
      "splitter",
      "tool-layout"
    ],
    "social": [
      "feed-input",
      "feed-list"
    ],
    "form-layout": [
      "fieldset",
      "form-group",
      "form-header",
      "form-layout-grid",
      "form-message"
    ],
    "form-inputs": [
      "file-uploader",
      "input-group",
      "rating-indicator",
      "search-field",
      "slider",
      "step-input",
      "switch"
    ],
    "tags": [
      "generic-tag",
      "object-marker",
      "token",
      "tokenizer"
    ],
    "data-display": [
      "grid-list",
      "list",
      "object-list",
      "table",
      "tree"
    ],
    "utilities": [
      "helpers",
      "margins",
      "off-screen",
      "paddings",
      "scrollbar"
    ],
    "dialogs": [
      "message-box",
      "message-popover",
      "quick-view"
    ],
    "business-objects": [
      "numeric-content",
      "object-attribute"
    ]
  },
  "selectionGuide": {
    "action": "button",
    "navigation": "link",
    "short-text": "input",
    "long-text": "textarea"
  }
}