afv-library/skills/generating-lwc-components/references/slds-blueprints.json

{
    "blueprints": [
        {
            "name": "Accordion",
            "description": "A vertically stacked list of items where only one item is shown at a time. When a new item is clicked, it expands to reveal its content and the previously open item closes. Each accordion consists of multiple sections with collapsible content areas and clickable headers.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-accordion",
                "elements": [
                    {
                        "class": "slds-accordion__list-item",
                        "description": "Container for each accordion section",
                        "purpose": "Wraps individual accordion items"
                    },
                    {
                        "class": "slds-accordion__section",
                        "description": "Individual section within the accordion",
                        "purpose": "Contains a single collapsible section with header and content"
                    },
                    {
                        "class": "slds-accordion__summary",
                        "description": "Clickable header area for each accordion section",
                        "purpose": "Contains the accordion toggle button and summary content"
                    },
                    {
                        "class": "slds-accordion__summary-heading",
                        "description": "Heading container within the summary",
                        "purpose": "Contains the text heading for the accordion section"
                    },
                    {
                        "class": "slds-accordion__summary-content",
                        "description": "Content area within the summary",
                        "purpose": "Contains the section title and description"
                    },
                    {
                        "class": "slds-accordion__summary-action",
                        "description": "Action area within the summary",
                        "purpose": "Contains buttons or interactive elements in the summary"
                    },
                    {
                        "class": "slds-accordion__summary-action-icon",
                        "description": "Icon for expand/collapse action",
                        "purpose": "Visual indicator for section state and interaction"
                    },
                    {
                        "class": "slds-accordion__content",
                        "description": "Collapsible content area of each accordion section",
                        "purpose": "Contains the main content that expands/collapses"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-is-open",
                        "description": "Applied to accordion section when expanded",
                        "usage": "Toggle on/off to control accordion section state"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Expanded state for accordion sections",
                        "trigger": "User interaction with summary button"
                    },
                    {
                        "class": "slds-is-closed",
                        "description": "Collapsed section state",
                        "trigger": "Applied when accordion section is collapsed"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard accordion with expandable sections",
                    "classes": [
                        "slds-accordion"
                    ],
                    "usage_context": "Default implementation for collapsible content sections",
                    "differences": "Single accordion with multiple collapsible sections"
                }
            ],
            "lightning_component": {
                "name": "lightning-accordion",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS accordion blueprint. Individual sections map to lightning-accordion-section components."
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between accordion sections",
                    "Enter/Space to expand/collapse sections",
                    "Arrow keys may be used for section navigation",
                    "Focus management within expanded content"
                ],
                "screen_reader": [
                    "Announces section state (expanded/collapsed)",
                    "Provides context about accordion content",
                    "Section purpose and state announced",
                    "Expansion state changes communicated",
                    "Content structure properly conveyed"
                ],
                "aria_attributes": [
                    "aria-expanded on summary elements",
                    "aria-controls linking summary to content",
                    "role='button' on interactive summary elements",
                    "aria-labelledby for content labeling",
                    "role='region' for content areas"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When you have multiple sections of content that users might not need to see all at once",
                    "To save vertical space on a page",
                    "For FAQ sections or help documentation",
                    "When content can be logically grouped into sections",
                    "For organizing related content that can be shown/hidden",
                    "When content hierarchy needs progressive disclosure"
                ],
                "when_not_to_use": [
                    "When all content should be visible simultaneously",
                    "For navigation menus (use navigation components instead)",
                    "When sections are very small and wouldn't benefit from collapsing",
                    "For unrelated content groupings"
                ],
                "best_practices": [
                    "Use clear, descriptive headings for each section",
                    "Keep section headings concise",
                    "Ensure content within sections is meaningful when collapsed",
                    "Provide visual indicators for expanded/collapsed states",
                    "Group related content logically",
                    "Provide meaningful content in each section",
                    "Consider default expanded/collapsed states",
                    "Maintain consistent section behavior"
                ],
                "common_mistakes": [
                    "Making section headings too vague",
                    "Overusing accordions where tabbed interfaces would be better",
                    "Not providing proper ARIA attributes for accessibility",
                    "Using unclear or generic section titles",
                    "Putting too much content in individual sections",
                    "Inconsistent section behavior",
                    "Poor content organization within sections"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Accordion",
                    "description": "Standard accordion with single section",
                    "code": "<div class=\"slds-accordion\">\n      <section class=\"slds-accordion__list-item\">\n        <div class=\"slds-accordion__summary\" id=\"accordion-summary-01\">\n          <h3 class=\"slds-accordion__summary-heading\">\n            <button class=\"slds-button slds-button_reset slds-accordion__summary-action\" aria-controls=\"accordion-content-01\" aria-expanded=\"true\">\n              <span class=\"slds-accordion__summary-content\">Accordion summary</span>\n            </button>\n          </h3>\n        </div>\n        <div class=\"slds-accordion__content slds-is-open\" id=\"accordion-content-01\">\n          <p>Accordion content</p>\n        </div>\n      </section>\n      </div>\n"
                },
                {
                    "title": "Multi-Section Accordion",
                    "description": "Complete accordion with multiple expandable sections",
                    "code": "<div class=\"slds-accordion\">\n      <section class=\"slds-accordion__section slds-is-open\">\n        <div class=\"slds-accordion__summary\">\n          <h3 class=\"slds-accordion__summary-heading\">\n            <button class=\"slds-accordion__summary-action slds-button slds-button_reset\" aria-controls=\"accordion-details-01\" aria-expanded=\"true\">\n              <svg class=\"slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#switch\"></use>\n              </svg>\n              <span class=\"slds-accordion__summary-content\">\n                Getting Started\n              </span>\n            </button>\n          </h3>\n        </div>\n        <div class=\"slds-accordion__content\" id=\"accordion-details-01\">\n          <p>This section contains information about getting started with our platform. You'll find step-by-step instructions, helpful tips, and links to additional resources.</p>\n          <ul class=\"slds-list_dotted\">\n            <li>Create your account</li>\n            <li>Complete your profile</li>\n            <li>Explore the dashboard</li>\n            <li>Take the guided tour</li>\n          </ul>\n        </div>\n      </section>\n      <section class=\"slds-accordion__section slds-is-closed\">\n        <div class=\"slds-accordion__summary\">\n          <h3 class=\"slds-accordion__summary-heading\">\n            <button class=\"slds-accordion__summary-action slds-button slds-button_reset\" aria-controls=\"accordion-details-02\" aria-expanded=\"false\">\n              <svg class=\"slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#switch\"></use>\n              </svg>\n              <span class=\"slds-accordion__summary-content\">\n                Advanced Features\n              </span>\n            </button>\n          </h3>\n        </div>\n        <div class=\"slds-accordion__content slds-hide\" id=\"accordion-details-02\">\n          <p>Learn about our advanced features and how to use them effectively in your workflow.</p>\n        </div>\n      </section>\n      <section class=\"slds-accordion__section slds-is-open\">\n        <div class=\"slds-accordion__summary\">\n          <h3 class=\"slds-accordion__summary-heading\">\n            <button class=\"slds-accordion__summary-action slds-button slds-button_reset\" aria-controls=\"accordion-details-03\" aria-expanded=\"true\">\n              <svg class=\"slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#switch\"></use>\n              </svg>\n              <span class=\"slds-accordion__summary-content\">\n                Account Settings\n              </span>\n            </button>\n          </h3>\n        </div>\n        <div class=\"slds-accordion__content\" id=\"accordion-details-03\">\n          <div class=\"slds-grid slds-wrap\">\n            <div class=\"slds-col slds-size_1-of-1 slds-medium-size_1-of-2\">\n              <h4 class=\"slds-text-heading_small slds-m-bottom_small\">Profile Information</h4>\n              <ul class=\"slds-list_vertical\">\n                <li class=\"slds-list__item\">Update your name and contact details</li>\n                <li class=\"slds-list__item\">Change your profile picture</li>\n                <li class=\"slds-list__item\">Manage privacy settings</li>\n              </ul>\n            </div>\n            <div class=\"slds-col slds-size_1-of-1 slds-medium-size_1-of-2\">\n              <h4 class=\"slds-text-heading_small slds-m-bottom_small\">Security</h4>\n              <ul class=\"slds-list_vertical\">\n                <li class=\"slds-list__item\">Change your password</li>\n                <li class=\"slds-list__item\">Enable two-factor authentication</li>\n                <li class=\"slds-list__item\">Review login activity</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </section>\n      </div>\n"
                },
                {
                    "title": "FAQ Accordion",
                    "description": "Accordion optimized for frequently asked questions",
                    "code": "<div class=\"slds-accordion\">\n      <section class=\"slds-accordion__section slds-is-closed\">\n        <div class=\"slds-accordion__summary\">\n          <h3 class=\"slds-accordion__summary-heading\">\n            <button class=\"slds-accordion__summary-action slds-button slds-button_reset\" aria-controls=\"faq-01\" aria-expanded=\"false\">\n              <svg class=\"slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#switch\"></use>\n              </svg>\n              <span class=\"slds-accordion__summary-content\">\n                How do I reset my password?\n              </span>\n            </button>\n          </h3>\n        </div>\n        <div class=\"slds-accordion__content slds-hide\" id=\"faq-01\">\n          <p>To reset your password:</p>\n          <ol class=\"slds-list_ordered\">\n            <li>Click the \"Forgot Password\" link on the login page</li>\n            <li>Enter your email address</li>\n            <li>Check your email for reset instructions</li>\n            <li>Follow the link and create a new password</li>\n          </ol>\n        </div>\n      </section>\n      <section class=\"slds-accordion__section slds-is-closed\">\n        <div class=\"slds-accordion__summary\">\n          <h3 class=\"slds-accordion__summary-heading\">\n            <button class=\"slds-accordion__summary-action slds-button slds-button_reset\" aria-controls=\"faq-02\" aria-expanded=\"false\">\n              <svg class=\"slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#switch\"></use>\n              </svg>\n              <span class=\"slds-accordion__summary-content\">\n                Where can I find my billing information?\n              </span>\n            </button>\n          </h3>\n        </div>\n        <div class=\"slds-accordion__content slds-hide\" id=\"faq-02\">\n          <p>Your billing information can be found in the Account Settings section under \"Billing & Payments\". From there you can:</p>\n          <ul class=\"slds-list_dotted\">\n            <li>View current charges</li>\n            <li>Download invoices</li>\n            <li>Update payment methods</li>\n            <li>Change billing addresses</li>\n          </ul>\n        </div>\n      </section>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-accordion-heading-color",
                    "description": "Text color for accordion headings",
                    "category": "color"
                },
                {
                    "name": "--slds-c-accordion-heading-font-size",
                    "description": "Font size for accordion headings",
                    "category": "typography"
                },
                {
                    "name": "--slds-c-accordion-section-color-border",
                    "description": "Border color for accordion sections",
                    "category": "color"
                },
                {
                    "name": "--slds-c-accordion-section-sizing-border",
                    "description": "Border width for accordion sections",
                    "category": "sizing"
                },
                {
                    "name": "--slds-c-accordion-section-spacing-block-end",
                    "description": "Bottom spacing for accordion sections",
                    "category": "spacing"
                },
                {
                    "name": "--slds-c-accordion-section-spacing-block-start",
                    "description": "Top spacing for accordion sections",
                    "category": "spacing"
                },
                {
                    "name": "--slds-c-accordion-section-spacing-inline-end",
                    "description": "Right spacing for accordion sections",
                    "category": "spacing"
                },
                {
                    "name": "--slds-c-accordion-section-spacing-inline-start",
                    "description": "Left spacing for accordion sections",
                    "category": "spacing"
                },
                {
                    "name": "--slds-c-accordion-summary-color-background",
                    "description": "Background color for accordion summary",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "accordion.css",
                    "button.css"
                ],
                "javascript": [
                    "accordion.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Expandable Section",
                    "relationship": "similar",
                    "description": "Single expandable section, simpler alternative"
                },
                {
                    "name": "Tabs",
                    "relationship": "alternative",
                    "description": "Alternative for organizing content sections"
                },
                {
                    "name": "Summary Detail",
                    "relationship": "similar",
                    "description": "Similar progressive disclosure pattern"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/accordion/"
            },
            "metadata": {
                "version": "2.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "merge_notes": "Merged accordion-section.yaml into unified accordion blueprint for SLDS architectural accuracy",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Activity Timeline",
            "description": "A visual representation of events arranged in chronological order, used to display a sequence of activities or milestones with associated metadata.",
            "category": "Display",
            "slds_classes": {
                "root": "",
                "elements": [
                    {
                        "class": "slds-timeline__date",
                        "description": "Date/time display for timeline item",
                        "purpose": "Shows when the timeline event occurred"
                    },
                    {
                        "class": "slds-timeline__actions",
                        "description": "Actions container for timeline item",
                        "purpose": "Contains interactive elements like buttons or links"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard activity timeline with chronological events",
                    "classes": [],
                    "usage_context": "Default implementation for showing activity history",
                    "differences": "Vertical timeline with media objects for each event"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - SLDS-only pattern"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through interactive elements",
                    "Focus management for embedded actions"
                ],
                "screen_reader": [
                    "Chronological order conveyed through markup structure",
                    "Event details properly associated with headings",
                    "Time/date information announced with events"
                ],
                "aria_attributes": [
                    "aria-labelledby for timeline item titles",
                    "role='list' and role='listitem' for semantic structure",
                    "aria-describedby for additional event details"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To display chronological sequence of events or activities",
                    "For showing audit trails or activity logs",
                    "When temporal relationship between events is important",
                    "To provide historical context for records or objects"
                ],
                "when_not_to_use": [
                    "For non-chronological lists (use regular lists instead)",
                    "When temporal order is not relevant",
                    "For simple status updates (use feeds instead)",
                    "When space is extremely constrained"
                ],
                "best_practices": [
                    "Order events chronologically (newest first or oldest first consistently)",
                    "Use meaningful icons to categorize different event types",
                    "Keep event descriptions concise but informative",
                    "Include relevant timestamps",
                    "Group related events when appropriate"
                ],
                "common_mistakes": [
                    "Mixing chronological orders inconsistently",
                    "Using unclear or non-descriptive event labels",
                    "Omitting important temporal information",
                    "Making timeline items too dense with information"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Timeline Item",
                    "code": "<div class=\"\">\n      <div class=\"\">\n        <span class=\"\">\n          <span class=\"\">\n            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#email\"></use>\n            </svg>\n          </span>\n          <div class=\"\">\n            <h3 class=\"\">Email sent</h3>\n            <p class=\"slds-timeline__date\">Today at 2:30 PM</p>\n            <div class=\"\">\n              <p>Follow-up email sent to customer regarding their inquiry.</p>\n            </div>\n          </div>\n        </span>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "timeline.css",
                    "media-objects.css"
                ],
                "javascript": [],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "media-objects",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Feeds",
                    "relationship": "alternative",
                    "description": "Alternative for activity streams with less temporal emphasis"
                },
                {
                    "name": "Path",
                    "relationship": "similar",
                    "description": "Similar concept for process progression"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/activity-timeline/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Alert",
            "description": "A banner component used to communicate a state that affects the entire application or page, not a specific feature or task.",
            "category": "Feedback",
            "slds_classes": {
                "root": "",
                "elements": [],
                "modifiers": [
                    {
                        "class": "slds-alert_warning",
                        "description": "Warning alert variant",
                        "usage": "Use for warnings that need user attention"
                    },
                    {
                        "class": "slds-alert_error",
                        "description": "Error alert variant",
                        "usage": "Use for error messages that require immediate attention"
                    },
                    {
                        "class": "slds-alert_offline",
                        "description": "Offline state alert variant",
                        "usage": "Use specifically for offline connectivity messages"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard alert with different severity levels",
                    "classes": [
                        "slds-alert_warning",
                        "slds-alert_error"
                    ],
                    "usage_context": "Page-level or application-level notifications",
                    "differences": "Different colors and icons based on message type"
                }
            ],
            "lightning_component": {
                "name": "lightning-alert",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-alert",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS alert blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "No specific keyboard interactions required",
                    "Focus management handled by parent context"
                ],
                "screen_reader": [
                    "Alert role automatically announced by screen readers",
                    "Icon meaning conveyed through appropriate aria-label",
                    "Alert text read immediately when displayed"
                ],
                "aria_attributes": [
                    "role='alert' for immediate announcements",
                    "aria-label on icons to convey meaning",
                    "aria-live='polite' or 'assertive' based on severity"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For system-wide messages that affect the entire application",
                    "To communicate global state changes",
                    "For critical information that users must be aware of",
                    "When the message applies to the entire page or workflow"
                ],
                "when_not_to_use": [
                    "For feature-specific messages (use toast instead)",
                    "For field-level validation (use field-level help)",
                    "For temporary notifications (use toast instead)",
                    "For success confirmations of user actions (use toast)"
                ],
                "best_practices": [
                    "Use appropriate severity levels (info, warning, error)",
                    "Keep alert messages concise and actionable",
                    "Place alerts at the top of the content area",
                    "Provide clear next steps when appropriate",
                    "Don't stack multiple alerts unless absolutely necessary"
                ],
                "common_mistakes": [
                    "Overusing alerts for non-critical information",
                    "Using wrong alert type for the message content",
                    "Making alert messages too long or complex",
                    "Not providing actionable information in critical alerts"
                ]
            },
            "code_examples": [
                {
                    "title": "Info Alert",
                    "code": "<div class=\"\" role=\"alert\">\n      <span class=\"\">\n        <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#info\"></use>\n        </svg>\n      </span>\n      <span class=\"\">Base System Alert</span>\n      </div>\n"
                },
                {
                    "title": "Warning Alert",
                    "code": "<div class=\"slds-alert_warning\" role=\"alert\">\n      <span class=\"\">\n        <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#warning\"></use>\n        </svg>\n      </span>\n      <span class=\"\">Your session will expire in 10 minutes.</span>\n      </div>\n"
                },
                {
                    "title": "Error Alert",
                    "code": "<div class=\"slds-alert_error\" role=\"alert\">\n      <span class=\"\">\n        <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n        </svg>\n      </span>\n      <span class=\"\">System maintenance is currently in progress.</span>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "alert.css"
                ],
                "javascript": [],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Toast",
                    "relationship": "alternative",
                    "description": "For temporary, action-specific notifications"
                },
                {
                    "name": "Notifications",
                    "relationship": "similar",
                    "description": "Similar notification patterns for different contexts"
                },
                {
                    "name": "Prompt",
                    "relationship": "alternative",
                    "description": "Modal dialogs for critical alerts requiring action"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/alert/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "App Launcher",
            "description": "A grid-based interface that allows users to discover and navigate to different applications, typically accessed through a waffle menu or launcher button.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-app-launcher",
                "elements": [
                    {
                        "class": "slds-app-launcher__content",
                        "description": "Main content area of the app launcher",
                        "purpose": "Contains the application grid and navigation sections"
                    },
                    {
                        "class": "slds-app-launcher__tile",
                        "description": "Individual application tile",
                        "purpose": "Represents a single application with icon and label"
                    },
                    {
                        "class": "slds-app-launcher__tile-figure",
                        "description": "Icon container within application tile",
                        "purpose": "Holds the application icon or image"
                    },
                    {
                        "class": "slds-app-launcher__tile-body",
                        "description": "Content area within application tile",
                        "purpose": "Contains application name and description"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard app launcher with application grid",
                    "classes": [
                        "slds-app-launcher"
                    ],
                    "usage_context": "Default implementation for application navigation",
                    "differences": "Grid-based layout with application tiles and sections"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented as custom component"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through application tiles",
                    "Enter/Space to activate application tiles",
                    "Arrow keys for grid navigation"
                ],
                "screen_reader": [
                    "Application names and descriptions announced",
                    "Grid layout conveyed to assistive technologies"
                ],
                "aria_attributes": [
                    "role='grid' for the application layout",
                    "role='gridcell' for individual application tiles",
                    "aria-label for application tiles"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To provide access to multiple applications or modules",
                    "When users need to switch between different tools",
                    "For discovery of available applications"
                ],
                "when_not_to_use": [
                    "For small numbers of applications",
                    "When applications are contextually related",
                    "For single-application interfaces"
                ],
                "best_practices": [
                    "Use meaningful icons for applications",
                    "Keep application names concise",
                    "Group related applications logically",
                    "Provide search for large numbers of apps"
                ],
                "common_mistakes": [
                    "Using unclear icons",
                    "Making tiles too small to interact with",
                    "Not providing adequate spacing"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic App Launcher",
                    "description": "Basic app launcher with single application tile",
                    "code": "<div class=\"slds-app-launcher\">\n      <div class=\"\">\n        <h2>App Launcher</h2>\n      </div>\n      <div class=\"slds-app-launcher__content\">\n        <div class=\"slds-app-launcher__tile\">\n          <div class=\"slds-app-launcher__tile-figure\">\n            <svg class=\"slds-icon slds-icon_large\">\n              <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#opportunity\"></use>\n            </svg>\n          </div>\n          <div class=\"slds-app-launcher__tile-body\">\n            <h4>Sales Cloud</h4>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "app-launcher.css"
                ],
                "javascript": [],
                "icons": [
                    "standard-sprite.svg"
                ],
                "other_components": [
                    "icons",
                    "grid"
                ]
            },
            "related_components": [
                {
                    "name": "Global Navigation",
                    "relationship": "container",
                    "description": "Often contains the app launcher"
                },
                {
                    "name": "Navigation",
                    "relationship": "alternative",
                    "description": "Alternative navigation patterns"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/app-launcher/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Avatar Group",
            "description": "A collection of avatars displayed together, typically used to show multiple users or entities associated with a record or activity.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-avatar-group",
                "elements": [],
                "modifiers": [
                    {
                        "class": "slds-avatar-group_small",
                        "description": "Small avatar group variant",
                        "usage": "Use when space is limited"
                    },
                    {
                        "class": "slds-avatar-group_medium",
                        "description": "Medium avatar group variant (default)",
                        "usage": "Default size for most use cases"
                    },
                    {
                        "class": "slds-avatar-group_large",
                        "description": "Large avatar group variant",
                        "usage": "Use for prominence or when space allows"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard avatar group with overlapping avatars",
                    "classes": [
                        "slds-avatar-group"
                    ],
                    "usage_context": "Default implementation for multiple user representation",
                    "differences": "Overlapping circular avatars with proper spacing"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically built using multiple lightning-avatar components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through interactive avatars if clickable"
                ],
                "screen_reader": [
                    "List structure conveyed through proper markup",
                    "Individual avatar labels announced"
                ],
                "aria_attributes": [
                    "role='list' for the avatar group container",
                    "role='listitem' for individual avatar items"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To show multiple users associated with a record",
                    "For team or collaboration indicators",
                    "When displaying attendees or participants"
                ],
                "when_not_to_use": [
                    "For single users (use individual avatar instead)",
                    "When space doesn't allow for proper overlap visualization"
                ],
                "best_practices": [
                    "Limit to 3-5 visible avatars for optimal readability",
                    "Show additional count for larger groups",
                    "Maintain consistent avatar sizes within the group"
                ],
                "common_mistakes": [
                    "Showing too many avatars without grouping or count",
                    "Inconsistent avatar sizes within the group"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Avatar Group",
                    "description": "Basic avatar group with two users",
                    "code": "<div class=\"slds-avatar-group slds-avatar-group_medium\">\n      <ul class=\"\">\n        <li class=\"\">\n          <span class=\"slds-avatar slds-avatar_medium\">\n            <img alt=\"John Doe\" src=\"/assets/images/avatar1.jpg\" class=\"\" />\n          </span>\n        </li>\n        <li class=\"\">\n          <span class=\"slds-avatar slds-avatar_medium\">\n            <img alt=\"Jane Smith\" src=\"/assets/images/avatar2.jpg\" class=\"\" />\n          </span>\n        </li>\n      </ul>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "avatar-group.css",
                    "avatar.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "avatar"
                ]
            },
            "related_components": [
                {
                    "name": "Avatar",
                    "relationship": "depends-on",
                    "description": "Individual avatars that make up the group"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/avatar-group/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Avatar",
            "description": "A visual representation of an object, typically used to represent a user, account, or entity with customizable sizing, shape, and fallback options.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-avatar",
                "elements": [
                    {
                        "class": "slds-avatar__initials",
                        "description": "Text initials when no image is available",
                        "purpose": "Displays initials as fallback when image is not available"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-avatar_circle",
                        "description": "Circular avatar shape",
                        "usage": "Default circular appearance for avatars"
                    },
                    {
                        "class": "slds-avatar_x-small",
                        "description": "Extra small avatar size",
                        "usage": "Use in constrained spaces like dense lists"
                    },
                    {
                        "class": "slds-avatar_small",
                        "description": "Small avatar size",
                        "usage": "Use in compact layouts"
                    },
                    {
                        "class": "slds-avatar_medium",
                        "description": "Medium avatar size (default)",
                        "usage": "Default size for most use cases"
                    },
                    {
                        "class": "slds-avatar_large",
                        "description": "Large avatar size",
                        "usage": "Use for profile pages or prominent display"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Avatar with image",
                    "classes": [
                        "slds-avatar"
                    ],
                    "usage_context": "Default avatar with user or entity image",
                    "differences": "Shows actual image of the person or entity"
                },
                {
                    "name": "Initials",
                    "description": "Avatar with initials fallback",
                    "classes": [
                        "slds-avatar"
                    ],
                    "usage_context": "When no image is available, shows initials",
                    "differences": "Displays text initials instead of image"
                }
            ],
            "lightning_component": {
                "name": "lightning-avatar",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-avatar",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS avatar blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "No specific keyboard interactions (display-only component)"
                ],
                "screen_reader": [
                    "Alt text announced for images",
                    "Initials announced when used as fallback"
                ],
                "aria_attributes": [
                    "alt attribute for image avatars",
                    "aria-label for initials avatars"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To represent users, accounts, or entities visually",
                    "In lists, cards, or headers where identification is needed",
                    "When you need consistent visual representation"
                ],
                "when_not_to_use": [
                    "For decorative images",
                    "When the representation doesn't relate to a person or entity",
                    "For actionable content"
                ],
                "best_practices": [
                    "Use appropriate size for the context",
                    "Provide meaningful alt text for images",
                    "Use initials as fallback when images aren't available"
                ],
                "common_mistakes": [
                    "Using avatars for non-person/entity content",
                    "Not providing fallback options",
                    "Inconsistent sizing within the same interface"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Avatar",
                    "code": "<span class=\"slds-avatar slds-avatar_medium\">\n      <img alt=\"Person name\" src=\"/assets/images/avatar1.jpg\" class=\"\" />\n      </span>\n"
                },
                {
                    "title": "Initials Avatar",
                    "code": "<span class=\"slds-avatar slds-avatar_medium\">\n      <abbr class=\"slds-avatar__initials\" title=\"John Doe\">JD</abbr>\n      </span>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "avatar.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Avatar Group",
                    "relationship": "container",
                    "description": "Groups multiple avatars together"
                },
                {
                    "name": "Media Objects",
                    "relationship": "depends-on",
                    "description": "Often used within media object patterns"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/avatar/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Badges",
            "description": "Small status descriptors for UI elements that indicate metadata, state, or other contextual information about an item.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-badge",
                "elements": [],
                "modifiers": [
                    {
                        "class": "slds-badge_lightest",
                        "description": "Lightest badge variant",
                        "usage": "Subtle, low-emphasis status indication"
                    },
                    {
                        "class": "slds-badge_inverse",
                        "description": "Inverse badge for dark backgrounds",
                        "usage": "Use on dark or colored backgrounds"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard badge with default styling",
                    "classes": [
                        "slds-badge"
                    ],
                    "usage_context": "Default status or metadata indicator",
                    "differences": "Standard gray badge with medium contrast"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-badge-color-background",
                    "description": "Background color for badges",
                    "category": "color"
                },
                {
                    "name": "--slds-c-badge-text-color",
                    "description": "Text color for badges",
                    "category": "color"
                }
            ],
            "lightning_component": {
                "name": "lightning-badge",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-badge",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS badge blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "No specific keyboard interactions (display-only component)"
                ],
                "screen_reader": [
                    "Badge text content announced",
                    "Context conveyed through proper labeling"
                ],
                "aria_attributes": [
                    "aria-label when badge content needs clarification",
                    "role='status' for dynamic badge updates"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To indicate status or state of an item",
                    "For showing counts or quantities",
                    "To display metadata or categories",
                    "When you need compact status indicators"
                ],
                "when_not_to_use": [
                    "For actionable elements (use buttons instead)",
                    "For primary content (use regular text instead)",
                    "When the information is critical (use alerts instead)"
                ],
                "best_practices": [
                    "Keep badge text short and descriptive",
                    "Use consistent badge styling within the same context",
                    "Choose appropriate variant for the background",
                    "Provide clear context for what the badge represents"
                ],
                "common_mistakes": [
                    "Using badges for interactive elements",
                    "Making badge text too long or verbose",
                    "Using too many different badge styles in one interface"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Badge",
                    "description": "Basic badge with default styling",
                    "code": "<span class=\"slds-badge\">Badge Label</span>\n"
                },
                {
                    "title": "Lightest Badge",
                    "description": "Subtle badge for counts or low-emphasis status",
                    "code": "<span class=\"slds-badge slds-badge_lightest\">99+</span>\n"
                },
                {
                    "title": "Inverse Badge",
                    "description": "Badge for use on dark backgrounds",
                    "code": "<span class=\"slds-badge slds-badge_inverse\">Active</span>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "badge.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Pills",
                    "relationship": "similar",
                    "description": "Similar visual treatment but for removable items"
                },
                {
                    "name": "Icons",
                    "relationship": "depends-on",
                    "description": "Often used together to enhance meaning"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/badges/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2024-12-19",
                "review_status": "complete"
            }
        },
        {
            "name": "Brand Band",
            "description": "A visual header component that displays branding elements, organizational identity, and context information, typically positioned at the top of applications to establish brand presence and visual hierarchy.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-brand-band",
                "elements": [],
                "modifiers": [
                    {
                        "class": "slds-brand-band_small",
                        "description": "Small brand band height",
                        "usage": "For compact brand display"
                    },
                    {
                        "class": "slds-brand-band_medium",
                        "description": "Medium brand band height",
                        "usage": "Standard brand band sizing"
                    },
                    {
                        "class": "slds-brand-band_large",
                        "description": "Large brand band height",
                        "usage": "For prominent brand display"
                    },
                    {
                        "class": "slds-brand-band_cover",
                        "description": "Cover-style brand band",
                        "usage": "For full-width background coverage"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard brand band with basic branding",
                    "classes": [
                        "slds-brand-band"
                    ],
                    "usage_context": "Default implementation for application branding",
                    "differences": "Basic brand display with title and optional image"
                },
                {
                    "name": "Small",
                    "description": "Compact brand band for minimal branding",
                    "classes": [
                        "slds-brand-band",
                        "slds-brand-band_small"
                    ],
                    "usage_context": "When space is limited or subtle branding is preferred",
                    "differences": "Reduced height and compact layout"
                },
                {
                    "name": "Large",
                    "description": "Prominent brand band for strong brand presence",
                    "classes": [
                        "slds-brand-band",
                        "slds-brand-band_large"
                    ],
                    "usage_context": "For landing pages or primary brand displays",
                    "differences": "Increased height and prominent branding elements"
                },
                {
                    "name": "Cover",
                    "description": "Full-width background brand band",
                    "classes": [
                        "slds-brand-band",
                        "slds-brand-band_cover"
                    ],
                    "usage_context": "For hero-style brand presentations",
                    "differences": "Full-width background with overlay content"
                }
            ],
            "lightning_component": {
                "name": "lightning-brand-band",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "Brand band functionality often implemented through custom header components or app branding"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through brand band interactive elements",
                    "Focus management for brand band controls"
                ],
                "screen_reader": [
                    "Brand information properly announced",
                    "Image alt text provided for brand images",
                    "Brand context clearly communicated"
                ],
                "aria_attributes": [
                    "role='banner' for page header branding",
                    "aria-label for brand context",
                    "aria-describedby for additional brand information"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For establishing application or organizational branding",
                    "When brand presence needs to be prominent",
                    "In application headers and landing pages",
                    "For organizational identity and context"
                ],
                "when_not_to_use": [
                    "In content areas where branding would be distracting",
                    "For functional navigation (use navigation components)",
                    "When minimal branding approach is preferred"
                ],
                "best_practices": [
                    "Keep branding consistent across application",
                    "Ensure brand elements are accessible",
                    "Use appropriate sizing for context",
                    "Maintain brand guidelines and standards",
                    "Consider responsive behavior"
                ],
                "common_mistakes": [
                    "Overusing brand elements throughout interface",
                    "Poor contrast for brand text and images",
                    "Inconsistent brand presentation",
                    "Missing accessibility considerations"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Brand Band",
                    "description": "Standard brand band with logo and title",
                    "code": "<div class=\"slds-brand-band\" role=\"banner\">\n      <div class=\"\">\n        <div class=\"\">\n          <div class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__figure\">\n              <div class=\"\">\n                <img src=\"/assets/images/logo.png\" alt=\"Company Logo\" style=\"height: 40px;\" />\n              </div>\n            </div>\n            <div class=\"slds-media__body\">\n              <h1 class=\"slds-text-heading_medium\">\n                Application Name\n              </h1>\n              <p class=\"slds-text-body_small slds-text-color_weak\">\n                Powered by Salesforce\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Large Brand Band",
                    "description": "Prominent brand band with additional controls",
                    "code": "<div class=\"slds-brand-band slds-brand-band_large\" role=\"banner\">\n      <div class=\"slds-p-around_medium\">\n        <div class=\"\">\n          <div class=\"slds-grid slds-grid_align-spread slds-grid_vertical-align-center\">\n            <div class=\"slds-col\">\n              <div class=\"slds-media slds-media_center\">\n                <div class=\"slds-media__figure\">\n                  <div class=\"\">\n                    <span class=\"slds-icon_container slds-icon_container_circle\" style=\"background-color: #1589ee;\">\n                      <svg class=\"slds-icon slds-icon_large\" aria-hidden=\"true\" style=\"fill: white;\">\n                        <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#sales_cloud\"></use>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <div class=\"slds-media__body\">\n                  <h1 class=\"slds-text-heading_large\">\n                    Sales Cloud\n                  </h1>\n                  <p class=\"slds-text-body_regular slds-text-color_weak\">\n                    Enterprise Customer Relationship Management\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-col slds-no-flex\">\n              <div class=\"\">\n                <div class=\"slds-button-group\" role=\"group\">\n                  <button class=\"slds-button slds-button_neutral\">\n                    Settings\n                  </button>\n                  <button class=\"slds-button slds-button_brand\">\n                    Get Started\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Small Brand Band",
                    "description": "Compact brand band for minimal branding",
                    "code": "<div class=\"slds-brand-band slds-brand-band_small\" role=\"banner\">\n      <div class=\"slds-p-horizontal_medium slds-p-vertical_small\">\n        <div class=\"\">\n          <div class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__figure\">\n              <div class=\"\">\n                <span class=\"slds-icon_container\" style=\"background-color: transparent;\">\n                  <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\" style=\"fill: #0176d3;\">\n                    <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#salesforce1\"></use>\n                  </svg>\n                </span>\n              </div>\n            </div>\n            <div class=\"slds-media__body\">\n              <h1 class=\"slds-text-heading_small\">\n                Service Console\n              </h1>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Cover Brand Band",
                    "description": "Full-width background brand band with overlay",
                    "code": "<div class=\"slds-brand-band slds-brand-band_cover slds-brand-band_large\" role=\"banner\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\">\n      <div class=\"slds-p-around_large\">\n        <div class=\"slds-text-align_center\">\n          <div class=\"slds-m-bottom_medium\">\n            <span class=\"slds-icon_container slds-icon_container_circle\" style=\"background-color: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3);\">\n              <svg class=\"slds-icon\" aria-hidden=\"true\" style=\"fill: white;\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#marketing_cloud\"></use>\n              </svg>\n            </span>\n          </div>\n          <h1 class=\"slds-text-heading_large slds-m-bottom_small\" style=\"color: white;\">\n            Marketing Cloud\n          </h1>\n          <p class=\"slds-text-body_regular slds-m-bottom_medium\" style=\"color: rgba(255,255,255,0.8);\">\n            Drive personalized customer journeys at scale\n          </p>\n          <div class=\"\">\n            <button class=\"slds-button slds-button_neutral\">\n              Learn More\n            </button>\n            <button class=\"slds-button slds-button_brand slds-m-left_small\">\n              Start Free Trial\n            </button>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Lightning Styled Brand Band",
                    "description": "Brand band with Lightning Design System styling",
                    "code": "<div class=\"slds-brand-band slds-brand-band_medium\" role=\"banner\">\n      <div class=\"slds-p-around_medium\" style=\"background-color: #f3f2f2; border-bottom: 3px solid #0176d3;\">\n        <div class=\"\">\n          <div class=\"slds-grid slds-grid_align-spread slds-grid_vertical-align-center\">\n            <div class=\"slds-col\">\n              <div class=\"slds-media slds-media_center\">\n                <div class=\"slds-media__figure\">\n                  <div class=\"\">\n                    <span class=\"slds-icon_container\" style=\"background-color: #0176d3;\">\n                      <svg class=\"slds-icon\" aria-hidden=\"true\" style=\"fill: white;\">\n                        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#lightning_component\"></use>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <div class=\"slds-media__body\">\n                  <h1 class=\"slds-text-heading_medium\">\n                    Lightning Experience\n                  </h1>\n                  <p class=\"slds-text-body_small slds-text-color_weak\">\n                    Modern CRM Platform\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-col slds-no-flex\">\n              <div class=\"\">\n                <span class=\"slds-badge\">\n                  Beta\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Brand Band with Navigation",
                    "description": "Brand band integrated with primary navigation",
                    "code": "<div class=\"slds-brand-band\" role=\"banner\">\n      <div class=\"\">\n        <div class=\"slds-p-around_medium\" style=\"border-bottom: 1px solid #e5e5e5;\">\n          <div class=\"slds-grid slds-grid_align-spread slds-grid_vertical-align-center\">\n            <div class=\"slds-col\">\n              <div class=\"slds-media slds-media_center\">\n                <div class=\"slds-media__figure\">\n                  <div class=\"\">\n                    <img src=\"/assets/images/company-logo.svg\" alt=\"Company\" style=\"height: 32px;\" />\n                  </div>\n                </div>\n                <div class=\"slds-media__body\">\n                  <h1 class=\"slds-text-heading_small\">\n                    Customer Portal\n                  </h1>\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-col slds-no-flex\">\n              <nav class=\"\" aria-label=\"Primary navigation\">\n                <ul class=\"slds-list_horizontal slds-has-dividers_right\">\n                  <li class=\"slds-list__item\">\n                    <a href=\"#dashboard\" class=\"slds-text-link\">Dashboard</a>\n                  </li>\n                  <li class=\"slds-list__item\">\n                    <a href=\"#cases\" class=\"slds-text-link\">Cases</a>\n                  </li>\n                  <li class=\"slds-list__item\">\n                    <a href=\"#account\" class=\"slds-text-link\">Account</a>\n                  </li>\n                </ul>\n              </nav>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "brand-band.css",
                    "grid.css",
                    "media-object.css"
                ],
                "javascript": [],
                "icons": [
                    "standard-sprite.svg",
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "badge",
                    "media-object"
                ]
            },
            "related_components": [
                {
                    "name": "Global Header",
                    "relationship": "similar",
                    "description": "Similar header functionality"
                },
                {
                    "name": "Page Header",
                    "relationship": "similar",
                    "description": "Similar page-level header concept"
                },
                {
                    "name": "Global Navigation",
                    "relationship": "depends-on",
                    "description": "Often used together with navigation"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/brand-band/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Breadcrumbs",
            "description": "A navigation aid that shows users their current location within a hierarchical structure and provides links to navigate back to parent levels.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-breadcrumb",
                "elements": [
                    {
                        "class": "slds-breadcrumb__item",
                        "description": "Individual breadcrumb item wrapper",
                        "purpose": "Contains a single breadcrumb link or text"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-current",
                        "description": "Current page indicator",
                        "trigger": "Applied to the current page breadcrumb item"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard breadcrumb navigation with linked trail",
                    "classes": [
                        "slds-breadcrumb"
                    ],
                    "usage_context": "Default implementation for hierarchical navigation",
                    "differences": "Horizontal list of linked navigation items with separators"
                }
            ],
            "lightning_component": {
                "name": "lightning-breadcrumbs",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-breadcrumbs",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS breadcrumb blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through breadcrumb links",
                    "Enter/Space to activate breadcrumb links"
                ],
                "screen_reader": [
                    "Navigation landmark conveyed through proper markup",
                    "Breadcrumb trail structure announced",
                    "Current location clearly identified"
                ],
                "aria_attributes": [
                    "role='navigation' for breadcrumb container",
                    "aria-label='Breadcrumb' for navigation context",
                    "aria-current='page' for current location"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For hierarchical navigation structures",
                    "When users need to understand their current location",
                    "To provide quick navigation to parent levels",
                    "In multi-level content organization"
                ],
                "when_not_to_use": [
                    "For flat, non-hierarchical navigation",
                    "When the hierarchy is only one level deep",
                    "In mobile interfaces with limited space"
                ],
                "best_practices": [
                    "Keep breadcrumb labels concise and descriptive",
                    "Show the full path to current location",
                    "Make parent levels clickable for navigation",
                    "Use consistent separator styling",
                    "Position breadcrumbs near the top of content"
                ],
                "common_mistakes": [
                    "Making breadcrumb labels too long or verbose",
                    "Not making parent levels clickable",
                    "Using breadcrumbs for non-hierarchical content",
                    "Inconsistent separator styling"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Breadcrumbs",
                    "description": "Standard breadcrumb navigation with multiple levels",
                    "code": "<nav class=\"slds-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n      <ol class=\"\">\n        <li class=\"slds-breadcrumb__item\">\n          <a href=\"#\" class=\"\">Home</a>\n        </li>\n        <li class=\"slds-breadcrumb__item\">\n          <a href=\"#\" class=\"\">Parent Page</a>\n        </li>\n        <li class=\"slds-breadcrumb__item\">\n          <span class=\"\" aria-current=\"page\">Current Page</span>\n        </li>\n      </ol>\n      </nav>\n"
                },
                {
                    "title": "Simple Breadcrumbs",
                    "description": "Breadcrumb with only one parent level",
                    "code": "<nav class=\"slds-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n      <ol class=\"\">\n        <li class=\"slds-breadcrumb__item\">\n          <a href=\"#\" class=\"\">Parent Page</a>\n        </li>\n        <li class=\"slds-breadcrumb__item\">\n          <span class=\"\" aria-current=\"page\">Current Page</span>\n        </li>\n      </ol>\n      </nav>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "breadcrumb.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Path",
                    "relationship": "similar",
                    "description": "Similar navigation concept for process steps"
                },
                {
                    "name": "Vertical Navigation",
                    "relationship": "alternative",
                    "description": "Alternative navigation pattern for hierarchical content"
                },
                {
                    "name": "Global Navigation",
                    "relationship": "container",
                    "description": "Often contains breadcrumb navigation"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/breadcrumbs/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Builder Header",
            "description": "A specialized global header component designed for builder and editor interfaces. It provides a fixed header with navigation, branding, and utility actions, along with an optional toolbar for document-level actions.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-builder-header",
                "elements": [
                    {
                        "class": "slds-builder-header_container",
                        "description": "Container that fixes the builder header to the top of the viewport",
                        "purpose": "Wrapper element that positions the header at the top of the page"
                    },
                    {
                        "class": "slds-builder-header__item",
                        "description": "Direct child item of the builder header",
                        "purpose": "Contains navigation items, branding, or utilities"
                    },
                    {
                        "class": "slds-builder-header__item-label",
                        "description": "Non-interactive label inside a header item",
                        "purpose": "Displays text or branding within a header item"
                    },
                    {
                        "class": "slds-builder-header__item-action",
                        "description": "Interactive action element inside a header item",
                        "purpose": "Clickable button or link within a header item"
                    },
                    {
                        "class": "slds-builder-header__nav",
                        "description": "Container for the navigation region",
                        "purpose": "Holds the navigation list within the header"
                    },
                    {
                        "class": "slds-builder-header__nav-list",
                        "description": "List element containing navigation items",
                        "purpose": "Unordered list wrapper for navigation items"
                    },
                    {
                        "class": "slds-builder-header__nav-item",
                        "description": "Individual navigation item",
                        "purpose": "List item wrapping each navigation element"
                    },
                    {
                        "class": "slds-builder-header__utilities",
                        "description": "Container for utility actions (back, help, etc.)",
                        "purpose": "Holds utility links and actions, typically right-aligned"
                    },
                    {
                        "class": "slds-builder-header__utilities-item",
                        "description": "Individual utility item",
                        "purpose": "Wrapper for utility actions like back or help buttons"
                    },
                    {
                        "class": "slds-builder-toolbar",
                        "description": "Toolbar region below the builder header",
                        "purpose": "Contains document-level actions and controls"
                    },
                    {
                        "class": "slds-builder-toolbar__actions",
                        "description": "Container for toolbar actions",
                        "purpose": "Holds action buttons, typically right-aligned"
                    },
                    {
                        "class": "slds-builder-toolbar__item-group",
                        "description": "Group of related toolbar items",
                        "purpose": "Visually groups related buttons or controls"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard builder header with navigation",
                    "classes": [
                        "slds-builder-header"
                    ],
                    "usage_context": "Default builder header for editor interfaces",
                    "differences": "Fixed header with dark background and navigation items"
                },
                {
                    "name": "With Toolbar",
                    "description": "Builder header with toolbar region",
                    "classes": [
                        "slds-builder-header_container",
                        "slds-builder-header",
                        "slds-builder-toolbar"
                    ],
                    "usage_context": "When document-level actions need to be accessible",
                    "differences": "Includes a toolbar section below the main header"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically built with lightning-layout and custom styling"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between header items",
                    "Enter or Space to activate header actions",
                    "Arrow keys for navigation within header items"
                ],
                "screen_reader": [
                    "Header landmark announced",
                    "Navigation landmark announced",
                    "Action labels announced",
                    "Current navigation state indicated"
                ],
                "aria_attributes": [
                    "role='banner' on header element",
                    "role='navigation' on nav container",
                    "aria-label on navigation regions",
                    "aria-current for active navigation items"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For builder, editor, or creation interfaces",
                    "When consistent global navigation is needed",
                    "For applications with document-level actions",
                    "In complex editing workflows"
                ],
                "when_not_to_use": [
                    "For standard application navigation (use global-header)",
                    "In simple viewing interfaces",
                    "When header needs to scroll with content",
                    "For mobile-first experiences"
                ],
                "best_practices": [
                    "Keep navigation items concise and clear",
                    "Place most important actions in visible areas",
                    "Use consistent iconography and labeling",
                    "Ensure adequate touch targets for mobile",
                    "Group related toolbar actions together",
                    "Maintain proper contrast on dark background"
                ],
                "common_mistakes": [
                    "Overcrowding the header with too many items",
                    "Inconsistent spacing between elements",
                    "Poor color contrast on background",
                    "Missing keyboard navigation support",
                    "Not indicating current/active state"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Builder Header",
                    "code": "<div class=\"slds-builder-header_container\">\n  <header class=\"slds-builder-header\">\n    <div class=\"slds-builder-header__item\">\n      <div class=\"slds-builder-header__item-label\">\n        <span class=\"\" title=\"Salesforce\">\n          <svg class=\"slds-icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/logo-sprite/svg/symbols.svg#salesforce\"></use>\n          </svg>\n        </span>\n      </div>\n    </div>\n    <nav class=\"slds-builder-header__item slds-builder-header__nav\" role=\"navigation\" aria-label=\"Primary\">\n      <ul class=\"slds-builder-header__nav-list\">\n        <li class=\"slds-builder-header__nav-item\">\n          <a href=\"#\" class=\"slds-builder-header__item-action\">Setup</a>\n        </li>\n        <li class=\"slds-builder-header__nav-item\">\n          <a href=\"#\" class=\"slds-builder-header__item-action\" aria-current=\"page\">Editor</a>\n        </li>\n      </ul>\n    </nav>\n    <div class=\"slds-builder-header__item slds-builder-header__utilities\">\n      <div class=\"slds-builder-header__utilities-item\">\n        <a href=\"#\" class=\"slds-builder-header__item-action\">Back</a>\n      </div>\n      <div class=\"slds-builder-header__utilities-item\">\n        <a href=\"#\" class=\"slds-builder-header__item-action\">Help</a>\n      </div>\n    </div>\n  </header>\n</div>\n",
                    "description": "Basic builder header with branding, navigation, and utilities"
                },
                {
                    "title": "Builder Header with Toolbar",
                    "code": "<div class=\"slds-builder-header_container\">\n  <header class=\"slds-builder-header\">\n    <div class=\"slds-builder-header__item\">\n      <div class=\"slds-builder-header__item-label\">\n        <span>Page Builder</span>\n      </div>\n    </div>\n    <nav class=\"slds-builder-header__item slds-builder-header__nav\" role=\"navigation\" aria-label=\"Primary\">\n      <ul class=\"slds-builder-header__nav-list\">\n        <li class=\"slds-builder-header__nav-item\">\n          <a href=\"#\" class=\"slds-builder-header__item-action\">Properties</a>\n        </li>\n        <li class=\"slds-builder-header__nav-item\">\n          <a href=\"#\" class=\"slds-builder-header__item-action\" aria-current=\"page\">Content</a>\n        </li>\n      </ul>\n    </nav>\n    <div class=\"slds-builder-header__item slds-builder-header__utilities\">\n      <div class=\"slds-builder-header__utilities-item\">\n        <button class=\"slds-button slds-button_neutral slds-builder-header__item-action\">Cancel</button>\n      </div>\n      <div class=\"slds-builder-header__utilities-item\">\n        <button class=\"slds-button slds-button_brand slds-builder-header__item-action\">Save</button>\n      </div>\n    </div>\n  </header>\n  <div class=\"slds-builder-toolbar\">\n    <div class=\"slds-builder-toolbar__item-group\">\n      <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Undo\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#undo\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Undo</span>\n      </button>\n      <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Redo\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#redo\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Redo</span>\n      </button>\n    </div>\n    <div class=\"slds-builder-toolbar__actions\">\n      <div class=\"slds-builder-toolbar__item-group\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Preview\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#preview\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Preview</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    "description": "Builder header with toolbar containing document actions"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-g-color-brand-base-20",
                    "description": "Background color of the builder header",
                    "css_property": "background"
                },
                {
                    "name": "--slds-g-color-neutral-base-100",
                    "description": "Text color in the builder header",
                    "css_property": "color"
                },
                {
                    "name": "--slds-g-color-brand-base-10",
                    "description": "Border color between header items",
                    "css_property": "border-color"
                },
                {
                    "name": "--slds-g-shadow-inset-inverse-focus-1",
                    "description": "Focus shadow for header actions",
                    "css_property": "box-shadow"
                },
                {
                    "name": "--slds-g-color-border-base-1",
                    "description": "Toolbar border color",
                    "css_property": "border-color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "builder-header.css",
                    "button.css"
                ],
                "javascript": [
                    "Navigation state management",
                    "Active item highlighting"
                ],
                "icons": [
                    "utility:undo",
                    "utility:redo",
                    "utility:preview",
                    "logo:salesforce"
                ],
                "other_components": [
                    "button",
                    "icon"
                ]
            },
            "related_components": [
                {
                    "name": "Global Header",
                    "relationship": "alternative",
                    "description": "Standard application header for non-builder interfaces"
                },
                {
                    "name": "Page Header",
                    "relationship": "related",
                    "description": "Header for individual pages, not globally fixed"
                },
                {
                    "name": "Docked Utility Bar",
                    "relationship": "complementary",
                    "description": "Can be used alongside builder header for utilities"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/builder-header/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Button Groups",
            "description": "A collection of related buttons grouped together, maintaining consistent spacing and visual hierarchy while providing clear action choices.",
            "category": "Actions",
            "slds_classes": {
                "root": "slds-button-group",
                "elements": [],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard button group with consistent spacing",
                    "classes": [
                        "slds-button-group"
                    ],
                    "usage_context": "Default implementation for related action grouping",
                    "differences": "Horizontal layout with proper button spacing"
                }
            ],
            "lightning_component": {
                "name": "lightning-button-group",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-button-group",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS button group blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through individual buttons",
                    "Enter/Space to activate buttons",
                    "Arrow keys for group navigation when appropriate"
                ],
                "screen_reader": [
                    "Group structure conveyed through list semantics",
                    "Individual button labels announced",
                    "Button relationships communicated"
                ],
                "aria_attributes": [
                    "role='group' with descriptive aria-label",
                    "role='list' for button container",
                    "role='listitem' for individual button wrappers"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For related actions that should be grouped together",
                    "When you need consistent button spacing",
                    "For toolbar-style interfaces",
                    "When actions are conceptually related but distinct"
                ],
                "when_not_to_use": [
                    "For single actions (use individual buttons)",
                    "When actions are unrelated",
                    "For navigation (use navigation components instead)"
                ],
                "best_practices": [
                    "Group conceptually related actions together",
                    "Maintain consistent button styling within groups",
                    "Order buttons by importance or frequency of use",
                    "Provide clear, action-oriented button labels"
                ],
                "common_mistakes": [
                    "Grouping unrelated actions together",
                    "Using inconsistent button styles within a group",
                    "Creating overly large button groups"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Button Group",
                    "description": "Basic button group with cancel and save actions",
                    "code": "<div class=\"slds-button-group\" role=\"group\" aria-label=\"Form actions\">\n      <button class=\"slds-button slds-button_neutral\">Cancel</button>\n      <button class=\"slds-button slds-button_brand\">Save</button>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "button-group.css",
                    "button.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Button",
                    "relationship": "depends-on",
                    "description": "Individual buttons that make up the group"
                },
                {
                    "name": "Button Icons",
                    "relationship": "depends-on",
                    "description": "Icon buttons can be used within groups"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/button-groups/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Button Icons",
            "description": "Icon-only buttons that provide visual actions without text labels. Available in multiple variants including transparent, bordered, filled, and inverse styles for use on different backgrounds.",
            "category": "Actions",
            "slds_classes": {
                "root": "slds-button_icon",
                "elements": [
                    {
                        "class": "slds-button__icon",
                        "description": "Icon element within the button",
                        "purpose": "SVG icon that represents the button action"
                    },
                    {
                        "class": "slds-button__icon_hint",
                        "description": "Hint styling for icon that changes on hover",
                        "purpose": "Subdued icon color that becomes more visible on hover"
                    },
                    {
                        "class": "slds-button__icon_inverse-hint",
                        "description": "Hint styling for icon on dark backgrounds",
                        "purpose": "Subdued inverse icon color for dark backgrounds"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-button_icon-container",
                        "description": "Container-styled button icon with standard dimensions",
                        "purpose": "Default 32x32px button icon container"
                    },
                    {
                        "class": "slds-button_icon-border",
                        "description": "Button icon with transparent background and border",
                        "purpose": "Bordered button icon for light backgrounds"
                    },
                    {
                        "class": "slds-button_icon-border-filled",
                        "description": "Button icon with filled white background and border",
                        "purpose": "Bordered button with solid background"
                    },
                    {
                        "class": "slds-button_icon-border-inverse",
                        "description": "Button icon with border for dark backgrounds",
                        "purpose": "Bordered button icon for inverse/dark backgrounds"
                    },
                    {
                        "class": "slds-button_icon-inverse",
                        "description": "Bare button icon for dark backgrounds",
                        "purpose": "Button icon without border for dark backgrounds"
                    },
                    {
                        "class": "slds-button_icon-brand",
                        "description": "Button icon with brand color background",
                        "purpose": "Branded, filled button icon"
                    },
                    {
                        "class": "slds-button_icon-more",
                        "description": "Button icon for overflow menus with borders",
                        "purpose": "Typically used for three-dot menu buttons"
                    },
                    {
                        "class": "slds-button_icon-container-more",
                        "description": "Button icon for overflow menus without borders",
                        "purpose": "Borderless overflow menu button"
                    },
                    {
                        "class": "slds-button_icon-error",
                        "description": "Error state styling for button icon",
                        "purpose": "Indicates error or destructive action"
                    },
                    {
                        "class": "slds-button_icon-warning",
                        "description": "Warning state styling for button icon",
                        "purpose": "Indicates caution or warning"
                    },
                    {
                        "class": "slds-button_icon-current-color",
                        "description": "Applies current text color to icon",
                        "purpose": "Inherits color from parent context"
                    },
                    {
                        "class": "slds-button_icon-xx-small",
                        "description": "Extra extra small button icon (16x16px)",
                        "purpose": "Smallest button icon size"
                    },
                    {
                        "class": "slds-button_icon-x-small",
                        "description": "Extra small button icon (20x20px)",
                        "purpose": "Very small button icon size"
                    },
                    {
                        "class": "slds-button_icon-small",
                        "description": "Small button icon (24x24px)",
                        "purpose": "Small button icon size"
                    },
                    {
                        "class": "slds-button_icon-large",
                        "description": "Large button icon (48x48px)",
                        "purpose": "Large button icon size"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected/active state for button icon",
                        "trigger": "When button represents active state"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Bare",
                    "description": "Icon button with no background or border",
                    "classes": [
                        "slds-button_icon"
                    ],
                    "usage_context": "Minimal button style for light backgrounds",
                    "differences": "Transparent with icon only, no visual container"
                },
                {
                    "name": "Container",
                    "description": "Icon button with container sizing",
                    "classes": [
                        "slds-button_icon",
                        "slds-button_icon-container"
                    ],
                    "usage_context": "Standard icon button with defined boundaries",
                    "differences": "32x32px container for consistent sizing"
                },
                {
                    "name": "Border",
                    "description": "Icon button with border and transparent background",
                    "classes": [
                        "slds-button_icon",
                        "slds-button_icon-border"
                    ],
                    "usage_context": "When button needs more visual weight",
                    "differences": "Border with transparent background"
                },
                {
                    "name": "Border Filled",
                    "description": "Icon button with border and filled background",
                    "classes": [
                        "slds-button_icon",
                        "slds-button_icon-border-filled"
                    ],
                    "usage_context": "Maximum visual emphasis for icon button",
                    "differences": "Border with solid white background"
                },
                {
                    "name": "Inverse",
                    "description": "Icon button for dark backgrounds",
                    "classes": [
                        "slds-button_icon",
                        "slds-button_icon-inverse"
                    ],
                    "usage_context": "Use on dark or colored backgrounds",
                    "differences": "Light colored icon for dark backgrounds"
                },
                {
                    "name": "Border Inverse",
                    "description": "Bordered icon button for dark backgrounds",
                    "classes": [
                        "slds-button_icon",
                        "slds-button_icon-border-inverse"
                    ],
                    "usage_context": "Bordered button on dark backgrounds",
                    "differences": "Border with inverse colors"
                },
                {
                    "name": "Brand",
                    "description": "Icon button with brand color background",
                    "classes": [
                        "slds-button_icon",
                        "slds-button_icon-brand"
                    ],
                    "usage_context": "Primary action icon button",
                    "differences": "Filled with brand blue background"
                }
            ],
            "lightning_component": {
                "name": "lightning-button-icon",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-button-icon",
                "mapping_notes": "lightning-button-icon provides icon-only buttons with variant support"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus button",
                    "Enter or Space to activate button"
                ],
                "screen_reader": [
                    "Button role announced",
                    "Accessible label must be provided (aria-label or slds-assistive-text)",
                    "Button state announced (pressed, disabled)"
                ],
                "aria_attributes": [
                    "aria-label required for icon-only buttons",
                    "aria-pressed for toggle buttons",
                    "aria-disabled for disabled state",
                    "title attribute for tooltip text"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For actions where icon clearly conveys meaning",
                    "To save space in compact interfaces",
                    "For common, well-understood actions (edit, delete, close)",
                    "In toolbars and action bars"
                ],
                "when_not_to_use": [
                    "For actions that aren't universally understood",
                    "When text label would significantly improve clarity",
                    "As primary call-to-action (use full button instead)",
                    "For complex or ambiguous actions"
                ],
                "best_practices": [
                    "Always provide accessible text via aria-label or assistive text",
                    "Use consistent icons for same actions throughout app",
                    "Provide tooltip on hover for additional context",
                    "Ensure adequate touch target size (minimum 44x44px)",
                    "Choose appropriate variant for background context",
                    "Use hint variant for less important actions"
                ],
                "common_mistakes": [
                    "Missing accessible text label",
                    "Using unclear or ambiguous icons",
                    "Touch targets too small on mobile",
                    "Wrong variant for background color",
                    "Inconsistent icon usage across application"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Icon Button",
                    "code": "<button class=\"slds-button slds-button_icon\" aria-label=\"Settings\" title=\"Settings\">\n      <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>\n      </svg>\n      </button>\n"
                },
                {
                    "title": "Bordered Icon Button",
                    "code": "<button class=\"slds-button slds-button_icon slds-button_icon-border\" aria-label=\"Edit\" title=\"Edit\">\n      <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#edit\"></use>\n      </svg>\n      <span class=\"slds-assistive-text\">Edit</span>\n      </button>\n"
                },
                {
                    "title": "Filled Bordered Icon Button",
                    "code": "<button class=\"slds-button slds-button_icon slds-button_icon-border-filled\" aria-label=\"Search\" title=\"Search\">\n      <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#search\"></use>\n      </svg>\n      <span class=\"slds-assistive-text\">Search</span>\n      </button>\n"
                },
                {
                    "title": "Brand Icon Button",
                    "code": "<button class=\"slds-button slds-button_icon slds-button_icon-brand\" aria-label=\"Add\" title=\"Add\">\n      <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#add\"></use>\n      </svg>\n      <span class=\"slds-assistive-text\">Add</span>\n      </button>\n"
                },
                {
                    "title": "Inverse Icon Button",
                    "code": "<div class=\"slds-box\" style=\"background: #16325c; padding: 1rem;\">\n      <button class=\"slds-button slds-button_icon slds-button_icon-inverse\" aria-label=\"Close\" title=\"Close\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Close</span>\n      </button>\n      </div>\n"
                },
                {
                    "title": "Icon Button with Hint",
                    "code": "<div class=\"slds-hint-parent\">\n      <button class=\"slds-button slds-button_icon slds-button_icon-border-filled\" aria-label=\"Help\" title=\"Help\">\n        <svg class=\"slds-button__icon slds-button__icon_hint\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#help\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Help</span>\n      </button>\n      </div>\n"
                },
                {
                    "title": "Size Variants",
                    "code": "<div class=\"slds-grid slds-grid_vertical-align-center slds-gutters_small\">\n      <div class=\"slds-col\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-xx-small\" aria-label=\"Extra Extra Small\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"slds-col\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small\" aria-label=\"Extra Small\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"slds-col\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-small\" aria-label=\"Small\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"slds-col\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border\" aria-label=\"Medium (default)\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"slds-col\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-large\" aria-label=\"Large\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>\n          </svg>\n        </button>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-g-color-neutral-base-50",
                    "description": "Default icon color",
                    "css_property": "color"
                },
                {
                    "name": "--slds-g-color-neutral-base-100",
                    "description": "Background color for filled variants",
                    "css_property": "background-color"
                },
                {
                    "name": "--slds-g-shadow-outset-focus-1",
                    "description": "Focus shadow for buttons",
                    "css_property": "box-shadow"
                },
                {
                    "name": "--slds-g-color-error-base-40",
                    "description": "Color for error state",
                    "css_property": "color"
                },
                {
                    "name": "--slds-g-color-warning-base-50",
                    "description": "Color for warning state",
                    "css_property": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "button-icons.css",
                    "button.css",
                    "icon.css"
                ],
                "javascript": [
                    "Click handlers",
                    "Tooltip functionality"
                ],
                "icons": [
                    "Various utility icons"
                ],
                "other_components": [
                    "icon",
                    "tooltip"
                ]
            },
            "related_components": [
                {
                    "name": "Button",
                    "relationship": "parent",
                    "description": "Base button component"
                },
                {
                    "name": "Button Group",
                    "relationship": "complementary",
                    "description": "Groups multiple button icons together"
                },
                {
                    "name": "Icon",
                    "relationship": "contains",
                    "description": "Icon element within button"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/button-icons/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Buttons",
            "description": "Clickable elements used to perform actions. Buttons communicate action and direct user intent.",
            "category": "Actions",
            "slds_classes": {
                "root": "slds-button",
                "elements": [
                    {
                        "class": "slds-button__icon",
                        "description": "Icon within button",
                        "purpose": "Contains SVG icons inside buttons"
                    },
                    {
                        "class": "slds-button__icon_left",
                        "description": "Icon positioned on the left side of button text",
                        "purpose": "Positions icon to the left of button label"
                    },
                    {
                        "class": "slds-button__icon_right",
                        "description": "Icon positioned on the right side of button text",
                        "purpose": "Positions icon to the right of button label"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-button_neutral",
                        "description": "Default button style with neutral appearance",
                        "usage": "Use for secondary actions or when multiple buttons are present"
                    },
                    {
                        "class": "slds-button_brand",
                        "description": "Primary button style with brand color",
                        "usage": "Use for primary actions, limit to one per page section"
                    },
                    {
                        "class": "slds-button_outline-brand",
                        "description": "Button with brand-colored outline",
                        "usage": "Use for secondary actions that need more emphasis than neutral"
                    },
                    {
                        "class": "slds-button_destructive",
                        "description": "Button for destructive actions",
                        "usage": "Use for delete, remove, or other potentially harmful actions"
                    },
                    {
                        "class": "slds-button_text-destructive",
                        "description": "Text-only destructive button",
                        "usage": "Use for destructive actions that need less visual weight"
                    },
                    {
                        "class": "slds-button_success",
                        "description": "Button for successful or positive actions",
                        "usage": "Use for confirm, save, or other positive actions"
                    },
                    {
                        "class": "slds-button_inverse",
                        "description": "Button for use on dark backgrounds",
                        "usage": "Use when button appears on dark or colored backgrounds"
                    },
                    {
                        "class": "slds-button_icon",
                        "description": "Icon-only button base class",
                        "usage": "Use for buttons containing only icons"
                    },
                    {
                        "class": "slds-button_icon-bare",
                        "description": "Icon button with no border or background",
                        "usage": "Use for minimal icon buttons"
                    },
                    {
                        "class": "slds-button_icon-container",
                        "description": "Icon button with container styling",
                        "usage": "Use for icon buttons that need visual containment"
                    },
                    {
                        "class": "slds-button_icon-border",
                        "description": "Icon button with border",
                        "usage": "Use for icon buttons that need border definition"
                    },
                    {
                        "class": "slds-button_icon-border-filled",
                        "description": "Icon button with border and background fill",
                        "usage": "Use for icon buttons that need filled appearance"
                    },
                    {
                        "class": "slds-button_icon-more",
                        "description": "Icon button styled for 'more actions' pattern",
                        "usage": "Use specifically for overflow menu triggers"
                    }
                ],
                "sizes": [
                    {
                        "class": "slds-button_small",
                        "description": "Small button size",
                        "usage": "Use when default size is too large"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected state for stateful buttons",
                        "trigger": "User selection or programmatic state change"
                    },
                    {
                        "class": "slds-not-selected",
                        "description": "Not selected state for stateful buttons",
                        "trigger": "Default or deselected state"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard button styles including neutral, brand, and destructive variants",
                    "classes": [
                        "slds-button",
                        "slds-button_neutral",
                        "slds-button_brand"
                    ],
                    "usage_context": "Default buttons for actions throughout the interface",
                    "differences": "Different visual emphasis levels for action hierarchy"
                },
                {
                    "name": "Icon",
                    "description": "Icon-only buttons in various styles",
                    "classes": [
                        "slds-button",
                        "slds-button_icon",
                        "slds-button_icon-border"
                    ],
                    "usage_context": "When space is constrained or action is universally understood",
                    "differences": "No text labels, rely on iconography for meaning"
                },
                {
                    "name": "Stateful",
                    "description": "Buttons that toggle between states",
                    "classes": [
                        "slds-button",
                        "slds-is-selected",
                        "slds-not-selected"
                    ],
                    "usage_context": "For toggle actions like favorites, follow, or selection",
                    "differences": "Visual state changes based on user interaction"
                }
            ],
            "lightning_component": {
                "name": "lightning-button",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-button",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS button blueprint with additional functionality"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus on button",
                    "Enter or Space to activate button",
                    "Focus visible indicators required"
                ],
                "screen_reader": [
                    "Button text or aria-label announced",
                    "Button role automatically conveyed",
                    "State changes announced for stateful buttons"
                ],
                "aria_attributes": [
                    "aria-label for icon-only buttons",
                    "aria-pressed for stateful toggle buttons",
                    "aria-describedby for additional context",
                    "aria-disabled for disabled state"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To trigger an action or event",
                    "To submit forms",
                    "To navigate to a new page or section",
                    "To open modals or dialogs"
                ],
                "when_not_to_use": [
                    "For navigation use links instead",
                    "When the action is not immediately actionable",
                    "For decorative purposes"
                ],
                "best_practices": [
                    "Use clear, action-oriented labels",
                    "Maintain visual hierarchy with button types",
                    "Limit primary buttons to one per section",
                    "Group related buttons logically",
                    "Ensure sufficient spacing between buttons"
                ],
                "common_mistakes": [
                    "Using multiple primary buttons in the same area",
                    "Making button labels too vague",
                    "Not providing sufficient color contrast",
                    "Overusing destructive button styling"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Button Variants",
                    "code": "<button class=\"slds-button slds-button_neutral\">Neutral Button</button>\n      <button class=\"slds-button slds-button_brand\">Brand Button</button>\n      <button class=\"slds-button slds-button_destructive\">Destructive Button</button>\n"
                },
                {
                    "title": "Button with Icons",
                    "code": "<button class=\"slds-button slds-button_neutral\">\n      <svg class=\"slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>\n      </svg>\n      Download\n      </button>\n"
                },
                {
                    "title": "Icon Only Button",
                    "code": "<button class=\"slds-button slds-button_icon slds-button_icon-border\" aria-label=\"Settings\">\n      <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>\n      </svg>\n      </button>\n"
                },
                {
                    "title": "Stateful Button",
                    "code": "<button class=\"slds-button slds-button_icon slds-button_icon-border slds-is-selected\" aria-pressed=\"true\" aria-label=\"Like this item\">\n      <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#like\"></use>\n      </svg>\n      </button>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-button-brand-color-background",
                    "description": "Background color for brand buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-brand-color-background-hover",
                    "description": "Background color for brand buttons on hover",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-brand-color-background-active",
                    "description": "Background color for brand buttons when active",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-brand-color-border",
                    "description": "Border color for brand buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-brand-text-color",
                    "description": "Text color for brand buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-neutral-color-background",
                    "description": "Background color for neutral buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-neutral-color-background-hover",
                    "description": "Background color for neutral buttons on hover",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-neutral-color-background-active",
                    "description": "Background color for neutral buttons when active",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-neutral-color-border",
                    "description": "Border color for neutral buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-destructive-color-background",
                    "description": "Background color for destructive buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-destructive-color-background-hover",
                    "description": "Background color for destructive buttons on hover",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-destructive-color-border",
                    "description": "Border color for destructive buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-success-color-background",
                    "description": "Background color for success buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-success-color-background-hover",
                    "description": "Background color for success buttons on hover",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-success-color-border",
                    "description": "Border color for success buttons",
                    "category": "color"
                },
                {
                    "name": "--slds-c-button-spacing-inline",
                    "description": "Horizontal padding for buttons",
                    "category": "spacing"
                },
                {
                    "name": "--slds-c-button-font-weight",
                    "description": "Font weight for button text",
                    "category": "typography"
                },
                {
                    "name": "--slds-c-button-radius-border",
                    "description": "Border radius for buttons",
                    "category": "border"
                },
                {
                    "name": "--slds-c-button-sizing-border",
                    "description": "Border width for buttons",
                    "category": "sizing"
                }
            ],
            "dependencies": {
                "css_files": [
                    "buttons.css"
                ],
                "javascript": [],
                "icons": [
                    "utility-sprite.svg (for icon buttons)"
                ],
                "other_components": [
                    "button-groups",
                    "button-icons"
                ]
            },
            "related_components": [
                {
                    "name": "Button Groups",
                    "relationship": "container",
                    "description": "Groups multiple buttons together"
                },
                {
                    "name": "Button Icons",
                    "relationship": "variant",
                    "description": "Icon-only button implementations"
                },
                {
                    "name": "Menus",
                    "relationship": "trigger",
                    "description": "Buttons often trigger dropdown menus"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/buttons/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Cards",
            "description": "A foundational component that provides a structured container for related content with optional header, body, and footer sections.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-card",
                "elements": [
                    {
                        "class": "slds-card__header",
                        "description": "Header section of the card",
                        "purpose": "Contains title, actions, and header content"
                    },
                    {
                        "class": "slds-card__header-title",
                        "description": "Title container within card header",
                        "purpose": "Holds the main heading for the card"
                    },
                    {
                        "class": "slds-card__body",
                        "description": "Main content area of the card",
                        "purpose": "Contains the primary card content"
                    },
                    {
                        "class": "slds-card__footer",
                        "description": "Footer section of the card",
                        "purpose": "Contains actions, links, or supplementary information"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-card_boundary",
                        "description": "Card with border styling",
                        "usage": "Adds visible border to define card boundaries"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard card with header, body, and optional footer",
                    "classes": [
                        "slds-card"
                    ],
                    "usage_context": "Default card implementation for content grouping",
                    "differences": "Clean card structure with defined sections"
                }
            ],
            "lightning_component": {
                "name": "lightning-card",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-card",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS card blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through interactive elements within card",
                    "Focus management for embedded components"
                ],
                "screen_reader": [
                    "Card structure conveyed through semantic markup",
                    "Header, body, footer sections properly identified",
                    "Content hierarchy communicated clearly"
                ],
                "aria_attributes": [
                    "aria-labelledby for card titles",
                    "role='region' when card represents distinct content area",
                    "aria-describedby for additional card context"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To group related content together",
                    "For displaying data records or entities",
                    "When you need a structured content container",
                    "To create visual separation between content sections"
                ],
                "when_not_to_use": [
                    "For simple text content (use regular layout instead)",
                    "When content doesn't benefit from grouping",
                    "For navigation elements (use navigation components)"
                ],
                "best_practices": [
                    "Use descriptive titles in card headers",
                    "Group related content logically",
                    "Keep card content focused and concise",
                    "Use footer for actions related to the card content",
                    "Maintain consistent card sizing within collections"
                ],
                "common_mistakes": [
                    "Overloading cards with too much content",
                    "Using cards for single pieces of information",
                    "Inconsistent card styling within the same interface",
                    "Missing or unclear card titles"
                ]
            },
            "code_examples": [
                {
                    "title": "Complete Card",
                    "code": "<article class=\"slds-card\">\n      <div class=\"slds-card__header slds-grid\">\n        <header class=\"slds-media slds-media_center slds-has-flexi-truncate\">\n          <div class=\"slds-media__body\">\n            <h2 class=\"slds-card__header-title\">\n              <a href=\"#\" class=\"slds-card__header-link slds-truncate\" title=\"Accounts\">\n                <span>Accounts (1)</span>\n              </a>\n            </h2>\n          </div>\n        </header>\n      </div>\n      <div class=\"slds-card__body slds-card__body_inner\">\n        <p>Card body content goes here...</p>\n      </div>\n      <footer class=\"slds-card__footer\">\n        <a href=\"#\">View All</a>\n      </footer>\n      </article>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-card-color-background",
                    "description": "Background color for cards",
                    "category": "color"
                },
                {
                    "name": "--slds-c-card-color-border",
                    "description": "Border color for cards",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "card.css",
                    "media-objects.css",
                    "grid.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "media-objects",
                    "grid",
                    "truncate"
                ]
            },
            "related_components": [
                {
                    "name": "Tiles",
                    "relationship": "similar",
                    "description": "Alternative layout component for content grouping"
                },
                {
                    "name": "Panels",
                    "relationship": "similar",
                    "description": "Alternative container component"
                },
                {
                    "name": "Media Objects",
                    "relationship": "depends-on",
                    "description": "Often used within card headers"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/cards/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Carousel",
            "description": "A slideshow component that displays a series of content panels with navigation controls, allowing users to browse through multiple items in a contained space.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-carousel",
                "elements": [
                    {
                        "class": "slds-carousel__stage",
                        "description": "Main container for carousel content",
                        "purpose": "Holds the carousel panels and manages overflow"
                    },
                    {
                        "class": "slds-carousel__panels",
                        "description": "Container for all carousel panels",
                        "purpose": "Groups all slideable content panels"
                    },
                    {
                        "class": "slds-carousel__panel",
                        "description": "Individual carousel content panel",
                        "purpose": "Contains a single slide of content"
                    },
                    {
                        "class": "slds-carousel__panel-action",
                        "description": "Interactive element within panel",
                        "purpose": "Clickable area for panel interaction"
                    },
                    {
                        "class": "slds-carousel__indicators",
                        "description": "Navigation indicator container",
                        "purpose": "Holds dot indicators for carousel position"
                    },
                    {
                        "class": "slds-carousel__indicator",
                        "description": "Individual position indicator",
                        "purpose": "Shows and controls current carousel position"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active panel/indicator state",
                        "trigger": "Currently visible carousel panel"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard carousel with navigation controls",
                    "classes": [
                        "slds-carousel"
                    ],
                    "usage_context": "Default carousel for multiple content panels",
                    "differences": "Slideshow with navigation dots and arrow controls"
                }
            ],
            "lightning_component": {
                "name": "lightning-carousel",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-carousel",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS carousel blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus carousel navigation controls",
                    "Enter/Space to activate navigation",
                    "Arrow keys to navigate between panels",
                    "Tab to move through panel content"
                ],
                "screen_reader": [
                    "Carousel structure and current position announced",
                    "Panel content changes communicated",
                    "Navigation controls clearly identified",
                    "Total panel count and current position provided"
                ],
                "aria_attributes": [
                    "role='region' for carousel container",
                    "aria-label describing carousel purpose",
                    "aria-live='polite' for panel changes",
                    "aria-current for active panel indicator",
                    "role='tablist' for indicator navigation",
                    "role='tab' for individual indicators"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To display multiple related content items in limited space",
                    "For showcasing featured content or images",
                    "When users should browse through a collection",
                    "For onboarding or tutorial sequences"
                ],
                "when_not_to_use": [
                    "For critical information that must be seen",
                    "When all content should be immediately visible",
                    "For single items (use cards or other layouts)",
                    "When navigation between items is not meaningful"
                ],
                "best_practices": [
                    "Provide clear navigation controls",
                    "Include position indicators for context",
                    "Ensure content is meaningful in sequence",
                    "Handle auto-play responsibly (provide pause control)",
                    "Make panels keyboard accessible"
                ],
                "common_mistakes": [
                    "Auto-playing without user control",
                    "Poor navigation control visibility",
                    "Not indicating current position",
                    "Making panels too dense with information"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Carousel",
                    "code": "<div class=\"slds-carousel\">\n      <div class=\"slds-carousel__stage\">\n        <div class=\"slds-carousel__panels\">\n          <div id=\"panel-01\" class=\"slds-carousel__panel slds-is-active\" role=\"tabpanel\" aria-labelledby=\"indicator-01\">\n            <a href=\"#\" class=\"slds-carousel__panel-action slds-text-link_reset\">\n              <div class=\"slds-align_absolute-center\">\n                <h2 class=\"slds-text-heading_large\">Panel 1 Content</h2>\n              </div>\n            </a>\n          </div>\n          <div id=\"panel-02\" class=\"slds-carousel__panel\" role=\"tabpanel\" aria-labelledby=\"indicator-02\">\n            <a href=\"#\" class=\"slds-carousel__panel-action slds-text-link_reset\">\n              <div class=\"slds-align_absolute-center\">\n                <h2 class=\"slds-text-heading_large\">Panel 2 Content</h2>\n              </div>\n            </a>\n          </div>\n        </div>\n      </div>\n      <ul class=\"slds-carousel__indicators\" role=\"tablist\">\n        <li class=\"slds-carousel__indicator\" role=\"presentation\">\n          <a id=\"indicator-01\" class=\"slds-carousel__indicator-action slds-is-active\" href=\"#panel-01\" role=\"tab\" aria-controls=\"panel-01\" aria-selected=\"true\" tabindex=\"0\">\n            <span class=\"slds-assistive-text\">Panel 1</span>\n          </a>\n        </li>\n        <li class=\"slds-carousel__indicator\" role=\"presentation\">\n          <a id=\"indicator-02\" class=\"slds-carousel__indicator-action\" href=\"#panel-02\" role=\"tab\" aria-controls=\"panel-02\" aria-selected=\"false\" tabindex=\"-1\">\n            <span class=\"slds-assistive-text\">Panel 2</span>\n          </a>\n        </li>\n      </ul>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "carousel.css"
                ],
                "javascript": [
                    "carousel.js"
                ],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Tabs",
                    "relationship": "similar",
                    "description": "Similar panel switching concept"
                },
                {
                    "name": "Cards",
                    "relationship": "depends-on",
                    "description": "Often used as content within carousel panels"
                },
                {
                    "name": "Images",
                    "relationship": "depends-on",
                    "description": "Commonly used content type in carousels"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/carousel/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Chat",
            "description": "A component for displaying current or past chat sessions between customers and service agents. It appears as a chronological log with messages, events, and bookend markers to indicate session boundaries.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "slds-chat",
                "elements": [
                    {
                        "class": "slds-chat-list",
                        "description": "List container for chat items",
                        "purpose": "Holds the ordered list of chat messages and events"
                    },
                    {
                        "class": "slds-chat-listitem",
                        "description": "Individual item in the chat list",
                        "purpose": "Wraps each message, event, or bookend in the chat"
                    },
                    {
                        "class": "slds-chat-listitem_inbound",
                        "description": "Inbound message list item (customer to agent)",
                        "purpose": "Styles messages received from customer"
                    },
                    {
                        "class": "slds-chat-listitem_outbound",
                        "description": "Outbound message list item (agent to customer)",
                        "purpose": "Styles messages sent by agent, right-aligned"
                    },
                    {
                        "class": "slds-chat-listitem_bookend",
                        "description": "Bookend item marking session start/end",
                        "purpose": "Visual separator for chat session boundaries"
                    },
                    {
                        "class": "slds-chat-listitem_event",
                        "description": "Event item in chat log",
                        "purpose": "Displays system events like 'Agent joined'"
                    },
                    {
                        "class": "slds-chat-message",
                        "description": "Message container",
                        "purpose": "Wraps chat message content and metadata"
                    },
                    {
                        "class": "slds-chat-message__body",
                        "description": "Message body container",
                        "purpose": "Contains message text and avatar alignment"
                    },
                    {
                        "class": "slds-chat-message__text",
                        "description": "Message text content",
                        "purpose": "Displays the actual message content"
                    },
                    {
                        "class": "slds-chat-message_faux-avatar",
                        "description": "Faux avatar for alignment",
                        "purpose": "Aligns consecutive messages without showing duplicate avatars"
                    },
                    {
                        "class": "slds-chat-avatar",
                        "description": "Avatar element in chat",
                        "purpose": "Displays user avatar in chat messages"
                    },
                    {
                        "class": "slds-chat-icon",
                        "description": "Icon styling within chat",
                        "purpose": "Styles icons used in messages and events"
                    },
                    {
                        "class": "slds-chat-message__file",
                        "description": "File attachment in message",
                        "purpose": "Displays file attachments in chat"
                    },
                    {
                        "class": "slds-chat-message__image_loading",
                        "description": "Loading state for images",
                        "purpose": "Shows loading indicator for image attachments"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard chat log display",
                    "classes": [
                        "slds-chat"
                    ],
                    "usage_context": "Default chat implementation with messages and events",
                    "differences": "Chronological display with inbound and outbound messages"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically built with custom components for messaging platforms"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate through interactive elements",
                    "Screen reader reads messages in chronological order"
                ],
                "screen_reader": [
                    "role='log' on chat container",
                    "Messages announced as they appear",
                    "Sender identification announced",
                    "Timestamps and metadata announced"
                ],
                "aria_attributes": [
                    "role='log' on chat container",
                    "aria-label for chat region",
                    "aria-live for new messages (polite or assertive)",
                    "Sender and timestamp information accessible"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For customer service chat interfaces",
                    "To display chat history or transcripts",
                    "In messaging or communication features",
                    "For live or archived chat sessions"
                ],
                "when_not_to_use": [
                    "For comments or discussion threads",
                    "For simple message lists without conversation context",
                    "For email or notification displays",
                    "When real-time updates aren't needed"
                ],
                "best_practices": [
                    "Display messages in chronological order",
                    "Clearly differentiate inbound and outbound messages",
                    "Include timestamps for message context",
                    "Show sender identification (avatar and name)",
                    "Use bookends to mark session boundaries",
                    "Handle long messages with proper wrapping",
                    "Support file attachments and rich content"
                ],
                "common_mistakes": [
                    "Not distinguishing message direction clearly",
                    "Missing timestamps on messages",
                    "Poor handling of consecutive messages",
                    "Inadequate spacing between messages",
                    "Not marking session start/end clearly"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Chat Log",
                    "code": "<section class=\"slds-chat\" role=\"log\" aria-label=\"Chat conversation\">\n      <ul class=\"slds-chat-list\">\n        <li class=\"slds-chat-listitem slds-chat-listitem_bookend\">\n          <div class=\"slds-chat-bookend\">\n            <span class=\"slds-icon_container slds-icon-utility-chat slds-chat-icon\">\n              <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#chat\"></use>\n              </svg>\n            </span>\n            <p>Chat started</p>\n          </div>\n        </li>\n        <li class=\"slds-chat-listitem slds-chat-listitem_inbound\">\n          <div class=\"slds-chat-message\">\n            <span class=\"slds-avatar slds-avatar_circle slds-chat-avatar\">\n              <img src=\"/assets/images/avatar1.jpg\" alt=\"Customer\" />\n            </span>\n            <div class=\"slds-chat-message__body\">\n              <div class=\"slds-chat-message__text slds-chat-message__text_inbound\">\n                <span>Hello, I need help with my account</span>\n              </div>\n            </div>\n          </div>\n        </li>\n        <li class=\"slds-chat-listitem slds-chat-listitem_outbound\">\n          <div class=\"slds-chat-message\">\n            <div class=\"slds-chat-message__body\">\n              <div class=\"slds-chat-message__text slds-chat-message__text_outbound\">\n                <span>Hi! I'd be happy to help. What can I assist you with?</span>\n              </div>\n            </div>\n            <span class=\"slds-avatar slds-avatar_circle slds-chat-avatar\">\n              <img src=\"/assets/images/avatar2.jpg\" alt=\"Agent\" />\n            </span>\n          </div>\n        </li>\n        <li class=\"slds-chat-listitem slds-chat-listitem_bookend\">\n          <div class=\"slds-chat-bookend\">\n            <span class=\"slds-icon_container slds-icon-utility-end_chat slds-chat-icon\">\n              <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#end_chat\"></use>\n              </svg>\n            </span>\n            <p>Chat ended</p>\n          </div>\n        </li>\n      </ul>\n      </section>\n"
                },
                {
                    "title": "Chat with Events",
                    "code": "<section class=\"slds-chat\" role=\"log\" aria-label=\"Chat with events\">\n      <ul class=\"slds-chat-list\">\n        <li class=\"slds-chat-listitem slds-chat-listitem_event\">\n          <div class=\"slds-chat-event\">\n            <div class=\"slds-chat-event__body\">\n              <span class=\"slds-icon_container slds-icon-utility-user slds-chat-icon\">\n                <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#user\"></use>\n                </svg>\n              </span>\n              <p>Agent Sarah joined the chat</p>\n            </div>\n          </div>\n        </li>\n        <li class=\"slds-chat-listitem slds-chat-listitem_inbound\">\n          <div class=\"slds-chat-message\">\n            <span class=\"slds-avatar slds-avatar_circle slds-chat-avatar\">\n              <abbr class=\"slds-avatar__initials\" title=\"John Doe\">JD</abbr>\n            </span>\n            <div class=\"slds-chat-message__body\">\n              <div class=\"slds-chat-message__text slds-chat-message__text_inbound\">\n                <span>Can you help me reset my password?</span>\n              </div>\n              <div class=\"slds-chat-message__meta\" aria-label=\"10:30 AM\">10:30 AM</div>\n            </div>\n          </div>\n        </li>\n        <li class=\"slds-chat-listitem slds-chat-listitem_outbound\">\n          <div class=\"slds-chat-message\">\n            <div class=\"slds-chat-message__body\">\n              <div class=\"slds-chat-message__text slds-chat-message__text_outbound\">\n                <span>Of course! I'll send you a reset link.</span>\n              </div>\n              <div class=\"slds-chat-message__meta\" aria-label=\"10:31 AM\">10:31 AM</div>\n            </div>\n            <span class=\"slds-avatar slds-avatar_circle slds-chat-avatar\">\n              <abbr class=\"slds-avatar__initials\" title=\"Sarah Agent\">SA</abbr>\n            </span>\n          </div>\n        </li>\n      </ul>\n      </section>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "chat.css",
                    "avatar.css",
                    "icon.css"
                ],
                "javascript": [
                    "Message scrolling and auto-scroll to latest",
                    "Real-time message updates",
                    "Typing indicators"
                ],
                "icons": [
                    "utility:chat",
                    "utility:end_chat",
                    "utility:user"
                ],
                "other_components": [
                    "avatar",
                    "icon"
                ]
            },
            "related_components": [
                {
                    "name": "Activity Timeline",
                    "relationship": "similar",
                    "description": "Similar chronological display pattern"
                },
                {
                    "name": "Feed",
                    "relationship": "similar",
                    "description": "Alternative for activity streams"
                },
                {
                    "name": "Publisher",
                    "relationship": "complementary",
                    "description": "Input component for sending messages"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/chat/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Checkbox Button Group",
            "description": "A styled checkable input group that communicates if an option(s) are true, false or indeterminate. A set of checkbox buttons wrapped in a fieldset that is also a form element.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-checkbox_button-group",
                "elements": [
                    {
                        "class": "slds-checkbox_button",
                        "description": "Individual checkbox button within the group",
                        "purpose": "Container for each checkbox option in the button group"
                    },
                    {
                        "class": "slds-checkbox_faux",
                        "description": "Visual checkbox replacement styled as a button",
                        "purpose": "Custom-styled checkbox appearance that looks like a button"
                    },
                    {
                        "class": "slds-checkbox_button__label",
                        "description": "Label element for the checkbox button",
                        "purpose": "Provides clickable area and contains the checkbox faux element"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling for the form element",
                        "trigger": "When checkbox group validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When checkbox group is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard checkbox button group",
                    "classes": [
                        "slds-checkbox_button-group"
                    ],
                    "usage_context": "Default checkbox button group implementation",
                    "differences": "Group of checkbox buttons with shared border and styling"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - use checkbox-button components in a group"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between checkbox buttons",
                    "Space to toggle checkbox state",
                    "Arrow keys may navigate between options in some implementations"
                ],
                "screen_reader": [
                    "Fieldset legend announced as group label",
                    "Checkbox state announced (checked/unchecked)",
                    "Label text read with each checkbox",
                    "Error messages associated and announced"
                ],
                "aria_attributes": [
                    "aria-describedby for error messages",
                    "aria-invalid when validation fails",
                    "aria-required for required checkbox groups",
                    "fieldset and legend for group semantics"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When users need to select multiple options from a related set",
                    "For compact selection interfaces where button styling is preferred",
                    "When options are closely related and benefit from visual grouping",
                    "For scheduling, filtering, or multi-select scenarios"
                ],
                "when_not_to_use": [
                    "For mutually exclusive options (use radio button group instead)",
                    "When only one option can be selected",
                    "For simple binary choices (use single checkbox)",
                    "When space is very limited (consider dropdown instead)"
                ],
                "best_practices": [
                    "Use clear, descriptive legend text for the group",
                    "Keep option labels short and concise",
                    "Group related options logically",
                    "Provide immediate visual feedback for selections",
                    "Ensure adequate touch target size for mobile",
                    "Use error states to indicate validation issues"
                ],
                "common_mistakes": [
                    "Using checkbox button group for mutually exclusive options",
                    "Making labels too long or unclear",
                    "Not providing proper fieldset/legend structure",
                    "Missing error state handling",
                    "Inadequate spacing between buttons"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Checkbox Button Group",
                    "code": "<fieldset class=\"slds-form-element\">\n  <legend class=\"slds-form-element__legend slds-form-element__label\">\n    Scheduled Day(s)\n  </legend>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-checkbox_button-group\">\n      <span class=\"slds-button slds-checkbox_button\">\n        <input type=\"checkbox\" name=\"checkbox\" id=\"checkbox-monday\" value=\"monday\" />\n        <label class=\"slds-checkbox_button__label\" for=\"checkbox-monday\">\n          <span class=\"slds-checkbox_faux\">Monday</span>\n        </label>\n      </span>\n      <span class=\"slds-button slds-checkbox_button\">\n        <input type=\"checkbox\" name=\"checkbox\" id=\"checkbox-tuesday\" value=\"tuesday\" />\n        <label class=\"slds-checkbox_button__label\" for=\"checkbox-tuesday\">\n          <span class=\"slds-checkbox_faux\">Tuesday</span>\n        </label>\n      </span>\n      <span class=\"slds-button slds-checkbox_button\">\n        <input type=\"checkbox\" name=\"checkbox\" id=\"checkbox-wednesday\" value=\"wednesday\" />\n        <label class=\"slds-checkbox_button__label\" for=\"checkbox-wednesday\">\n          <span class=\"slds-checkbox_faux\">Wednesday</span>\n        </label>\n      </span>\n    </div>\n  </div>\n</fieldset>\n",
                    "description": "Basic checkbox button group with three day options"
                },
                {
                    "title": "Checkbox Button Group with Error State",
                    "code": "<fieldset class=\"slds-form-element slds-has-error\">\n  <legend class=\"slds-form-element__legend slds-form-element__label\">\n    Select at least one option\n  </legend>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-checkbox_button-group\">\n      <span class=\"slds-button slds-checkbox_button\">\n        <input type=\"checkbox\" name=\"checkbox\" id=\"checkbox-error-1\" value=\"option1\" aria-describedby=\"checkbox-error-message\" />\n        <label class=\"slds-checkbox_button__label\" for=\"checkbox-error-1\">\n          <span class=\"slds-checkbox_faux\">Option 1</span>\n        </label>\n      </span>\n      <span class=\"slds-button slds-checkbox_button\">\n        <input type=\"checkbox\" name=\"checkbox\" id=\"checkbox-error-2\" value=\"option2\" />\n        <label class=\"slds-checkbox_button__label\" for=\"checkbox-error-2\">\n          <span class=\"slds-checkbox_faux\">Option 2</span>\n        </label>\n      </span>\n    </div>\n  </div>\n  <div id=\"checkbox-error-message\" class=\"slds-form-element__help\">This field is required</div>\n</fieldset>\n",
                    "description": "Checkbox button group with error state and validation message"
                },
                {
                    "title": "Disabled Checkbox Button Group",
                    "code": "<fieldset class=\"slds-form-element\">\n  <legend class=\"slds-form-element__legend slds-form-element__label\">\n    Disabled Options\n  </legend>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-checkbox_button-group\">\n      <span class=\"slds-button slds-checkbox_button\">\n        <input type=\"checkbox\" name=\"checkbox\" id=\"checkbox-disabled-1\" value=\"option1\" disabled />\n        <label class=\"slds-checkbox_button__label\" for=\"checkbox-disabled-1\">\n          <span class=\"slds-checkbox_faux\">Disabled Option 1</span>\n        </label>\n      </span>\n      <span class=\"slds-button slds-checkbox_button\">\n        <input type=\"checkbox\" name=\"checkbox\" id=\"checkbox-disabled-2\" value=\"option2\" disabled checked />\n        <label class=\"slds-checkbox_button__label\" for=\"checkbox-disabled-2\">\n          <span class=\"slds-checkbox_faux\">Disabled Option 2 (Checked)</span>\n        </label>\n      </span>\n    </div>\n  </div>\n</fieldset>\n",
                    "description": "Checkbox button group with disabled state options"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "checkbox-button-group.css",
                    "form-element.css",
                    "checkbox-button.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element",
                    "checkbox-button"
                ]
            },
            "related_components": [
                {
                    "name": "Checkbox Button",
                    "relationship": "similar",
                    "description": "Individual checkbox buttons that make up the group"
                },
                {
                    "name": "Radio Button Group",
                    "relationship": "alternative",
                    "description": "For mutually exclusive options"
                },
                {
                    "name": "Checkbox",
                    "relationship": "similar",
                    "description": "Standard checkbox input for single selections"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox-button-group/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/checkbox-button-group/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-01-15",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations"
            }
        },
        {
            "name": "Checkbox Button",
            "description": "A checkbox input styled as a button that allows users to toggle selection states, providing an alternative visual presentation to traditional checkboxes with enhanced interaction design.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-checkbox_button",
                "elements": [
                    {
                        "class": "slds-checkbox_button-group",
                        "description": "Container for checkbox button groups",
                        "purpose": "Groups related checkbox buttons"
                    },
                    {
                        "class": "slds-checkbox_button",
                        "description": "Checkbox button wrapper",
                        "purpose": "Contains checkbox input and label styling"
                    },
                    {
                        "class": "slds-checkbox_button__label",
                        "description": "Checkbox button label",
                        "purpose": "Provides the button appearance and text"
                    },
                    {
                        "class": "slds-checkbox_faux",
                        "description": "Visual checkbox indicator",
                        "purpose": "Button-styled visual representation"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected checkbox button state",
                        "trigger": "Applied when checkbox is checked"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focused checkbox button state",
                        "trigger": "Applied when checkbox button has focus"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled checkbox button state",
                        "trigger": "Applied when checkbox is disabled"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard checkbox button",
                    "classes": [
                        "slds-checkbox_button"
                    ],
                    "usage_context": "Default implementation for button-style checkboxes",
                    "differences": "Basic button-styled checkbox with standard sizing"
                },
                {
                    "name": "Group",
                    "description": "Multiple checkbox buttons in a group",
                    "classes": [
                        "slds-checkbox_button-group"
                    ],
                    "usage_context": "When multiple related checkbox buttons are used together",
                    "differences": "Grouped layout with consistent spacing and alignment"
                },
                {
                    "name": "Stretch",
                    "description": "Full-width checkbox button",
                    "classes": [
                        "slds-checkbox_button"
                    ],
                    "usage_context": "When button should fill container width",
                    "differences": "Button stretches to full container width"
                }
            ],
            "lightning_component": {
                "name": "lightning-checkbox-button",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "Checkbox button functionality often implemented through lightning-checkbox-group or custom implementations"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation to checkbox buttons",
                    "Space to toggle checkbox selection",
                    "Arrow keys for group navigation",
                    "Enter to activate checkbox button"
                ],
                "screen_reader": [
                    "Checkbox button state clearly announced",
                    "Selection changes communicated",
                    "Group relationships described"
                ],
                "aria_attributes": [
                    "aria-checked for checkbox state",
                    "aria-describedby for additional information",
                    "aria-labelledby for group labeling",
                    "role='checkbox' for button checkboxes"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When checkbox needs button-like appearance",
                    "For toggle selections that benefit from button styling",
                    "In interfaces where buttons provide better UX than checkboxes",
                    "For multi-select options with prominent visual treatment"
                ],
                "when_not_to_use": [
                    "For single yes/no decisions (use radio buttons)",
                    "When traditional checkbox styling is more appropriate",
                    "For simple form inputs without special styling needs"
                ],
                "best_practices": [
                    "Provide clear visual feedback for selection states",
                    "Use consistent sizing within groups",
                    "Ensure adequate touch targets for mobile",
                    "Group related checkbox buttons logically",
                    "Maintain keyboard accessibility"
                ],
                "common_mistakes": [
                    "Using checkbox buttons for mutually exclusive options",
                    "Poor visual distinction between selected/unselected states",
                    "Inconsistent button sizing within groups",
                    "Missing keyboard accessibility"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Checkbox Button",
                    "description": "Single checkbox styled as a button",
                    "code": "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Select Options</label>\n      <div class=\"slds-form-element__control\">\n        <span class=\"slds-checkbox_button\">\n          <input type=\"checkbox\" id=\"checkbox-button-01\" value=\"option1\" />\n          <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-01\">\n            <span class=\"slds-checkbox_faux\">Option 1</span>\n          </label>\n        </span>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Checkbox Button Group",
                    "description": "Multiple checkbox buttons grouped together",
                    "code": "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\">\n        Choose Your Interests\n      </legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\" role=\"group\" aria-labelledby=\"checkbox-group-label\">\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-02\" name=\"interests\" value=\"technology\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-02\">\n              <span class=\"slds-checkbox_faux\">Technology</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-03\" name=\"interests\" value=\"sports\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-03\">\n              <span class=\"slds-checkbox_faux\">Sports</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-04\" name=\"interests\" value=\"music\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-04\">\n              <span class=\"slds-checkbox_faux\">Music</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-05\" name=\"interests\" value=\"travel\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-05\">\n              <span class=\"slds-checkbox_faux\">Travel</span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </fieldset>\n"
                },
                {
                    "title": "Stretch Checkbox Buttons",
                    "description": "Full-width checkbox buttons for mobile or constrained layouts",
                    "code": "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Notification Preferences</label>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-06\" name=\"notifications\" value=\"email\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-06\">\n              <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#email\"></use>\n                </svg>\n                Email Notifications\n              </span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-07\" name=\"notifications\" value=\"sms\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-07\">\n              <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#sms\"></use>\n                </svg>\n                SMS Notifications\n              </span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-08\" name=\"notifications\" value=\"push\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-08\">\n              <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#notification\"></use>\n                </svg>\n                Push Notifications\n              </span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Compact Checkbox Buttons",
                    "description": "Compact checkbox buttons for limited space",
                    "code": "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Quick Filters</label>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-09\" name=\"filters\" value=\"active\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-09\">\n              <span class=\"slds-checkbox_faux\">Active</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-10\" name=\"filters\" value=\"pending\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-10\">\n              <span class=\"slds-checkbox_faux\">Pending</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-11\" name=\"filters\" value=\"closed\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-11\">\n              <span class=\"slds-checkbox_faux\">Closed</span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Disabled Checkbox Button",
                    "description": "Checkbox button in disabled state",
                    "code": "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Available Options</label>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-12\" name=\"options\" value=\"basic\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-12\">\n              <span class=\"slds-checkbox_faux\">Basic Plan</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-13\" name=\"options\" value=\"premium\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-13\">\n              <span class=\"slds-checkbox_faux\">Premium Plan</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button slds-is-disabled\">\n            <input type=\"checkbox\" id=\"checkbox-button-14\" name=\"options\" value=\"enterprise\" disabled />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-14\">\n              <span class=\"slds-checkbox_faux\">Enterprise Plan (Coming Soon)</span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Checkbox Buttons with Description",
                    "description": "Checkbox buttons with additional descriptive text",
                    "code": "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\">\n        Select Features\n      </legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-15\" name=\"features\" value=\"analytics\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-15\">\n              <span class=\"slds-checkbox_faux\">\n                <div class=\"slds-text-align_left\">\n                  <div class=\"slds-text-body_regular\">Advanced Analytics</div>\n                  <div class=\"slds-text-body_small slds-text-color_weak\">\n                    Detailed reporting and insights\n                  </div>\n                </div>\n              </span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-16\" name=\"features\" value=\"api\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-16\">\n              <span class=\"slds-checkbox_faux\">\n                <div class=\"slds-text-align_left\">\n                  <div class=\"slds-text-body_regular\">API Access</div>\n                  <div class=\"slds-text-body_small slds-text-color_weak\">\n                    Integrate with external systems\n                  </div>\n                </div>\n              </span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </fieldset>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "checkbox-button.css",
                    "form-element.css"
                ],
                "javascript": [
                    "checkbox-button.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "form-element",
                    "checkbox"
                ]
            },
            "related_components": [
                {
                    "name": "Checkbox",
                    "relationship": "alternative",
                    "description": "Traditional checkbox alternative"
                },
                {
                    "name": "Radio Button Group",
                    "relationship": "similar",
                    "description": "Similar grouped selection concept"
                },
                {
                    "name": "Button Group",
                    "relationship": "similar",
                    "description": "Similar button grouping layout"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox-button/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Checkbox Toggle",
            "description": "A checkable input that communicates if an option is true, false or indeterminate. A toggle-style checkbox that provides a visual switch interface for binary choices.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-checkbox_toggle",
                "elements": [
                    {
                        "class": "slds-checkbox_faux",
                        "description": "Visual toggle switch element",
                        "purpose": "Custom-styled toggle switch appearance that replaces the native checkbox"
                    },
                    {
                        "class": "slds-checkbox_faux_container",
                        "description": "Container for the faux checkbox element and text labels",
                        "purpose": "Wraps the toggle switch and provides structure for on/off text"
                    },
                    {
                        "class": "slds-checkbox_off",
                        "description": "Container for text shown when toggle is off",
                        "purpose": "Displays text when checkbox is unchecked"
                    },
                    {
                        "class": "slds-checkbox_on",
                        "description": "Container for text shown when toggle is on",
                        "purpose": "Displays text when checkbox is checked"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When checkbox toggle is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard checkbox toggle",
                    "classes": [
                        "slds-checkbox_toggle"
                    ],
                    "usage_context": "Default checkbox toggle implementation",
                    "differences": "Toggle switch with optional on/off text labels"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - use custom implementation with SLDS classes"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the checkbox toggle",
                    "Space to toggle checkbox state",
                    "Enter may toggle in some contexts"
                ],
                "screen_reader": [
                    "Checkbox state announced (checked/unchecked)",
                    "Label text read with the checkbox",
                    "Required state announced when applicable",
                    "Error messages associated and announced"
                ],
                "aria_attributes": [
                    "aria-describedby for error messages",
                    "aria-invalid when validation fails",
                    "aria-required for required checkboxes",
                    "aria-checked for state indication",
                    "fieldset and legend for grouped toggles"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For binary choices where toggle switch UI is preferred",
                    "When you want a more visual, switch-like interface",
                    "For settings, preferences, or feature toggles",
                    "When space allows for the toggle switch design"
                ],
                "when_not_to_use": [
                    "For mutually exclusive options (use radio buttons)",
                    "When multiple options can be selected (use checkboxes)",
                    "In very constrained spaces (use standard checkbox)",
                    "For actions (use buttons instead)"
                ],
                "best_practices": [
                    "Use clear, descriptive labels",
                    "Provide on/off text labels when helpful",
                    "Use fieldset and legend for grouped toggles",
                    "Ensure adequate touch target size for mobile",
                    "Provide immediate visual feedback for state changes",
                    "Use consistent toggle styling throughout the interface"
                ],
                "common_mistakes": [
                    "Using toggles for mutually exclusive options",
                    "Making labels too long or unclear",
                    "Not providing proper fieldset/legend structure for groups",
                    "Missing required state indicators",
                    "Inadequate spacing or touch targets"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Checkbox Toggle",
                    "code": "<div class=\"slds-form-element\">\n      <div class=\"slds-form-element__control\">\n        <label class=\"slds-checkbox_toggle slds-grid\">\n          <input type=\"checkbox\" name=\"checkbox-toggle\" id=\"toggle-1\" />\n          <span class=\"slds-checkbox_faux_container\" aria-live=\"polite\">\n            <span class=\"slds-checkbox_faux\"></span>\n            <span class=\"slds-checkbox_off\">Off</span>\n            <span class=\"slds-checkbox_on\">On</span>\n          </span>\n          <span class=\"slds-form-element__label\">Toggle this setting</span>\n        </label>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Checkbox Toggle Checked State",
                    "code": "<div class=\"slds-form-element\">\n      <div class=\"slds-form-element__control\">\n        <label class=\"slds-checkbox_toggle slds-grid\">\n          <input type=\"checkbox\" name=\"checkbox-toggle\" id=\"toggle-2\" checked />\n          <span class=\"slds-checkbox_faux_container\" aria-live=\"polite\">\n            <span class=\"slds-checkbox_faux\"></span>\n            <span class=\"slds-checkbox_off\">Off</span>\n            <span class=\"slds-checkbox_on\">On</span>\n          </span>\n          <span class=\"slds-form-element__label\">Toggle enabled</span>\n        </label>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Disabled Checkbox Toggle",
                    "code": "<div class=\"slds-form-element\">\n      <div class=\"slds-form-element__control\">\n        <label class=\"slds-checkbox_toggle slds-grid\">\n          <input type=\"checkbox\" name=\"checkbox-toggle\" id=\"toggle-3\" disabled />\n          <span class=\"slds-checkbox_faux_container\" aria-live=\"polite\">\n            <span class=\"slds-checkbox_faux\"></span>\n            <span class=\"slds-checkbox_off\">Off</span>\n            <span class=\"slds-checkbox_on\">On</span>\n          </span>\n          <span class=\"slds-form-element__label\">Disabled toggle</span>\n        </label>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-checkbox-toggle-color-border",
                    "description": "Border color for the toggle switch",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-color-border-hover",
                    "description": "Border color for the toggle switch on hover",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-color-background",
                    "description": "Background color for the toggle switch",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-color-background-hover",
                    "description": "Hover background color for the toggle switch",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-color-background-checked-focus",
                    "description": "Background color when toggle is checked and focused",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-switch-color-background",
                    "description": "Background color for the toggle switch slider/knob",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-switch-color-background-checked",
                    "description": "Background color for the toggle switch slider/knob when checked",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-mark-color-foreground",
                    "description": "Foreground color for the checkmark when toggle is checked",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-toggle-radius-border",
                    "description": "Border radius for the toggle switch (pill shape)",
                    "category": "border"
                },
                {
                    "name": "--slds-c-checkbox-toggle-shadow",
                    "description": "Box shadow for the toggle switch",
                    "category": "shadow"
                }
            ],
            "dependencies": {
                "css_files": [
                    "checkbox-toggle.css",
                    "form-element.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Checkbox",
                    "relationship": "alternative",
                    "description": "Standard checkbox for binary choices"
                },
                {
                    "name": "Toggle",
                    "relationship": "similar",
                    "description": "Alternative toggle-style input control"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox-toggle/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/checkbox-toggle/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Includes comprehensive styling hooks from SCSS annotations. Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Checkbox",
            "description": "An input control that allows users to select one or more options from a set, providing binary choice selection with clear visual feedback.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-checkbox",
                "elements": [
                    {
                        "class": "slds-checkbox__label",
                        "description": "Label element for the checkbox",
                        "purpose": "Provides clickable area and describes the option"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling",
                        "trigger": "When checkbox validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When checkbox is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard checkbox input",
                    "classes": [
                        "slds-checkbox"
                    ],
                    "usage_context": "Default checkbox implementation",
                    "differences": "Standard checkbox with label and custom styling"
                }
            ],
            "lightning_component": {
                "name": "lightning-input (type='checkbox')",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input",
                "mapping_notes": "Mapped through lightning-input with type='checkbox'"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the checkbox",
                    "Space to toggle checkbox state",
                    "Enter may toggle in some contexts"
                ],
                "screen_reader": [
                    "Checkbox state announced (checked/unchecked)",
                    "Label text read with the checkbox",
                    "Error messages associated and announced"
                ],
                "aria_attributes": [
                    "aria-describedby for error messages",
                    "aria-invalid when validation fails",
                    "aria-required for required checkboxes"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For binary choices (yes/no, true/false)",
                    "When users can select multiple options",
                    "For toggling features or settings",
                    "In forms where multiple selections are allowed"
                ],
                "when_not_to_use": [
                    "For mutually exclusive options (use radio buttons)",
                    "When only one option can be selected",
                    "For actions (use buttons instead)"
                ],
                "best_practices": [
                    "Use clear, descriptive labels",
                    "Group related checkboxes logically",
                    "Provide immediate feedback for state changes",
                    "Use consistent checkbox styling throughout the interface",
                    "Ensure adequate touch target size"
                ],
                "common_mistakes": [
                    "Using checkboxes for mutually exclusive options",
                    "Making labels too long or unclear",
                    "Not providing feedback for state changes",
                    "Using checkboxes for actions instead of selections"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Checkbox",
                    "code": "<div class=\"slds-form-element\">\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox\">\n          <input type=\"checkbox\" name=\"options\" id=\"checkbox-1\" value=\"option1\" />\n          <label class=\"slds-checkbox__label\" for=\"checkbox-1\">\n            <span class=\"\"></span>\n            <span class=\"slds-form-element__label\">Accept terms and conditions</span>\n          </label>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Checkbox with Error",
                    "code": "<div class=\"slds-form-element slds-has-error\">\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox\">\n          <input type=\"checkbox\" name=\"options\" id=\"checkbox-error\" value=\"option1\" aria-describedby=\"checkbox-error-message\" />\n          <label class=\"slds-checkbox__label\" for=\"checkbox-error\">\n            <span class=\"\"></span>\n            <span class=\"slds-form-element__label\">Required checkbox</span>\n          </label>\n        </div>\n      </div>\n      <div id=\"checkbox-error-message\" class=\"slds-form-element__help\">This field is required</div>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-checkbox-color-background",
                    "description": "Background color for checkbox",
                    "category": "color"
                },
                {
                    "name": "--slds-c-checkbox-color-border",
                    "description": "Border color for checkbox",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "checkbox.css",
                    "form-element.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Radio Group",
                    "relationship": "alternative",
                    "description": "For mutually exclusive options"
                },
                {
                    "name": "Checkbox Group",
                    "relationship": "container",
                    "description": "Multiple checkboxes grouped together"
                },
                {
                    "name": "Toggle",
                    "relationship": "similar",
                    "description": "Alternative binary input control"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Color Picker",
            "description": "A fully featured color selection component that provides both predefined color swatches and a custom color picker with hue, saturation, and brightness controls. Allows users to select colors visually or input hex values.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "slds-color-picker",
                "elements": [
                    {
                        "class": "slds-color-picker__summary-label",
                        "description": "Label for the color summary input",
                        "purpose": "Provides accessible label for color input"
                    },
                    {
                        "class": "slds-color-picker__summary-button",
                        "description": "Button that toggles the color picker selector",
                        "purpose": "Opens/closes the color selection popover"
                    },
                    {
                        "class": "slds-color-picker__summary-input",
                        "description": "Input field showing hex color value",
                        "purpose": "Displays and accepts hex color input"
                    },
                    {
                        "class": "slds-color-picker__selector",
                        "description": "Selector popover component",
                        "purpose": "Container for swatches and custom picker"
                    },
                    {
                        "class": "slds-color-picker__swatches",
                        "description": "Container for color swatches",
                        "purpose": "Holds predefined color options"
                    },
                    {
                        "class": "slds-color-picker__swatch",
                        "description": "Individual color swatch",
                        "purpose": "Displays clickable color option"
                    },
                    {
                        "class": "slds-color-picker__swatch-trigger",
                        "description": "Trigger button for swatch selection",
                        "purpose": "Interactive element for swatch clicks"
                    },
                    {
                        "class": "slds-color-picker__custom",
                        "description": "Custom color picker container",
                        "purpose": "Holds custom color selection controls"
                    },
                    {
                        "class": "slds-color-picker__custom-range",
                        "description": "Custom color range selector",
                        "purpose": "2D selector for saturation and brightness"
                    },
                    {
                        "class": "slds-color-picker__range-indicator",
                        "description": "Indicator for range position",
                        "purpose": "Shows selected point in color range"
                    },
                    {
                        "class": "slds-color-picker__hue-and-preview",
                        "description": "Container for hue slider and preview",
                        "purpose": "Groups hue control with color preview"
                    },
                    {
                        "class": "slds-color-picker__hue-slider",
                        "description": "Slider for hue selection",
                        "purpose": "Controls the color hue value"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Open state for color picker popover",
                        "trigger": "When color picker selector is visible"
                    },
                    {
                        "class": "slds-is-selected",
                        "description": "Selected state for swatch",
                        "trigger": "When swatch is currently selected color"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Full color picker with swatches and custom selector",
                    "classes": [
                        "slds-color-picker"
                    ],
                    "usage_context": "Default color picker implementation",
                    "differences": "Complete color selection interface"
                }
            ],
            "lightning_component": {
                "name": "lightning-input",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input",
                "mapping_notes": "lightning-input with type='color' provides basic color picker, but not as fully featured as SLDS color-picker"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between swatches and controls",
                    "Arrow keys to move through swatch grid",
                    "Enter or Space to select swatch",
                    "Arrow keys to adjust hue slider",
                    "Escape to close picker"
                ],
                "screen_reader": [
                    "Color picker role announced",
                    "Selected color value announced",
                    "Swatch colors announced",
                    "Slider values announced"
                ],
                "aria_attributes": [
                    "role='listbox' on swatches container",
                    "role='option' on individual swatches",
                    "aria-label with color name/hex value",
                    "aria-selected on active swatch",
                    "aria-valuemin, aria-valuemax, aria-valuenow on sliders"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For selecting brand or theme colors",
                    "When users need to customize colors",
                    "For design or customization features",
                    "When both preset and custom colors are needed"
                ],
                "when_not_to_use": [
                    "For simple binary color choices (use toggle)",
                    "When only preset colors are needed (use swatch selector)",
                    "For system-level color settings",
                    "When color input is too complex for users"
                ],
                "best_practices": [
                    "Provide common color swatches for quick selection",
                    "Allow hex value input for precision",
                    "Show color preview clearly",
                    "Include accessibility contrast indicators",
                    "Group related colors in swatches",
                    "Provide named color options when possible"
                ],
                "common_mistakes": [
                    "Too many swatch options overwhelming users",
                    "Missing hex input option",
                    "Poor contrast in color preview",
                    "Not showing selected color clearly",
                    "Inadequate keyboard navigation"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Color Picker",
                    "code": "<div class=\"slds-color-picker\">\n      <div class=\"\">\n        <label class=\"slds-color-picker__summary-label\" for=\"color-picker-summary-input\">\n          Choose Color\n        </label>\n        <button class=\"slds-button slds-color-picker__summary-button slds-button_icon slds-button_icon-more\" aria-haspopup=\"dialog\">\n          <span class=\"slds-swatch\" style=\"background: rgb(0, 112, 210);\">\n            <span class=\"slds-assistive-text\">Selected color: #0070D2</span>\n          </span>\n          <svg class=\"slds-button__icon slds-button__icon_small\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Choose a color</span>\n        </button>\n        <input type=\"text\" id=\"color-picker-summary-input\" class=\"slds-input slds-color-picker__summary-input\" value=\"#0070D2\" />\n      </div>\n      <section class=\"slds-popover slds-color-picker__selector slds-hide\" role=\"dialog\" aria-label=\"Choose a color\">\n        <div class=\"slds-popover__body\">\n          <div class=\"slds-color-picker__swatches\">\n            <fieldset>\n              <legend class=\"slds-assistive-text\">Preset colors</legend>\n              <ul class=\"\" role=\"listbox\">\n                <li role=\"presentation\">\n                  <button class=\"slds-swatch\" role=\"option\" aria-selected=\"true\" style=\"background: rgb(0, 112, 210);\">\n                    <span class=\"slds-assistive-text\">#0070D2</span>\n                  </button>\n                </li>\n                <li role=\"presentation\">\n                  <button class=\"slds-swatch\" role=\"option\" style=\"background: rgb(255, 154, 60);\">\n                    <span class=\"slds-assistive-text\">#FF9A3C</span>\n                  </button>\n                </li>\n                <li role=\"presentation\">\n                  <button class=\"slds-swatch\" role=\"option\" style=\"background: rgb(4, 132, 75);\">\n                    <span class=\"slds-assistive-text\">#04844B</span>\n                  </button>\n                </li>\n              </ul>\n            </fieldset>\n          </div>\n          <div class=\"slds-color-picker__custom\">\n            <p class=\"slds-assistive-text\" id=\"color-picker-instructions\">\n              Use arrow keys to select saturation and brightness, on an x and y axis.\n            </p>\n            <div class=\"slds-color-picker__custom-range\" style=\"background: rgb(0, 112, 210);\">\n              <a class=\"slds-color-picker__range-indicator\" href=\"#\" aria-live=\"assertive\" aria-atomic=\"true\" aria-describedby=\"color-picker-instructions\">\n                <span class=\"slds-assistive-text\">Saturation: 100%. Brightness: 50%.</span>\n              </a>\n            </div>\n          </div>\n        </div>\n        <footer class=\"slds-popover__footer\">\n          <button class=\"slds-button slds-button_neutral\">Cancel</button>\n          <button class=\"slds-button slds-button_brand\">Done</button>\n        </footer>\n      </section>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "color-picker.css",
                    "popover.css",
                    "swatch.css",
                    "button.css"
                ],
                "javascript": [
                    "Color picker open/close",
                    "Swatch selection",
                    "Custom color range interaction",
                    "Hue slider management",
                    "Hex value validation"
                ],
                "icons": [
                    "utility:down"
                ],
                "other_components": [
                    "popover",
                    "button",
                    "input"
                ]
            },
            "related_components": [
                {
                    "name": "Swatch",
                    "relationship": "contains",
                    "description": "Color swatch display element"
                },
                {
                    "name": "Popover",
                    "relationship": "container",
                    "description": "Popover for color selector"
                },
                {
                    "name": "Slider",
                    "relationship": "similar",
                    "description": "Similar range input pattern"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/color-picker/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Combobox",
            "description": "A composite input control that combines a text input with a dropdown list, allowing users to either type or select from predefined options.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-combobox_container",
                "elements": [
                    {
                        "class": "slds-combobox",
                        "description": "Main combobox wrapper",
                        "purpose": "Contains the input and dropdown components"
                    },
                    {
                        "class": "slds-combobox__form-element",
                        "description": "Form element wrapper for the input",
                        "purpose": "Provides form styling and structure"
                    },
                    {
                        "class": "slds-combobox__input",
                        "description": "Text input element",
                        "purpose": "Allows typing and displays selected value"
                    },
                    {
                        "class": "slds-combobox__input-entity-icon",
                        "description": "Icon for the selected entity",
                        "purpose": "Visual indicator for selected item type"
                    },
                    {
                        "class": "slds-listbox",
                        "description": "Dropdown list container",
                        "purpose": "Contains the selectable options"
                    },
                    {
                        "class": "slds-listbox__option",
                        "description": "Individual option in the dropdown",
                        "purpose": "Represents a selectable item"
                    },
                    {
                        "class": "slds-listbox__option-meta",
                        "description": "Additional metadata for an option",
                        "purpose": "Contains supplementary option information"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-is-open",
                        "description": "Open state for the dropdown",
                        "usage": "When the dropdown list is visible"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focus state styling",
                        "usage": "When the combobox has keyboard focus"
                    }
                ],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling",
                        "trigger": "When combobox validation fails"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard combobox with dropdown options",
                    "classes": [
                        "slds-combobox_container"
                    ],
                    "usage_context": "Default combobox implementation",
                    "differences": "Text input with dropdown list of options"
                }
            ],
            "lightning_component": {
                "name": "lightning-combobox",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS combobox blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the combobox",
                    "Arrow keys to navigate dropdown options",
                    "Enter to select highlighted option",
                    "Escape to close dropdown",
                    "Type to filter options"
                ],
                "screen_reader": [
                    "Combobox role and state announced",
                    "Option count and current selection announced",
                    "Filtered results communicated"
                ],
                "aria_attributes": [
                    "role='combobox' on input element",
                    "aria-expanded to indicate dropdown state",
                    "aria-activedescendant for current option",
                    "aria-autocomplete for input behavior",
                    "role='listbox' for dropdown container",
                    "role='option' for individual items"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When users need to select from a large list of options",
                    "For autocomplete or search functionality",
                    "When typing to filter is beneficial",
                    "For lookups and entity selection"
                ],
                "when_not_to_use": [
                    "For small, fixed lists (use select instead)",
                    "When only pre-defined options are allowed (use select)",
                    "For binary choices (use checkbox or radio)"
                ],
                "best_practices": [
                    "Provide helpful placeholder text",
                    "Show option count when filtering",
                    "Include clear visual feedback for selection",
                    "Handle empty states gracefully",
                    "Support keyboard navigation completely"
                ],
                "common_mistakes": [
                    "Not providing keyboard navigation",
                    "Unclear filtering behavior",
                    "Poor empty state handling",
                    "Inadequate loading states"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Combobox",
                    "code": "<div class=\"slds-combobox_container\">\n      <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n        <div class=\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\">\n          <input type=\"text\" class=\"slds-input slds-combobox__input\" role=\"textbox\" placeholder=\"Select an option...\" readonly />\n          <span class=\"slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right\">\n            <svg class=\"slds-icon slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n            </svg>\n          </span>\n        </div>\n        <div class=\"slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid\" role=\"listbox\">\n          <ul class=\"slds-listbox slds-listbox_vertical\">\n            <li role=\"presentation\" class=\"\">\n              <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\" role=\"option\">\n                <span class=\"slds-media__body\">\n                  <span class=\"slds-listbox__option-text_entity\">Option One</span>\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "combobox.css",
                    "listbox.css",
                    "dropdown.css",
                    "input.css"
                ],
                "javascript": [
                    "combobox.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "input",
                    "listbox",
                    "dropdown",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Select",
                    "relationship": "alternative",
                    "description": "For smaller, fixed option lists"
                },
                {
                    "name": "Lookup",
                    "relationship": "similar",
                    "description": "Similar search and select pattern"
                },
                {
                    "name": "Picklist",
                    "relationship": "alternative",
                    "description": "Alternative selection control"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/combobox/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Counter",
            "description": "A number input field with increment and decrement buttons, allowing users to adjust numeric values using buttons or direct input. Commonly used for quantity selection, age input, or any numeric field where step-wise adjustment is helpful.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-input_counter",
                "elements": [
                    {
                        "class": "slds-input_counter",
                        "description": "Variant for number input with increment and decrement buttons",
                        "purpose": "Creates a centered number input field with padding for button placement"
                    },
                    {
                        "class": "slds-input__button_decrement",
                        "description": "Decrement button within counter input field",
                        "purpose": "Positions the minus/decrement button on the left side of the input"
                    },
                    {
                        "class": "slds-input__button_increment",
                        "description": "Increment button within counter input field",
                        "purpose": "Positions the plus/increment button on the right side of the input"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard number input with increment/decrement buttons",
                    "classes": [
                        "slds-input_counter"
                    ],
                    "usage_context": "Default implementation for numeric input with buttons",
                    "differences": "Input field centered with buttons on left and right"
                }
            ],
            "lightning_component": {
                "name": "lightning-input",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input",
                "mapping_notes": "Use type='number' with lightning-input, counter styling is applied automatically"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate to the input field",
                    "Arrow keys or direct typing to change value",
                    "Enter to submit if in a form",
                    "Click or Space on increment/decrement buttons"
                ],
                "screen_reader": [
                    "Input field should have a descriptive label",
                    "Current value should be announced when changed",
                    "Min and max values should be communicated"
                ],
                "aria_attributes": [
                    "aria-label or associated <label> for the input",
                    "aria-valuemin and aria-valuemax for valid range",
                    "aria-valuenow for current value"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For quantity selection (e.g., product quantity in shopping cart)",
                    "For age or year input where step-wise adjustment is helpful",
                    "When users benefit from visual increment/decrement controls",
                    "For numeric fields where keyboard-only input may be difficult"
                ],
                "when_not_to_use": [
                    "For large ranges where buttons are impractical (use slider instead)",
                    "For displaying metrics (use different display components)",
                    "When precision typing is critical (use standard number input)"
                ],
                "best_practices": [
                    "Set appropriate min, max, and step attributes",
                    "Provide clear labels indicating the unit or context",
                    "Ensure buttons are touch-friendly on mobile devices",
                    "Consider showing the valid range in help text"
                ],
                "common_mistakes": [
                    "Forgetting to set min/max constraints",
                    "Making the step value too large or too small for the use case",
                    "Poor button sizing making them hard to interact with"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Counter Input",
                    "description": "Number input with increment and decrement buttons",
                    "code": "<div class=\"slds-form-element\">\n  <label class=\"slds-form-element__label\" for=\"counter-input-01\">\n    Quantity\n  </label>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-input-has-icon slds-input-has-icon_left-right\">\n      <button class=\"slds-button slds-button_icon slds-input__button_decrement\" title=\"Decrease\" tabindex=\"-1\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#dash\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Decrease</span>\n      </button>\n      <input type=\"number\" id=\"counter-input-01\" min=\"1\" max=\"100\" step=\"1\" value=\"1\" class=\"slds-input slds-input_counter\" />\n      <button class=\"slds-button slds-button_icon slds-input__button_increment\" title=\"Increase\" tabindex=\"-1\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#add\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Increase</span>\n      </button>\n    </div>\n  </div>\n</div>\n"
                },
                {
                    "title": "Counter with Help Text",
                    "description": "Counter input with additional context",
                    "code": "<div class=\"slds-form-element\">\n  <label class=\"slds-form-element__label\" for=\"counter-input-02\">\n    Number of Attendees\n  </label>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-input-has-icon slds-input-has-icon_left-right\">\n      <button class=\"slds-button slds-button_icon slds-input__button_decrement\" title=\"Decrease\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#dash\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Decrease</span>\n      </button>\n      <input type=\"number\" id=\"counter-input-02\" min=\"0\" max=\"500\" step=\"5\" value=\"10\" class=\"slds-input slds-input_counter\" aria-describedby=\"help-text-02\" />\n      <button class=\"slds-button slds-button_icon slds-input__button_increment\" title=\"Increase\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#add\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Increase</span>\n      </button>\n    </div>\n  </div>\n  <div class=\"slds-form-element__help\" id=\"help-text-02\">Maximum 500 attendees</div>\n</div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "input.css",
                    "button.css",
                    "form-element.css"
                ],
                "javascript": [
                    "counter-input-behavior.js"
                ],
                "icons": [
                    "utility:dash",
                    "utility:add"
                ],
                "other_components": [
                    "input",
                    "button",
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Input",
                    "relationship": "parent",
                    "description": "Counter is a variant of the standard input component"
                },
                {
                    "name": "Slider",
                    "relationship": "alternative",
                    "description": "Alternative for numeric input with visual feedback"
                },
                {
                    "name": "Spinner",
                    "relationship": "alternative",
                    "description": "Alternative numeric input with vertical buttons"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/counter/"
            },
            "metadata": {
                "version": "2.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": "Corrected to match actual SLDS implementation as input counter (number input with +/- buttons), not metric display counter"
            }
        },
        {
            "name": "Data Tables",
            "description": "A structured display of data in rows and columns with support for sorting, selection, and various data types, optimized for large datasets.",
            "category": "Data",
            "slds_classes": {
                "root": "slds-table",
                "elements": [
                    {
                        "class": "slds-table_bordered",
                        "description": "Table with borders",
                        "purpose": "Adds borders for visual separation"
                    },
                    {
                        "class": "slds-table_striped",
                        "description": "Table with alternating row colors",
                        "purpose": "Improves readability with striped rows"
                    },
                    {
                        "class": "slds-table_fixed-layout",
                        "description": "Table with fixed layout",
                        "purpose": "Consistent column widths for better control"
                    },
                    {
                        "class": "slds-table_resizable-cols",
                        "description": "Table with resizable columns",
                        "purpose": "Allows users to resize column widths"
                    },
                    {
                        "class": "slds-table_col-bordered",
                        "description": "Table with column borders",
                        "purpose": "Adds vertical borders between columns"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-table_header-fixed",
                        "description": "Fixed table header",
                        "usage": "Keep headers visible during scrolling"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected row state",
                        "trigger": "Indicates row is selected"
                    },
                    {
                        "class": "slds-is-sorted",
                        "description": "Sorted column state",
                        "trigger": "Indicates column is currently sorted"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard data table",
                    "classes": [
                        "slds-table"
                    ],
                    "usage_context": "Default table implementation",
                    "differences": "Basic table structure with rows and columns"
                },
                {
                    "name": "Striped",
                    "description": "Table with alternating row colors",
                    "classes": [
                        "slds-table",
                        "slds-table_striped"
                    ],
                    "usage_context": "Improved readability for large datasets",
                    "differences": "Alternating background colors on rows"
                },
                {
                    "name": "Bordered",
                    "description": "Table with borders",
                    "classes": [
                        "slds-table",
                        "slds-table_bordered"
                    ],
                    "usage_context": "Clear visual separation between cells",
                    "differences": "Visible borders around all cells"
                }
            ],
            "lightning_component": {
                "name": "lightning-datatable",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS data table blueprint with enhanced functionality"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through interactive elements",
                    "Arrow keys for cell navigation",
                    "Enter/Space for cell activation",
                    "Sorting activation through keyboard"
                ],
                "screen_reader": [
                    "Table structure announced with row and column counts",
                    "Column headers associated with data cells",
                    "Sort states and changes announced",
                    "Selection states communicated"
                ],
                "aria_attributes": [
                    "role='table' for table container",
                    "role='columnheader' for header cells",
                    "role='gridcell' or 'cell' for data cells",
                    "aria-sort for sortable columns",
                    "aria-selected for selected rows",
                    "aria-labelledby for column associations"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For displaying structured data with multiple attributes",
                    "When users need to compare data across rows and columns",
                    "For large datasets that benefit from sorting and filtering",
                    "When precise data layout is important"
                ],
                "when_not_to_use": [
                    "For simple lists (use list components instead)",
                    "For unstructured content (use cards or other layouts)",
                    "When data doesn't fit tabular format well"
                ],
                "best_practices": [
                    "Use clear, descriptive column headers",
                    "Implement sorting for data comparison",
                    "Provide loading states for async data",
                    "Support keyboard navigation throughout",
                    "Consider responsive behavior for mobile",
                    "Use appropriate data types and formatting"
                ],
                "common_mistakes": [
                    "Overloading tables with too many columns",
                    "Poor mobile responsiveness",
                    "Inadequate loading and error states",
                    "Missing keyboard navigation support"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Data Table",
                    "code": "<table class=\"slds-table slds-table_bordered slds-table_fixed-layout\">\n      <thead>\n        <tr class=\"slds-line-height_reset\">\n          <th class=\"slds-text-title_caps\" scope=\"col\">\n            <div class=\"slds-truncate\" title=\"Name\">Name</div>\n          </th>\n          <th class=\"slds-text-title_caps\" scope=\"col\">\n            <div class=\"slds-truncate\" title=\"Account\">Account</div>\n          </th>\n          <th class=\"slds-text-title_caps\" scope=\"col\">\n            <div class=\"slds-truncate\" title=\"Close Date\">Close Date</div>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"slds-hint-parent\">\n          <td data-label=\"Name\">\n            <div class=\"slds-truncate\" title=\"Acme Corp Deal\">Acme Corp Deal</div>\n          </td>\n          <td data-label=\"Account\">\n            <div class=\"slds-truncate\" title=\"Acme Corporation\">Acme Corporation</div>\n          </td>\n          <td data-label=\"Close Date\">\n            <div class=\"slds-truncate\" title=\"12/31/2024\">12/31/2024</div>\n          </td>\n        </tr>\n      </tbody>\n      </table>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "table.css",
                    "truncate.css"
                ],
                "javascript": [
                    "table.js (for sorting, selection)"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "truncate",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Tree Grid",
                    "relationship": "similar",
                    "description": "Hierarchical data table variant"
                },
                {
                    "name": "List",
                    "relationship": "alternative",
                    "description": "Alternative for simpler data display"
                },
                {
                    "name": "Cards",
                    "relationship": "alternative",
                    "description": "Alternative layout for complex data items"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/data-tables/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Datepickers",
            "description": "Input controls that allow users to select dates through a calendar interface, providing visual date selection with navigation between months and years.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-datepicker",
                "elements": [
                    {
                        "class": "slds-datepicker__filter",
                        "description": "Container for month/year navigation",
                        "purpose": "Holds navigation controls for calendar"
                    },
                    {
                        "class": "slds-datepicker__filter_month",
                        "description": "Month selection control",
                        "purpose": "Allows selection of specific month"
                    },
                    {
                        "class": "slds-datepicker__month",
                        "description": "Calendar month grid container",
                        "purpose": "Contains the calendar grid for date selection"
                    },
                    {
                        "class": "slds-day",
                        "description": "Individual calendar day cell",
                        "purpose": "Represents a single selectable date"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-today",
                        "description": "Current date state",
                        "trigger": "Highlights today's date"
                    },
                    {
                        "class": "slds-is-selected",
                        "description": "Selected date state",
                        "trigger": "Currently selected date"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard calendar datepicker",
                    "classes": [
                        "slds-datepicker"
                    ],
                    "usage_context": "Default datepicker for date selection",
                    "differences": "Calendar grid with month/year navigation"
                }
            ],
            "lightning_component": {
                "name": "lightning-input (type='date')",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input",
                "mapping_notes": "Mapped through lightning-input with type='date' which provides native datepicker"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus datepicker elements",
                    "Arrow keys to navigate calendar dates",
                    "Enter/Space to select dates",
                    "Page Up/Down to navigate months",
                    "Shift+Page Up/Down to navigate years"
                ],
                "screen_reader": [
                    "Current month and year announced",
                    "Date selection changes communicated",
                    "Navigation between calendar periods announced",
                    "Today's date and selected date clearly identified"
                ],
                "aria_attributes": [
                    "role='grid' for calendar container",
                    "role='gridcell' for individual dates",
                    "aria-selected for chosen date",
                    "aria-label for month/year navigation",
                    "aria-live for dynamic date updates"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For date selection in forms",
                    "When users need visual calendar navigation",
                    "For scheduling or planning interfaces",
                    "When date ranges or specific dates are important"
                ],
                "when_not_to_use": [
                    "For approximate dates (use text input)",
                    "When calendar interface is not helpful",
                    "For very distant past or future dates"
                ],
                "best_practices": [
                    "Provide clear month and year navigation",
                    "Highlight current date and selection clearly",
                    "Support keyboard navigation throughout",
                    "Handle date formatting consistently",
                    "Provide appropriate date constraints"
                ],
                "common_mistakes": [
                    "Poor keyboard navigation implementation",
                    "Unclear visual indicators for selection",
                    "Not handling edge cases (leap years, etc.)",
                    "Inconsistent date formatting"
                ]
            },
            "code_examples": [
                {
                    "title": "Calendar Datepicker",
                    "code": "<div class=\"slds-datepicker\" role=\"dialog\" aria-label=\"Date picker\">\n      <div class=\"slds-datepicker__filter slds-grid\">\n        <div class=\"slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow\">\n          <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Previous Month\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#left\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Previous Month</span>\n          </button>\n          <h2 class=\"slds-align-middle\" aria-live=\"assertive\" aria-atomic=\"true\">October 2024</h2>\n          <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Next Month\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#right\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Next Month</span>\n          </button>\n        </div>\n      </div>\n      <table class=\"slds-datepicker__month\" role=\"grid\" aria-labelledby=\"month\">\n        <thead>\n          <tr>\n            <th scope=\"col\"><abbr title=\"Sunday\">Sun</abbr></th>\n            <th scope=\"col\"><abbr title=\"Monday\">Mon</abbr></th>\n            <th scope=\"col\"><abbr title=\"Tuesday\">Tue</abbr></th>\n            <th scope=\"col\"><abbr title=\"Wednesday\">Wed</abbr></th>\n            <th scope=\"col\"><abbr title=\"Thursday\">Thu</abbr></th>\n            <th scope=\"col\"><abbr title=\"Friday\">Fri</abbr></th>\n            <th scope=\"col\"><abbr title=\"Saturday\">Sat</abbr></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td class=\"slds-day\" role=\"gridcell\" aria-selected=\"false\">\n              <span class=\"slds-day\">1</span>\n            </td>\n            <td class=\"slds-day\" role=\"gridcell\" aria-selected=\"false\">\n              <span class=\"slds-day\">2</span>\n            </td>\n            <td class=\"slds-day slds-is-selected\" role=\"gridcell\" aria-selected=\"true\">\n              <span class=\"slds-day\">3</span>\n            </td>\n            <!-- Additional days... -->\n          </tr>\n        </tbody>\n      </table>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "datepicker.css",
                    "grid.css",
                    "button.css"
                ],
                "javascript": [
                    "datepicker.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button-icon",
                    "grid",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Input",
                    "relationship": "depends-on",
                    "description": "Often combined with text input for date entry"
                },
                {
                    "name": "Datetime Picker",
                    "relationship": "variant",
                    "description": "Extended version including time selection"
                },
                {
                    "name": "Timepicker",
                    "relationship": "similar",
                    "description": "Complementary component for time selection"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/datepickers/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Datetime Picker",
            "description": "A datetime picker is used to select a day and a time. It combines a datepicker and timepicker into a single component with two form elements, each containing a label and text input, and a dropdown menu containing a grid-based calendar and time filters.",
            "category": "Input",
            "slds_classes": {
                "root": "",
                "elements": [
                    {
                        "class": "slds-dropdown-trigger",
                        "description": "Container that triggers the dropdown menu",
                        "purpose": "Wraps the date input and controls dropdown visibility"
                    },
                    {
                        "class": "slds-form-element__icon",
                        "description": "Icon element within the form element",
                        "purpose": "Contains icon for the datetime picker input"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-datetimepicker_has-tooltip",
                        "description": "Modifier for datetime picker with tooltip",
                        "usage": "Applied when tooltip is present on the datetime picker"
                    },
                    {
                        "class": "slds-is-open",
                        "description": "State modifier for open dropdown",
                        "usage": "Applied to dropdown-trigger when dropdown is visible"
                    }
                ],
                "states": [
                    {
                        "class": "slds-has-focus",
                        "description": "Focus state on timepicker listbox option",
                        "trigger": "When a time option receives focus"
                    },
                    {
                        "class": "slds-is-selected",
                        "description": "Selected state for date or time option",
                        "trigger": "When a date or time option is selected"
                    },
                    {
                        "class": "slds-is-today",
                        "description": "Today indicator for datepicker",
                        "trigger": "Applied to the current day in the calendar"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard datetime picker with date and time selection",
                    "classes": [],
                    "usage_context": "Default datetime picker implementation combining datepicker and timepicker",
                    "differences": "Two form elements - one for date, one for time, with dropdown menus"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - use lightning-input with type='datetime-local' or custom implementation"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between date and time inputs",
                    "Enter or Space to open dropdown menus",
                    "Arrow keys to navigate calendar dates or time options",
                    "Escape to close dropdown menus"
                ],
                "screen_reader": [
                    "Date format message announced when date field receives focus",
                    "Selected date and time announced",
                    "Calendar navigation announced",
                    "Time options announced when navigating"
                ],
                "aria_attributes": [
                    "role='combobox' on combobox element (desktop only)",
                    "aria-expanded on dropdown trigger",
                    "aria-haspopup on combobox",
                    "aria-controls on input (desktop only)",
                    "aria-autocomplete on input (desktop only)",
                    "role='textbox' on input (desktop only)",
                    "aria-describedby for date format messages",
                    "Remove ARIA attributes on mobile when using datetime-local input type"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When users need to select both a date and time",
                    "For scheduling appointments or events",
                    "When precise datetime selection is required",
                    "For form inputs requiring date and time together"
                ],
                "when_not_to_use": [
                    "When only date is needed (use datepicker)",
                    "When only time is needed (use timepicker)",
                    "In data table cells (use popover instead)",
                    "When space is very limited"
                ],
                "best_practices": [
                    "Use native datetime-local input on mobile devices",
                    "Provide clear date format guidance",
                    "Use required indicators with legends for required fields",
                    "Ensure proper ARIA attributes for desktop, remove for mobile native inputs",
                    "Provide visual feedback for selected date and time",
                    "Handle timezone considerations appropriately"
                ],
                "common_mistakes": [
                    "Using in data table cells without popover",
                    "Not removing ARIA attributes on mobile native inputs",
                    "Missing date format guidance",
                    "Not handling timezone correctly",
                    "Inadequate keyboard navigation support"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Datetime Picker",
                    "code": "<div class=\"\">\n  <div class=\"slds-form-element\">\n    <label class=\"slds-form-element__label\" for=\"date-input\">\n      <abbr class=\"slds-required\" title=\"required\">*</abbr> Date\n    </label>\n    <div class=\"slds-form-element__control\">\n      <div class=\"slds-dropdown-trigger slds-dropdown-trigger_click\">\n        <div class=\"slds-combobox_container\">\n          <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n            <div class=\"slds-form-element__icon\">\n              <svg class=\"slds-icon slds-icon-text-default\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>\n              </svg>\n            </div>\n            <input type=\"text\" class=\"slds-input slds-combobox__input\" id=\"date-input\" aria-controls=\"date-listbox\" aria-autocomplete=\"list\" role=\"textbox\" placeholder=\"Select a date\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"slds-form-element\">\n    <label class=\"slds-form-element__label\" for=\"time-input\">\n      <abbr class=\"slds-required\" title=\"required\">*</abbr> Time\n    </label>\n    <div class=\"slds-form-element__control\">\n      <div class=\"slds-combobox_container\">\n        <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n          <input type=\"text\" class=\"slds-input slds-combobox__input\" id=\"time-input\" aria-controls=\"time-listbox\" aria-autocomplete=\"list\" role=\"textbox\" placeholder=\"Select a time\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    "description": "Basic datetime picker with date and time inputs"
                },
                {
                    "title": "Mobile Datetime Picker (Native)",
                    "code": "<div class=\"\">\n  <div class=\"slds-form-element\">\n    <label class=\"slds-form-element__label\" for=\"datetime-mobile\">\n      <abbr class=\"slds-required\" title=\"required\">*</abbr> Date and Time\n    </label>\n    <div class=\"slds-form-element__control\">\n      <input type=\"datetime-local\" class=\"slds-input\" id=\"datetime-mobile\" />\n    </div>\n  </div>\n</div>\n",
                    "description": "Mobile datetime picker using native datetime-local input (ARIA attributes removed)"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "datetime-picker.css",
                    "form-element.css",
                    "input.css",
                    "datepicker.css",
                    "timepicker.css",
                    "combobox.css",
                    "dropdown.css"
                ],
                "javascript": [
                    "Dropdown trigger functionality",
                    "Calendar navigation",
                    "Time option selection",
                    "Date/time validation"
                ],
                "icons": [
                    "utility:event (for date icon)"
                ],
                "other_components": [
                    "form-element",
                    "input",
                    "datepicker",
                    "timepicker",
                    "combobox",
                    "dropdown",
                    "menus"
                ]
            },
            "related_components": [
                {
                    "name": "Datepicker",
                    "relationship": "depends-on",
                    "description": "Date selection component used within datetime picker"
                },
                {
                    "name": "Timepicker",
                    "relationship": "depends-on",
                    "description": "Time selection component used within datetime picker"
                },
                {
                    "name": "Input",
                    "relationship": "similar",
                    "description": "Text input component used for date and time display"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/datetime-picker/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/datetime-picker/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-01-15",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code. Combines datepicker and timepicker components. Mobile implementation uses native datetime-local input."
            }
        },
        {
            "name": "Docked Composer",
            "description": "A persistent composition interface that remains docked at the bottom of the screen, allowing users to create content (emails, messages, posts) while maintaining context of their current workflow.",
            "category": "Overlay",
            "slds_classes": {
                "root": "slds-docked-composer",
                "elements": [
                    {
                        "class": "slds-docked-composer__header",
                        "description": "Header section of the docked composer",
                        "purpose": "Contains title, status indicators, and header controls"
                    },
                    {
                        "class": "slds-docked-composer__body",
                        "description": "Main content area of the composer",
                        "purpose": "Contains the primary composition interface and controls"
                    },
                    {
                        "class": "slds-docked-composer__footer",
                        "description": "Footer section with action buttons",
                        "purpose": "Contains send, save, and other action buttons"
                    },
                    {
                        "class": "slds-docked-composer__lead",
                        "description": "Lead content area within composer",
                        "purpose": "Primary content or recipient information"
                    },
                    {
                        "class": "slds-docked-composer__toolbar",
                        "description": "Toolbar for composer actions",
                        "purpose": "Contains formatting and composition tools"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Expanded composer state",
                        "trigger": "Applied when composer is expanded and active"
                    },
                    {
                        "class": "slds-is-closed",
                        "description": "Minimized composer state",
                        "trigger": "Applied when composer is minimized"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard docked composer for general composition",
                    "classes": [
                        "slds-docked-composer"
                    ],
                    "usage_context": "Default implementation for content composition",
                    "differences": "Basic composer with header, body, and footer"
                },
                {
                    "name": "Email",
                    "description": "Email-specific docked composer",
                    "classes": [
                        "slds-docked-composer"
                    ],
                    "usage_context": "For email composition workflows",
                    "differences": "Email-specific fields and formatting options"
                },
                {
                    "name": "Task",
                    "description": "Task creation docked composer",
                    "classes": [
                        "slds-docked-composer"
                    ],
                    "usage_context": "For task and reminder creation",
                    "differences": "Task-specific fields and controls"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented using custom components with lightning-modal or lightning-card patterns"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through composer elements",
                    "Enter/Space to activate buttons and controls",
                    "Escape to minimize or close composer",
                    "Arrow keys for toolbar navigation"
                ],
                "screen_reader": [
                    "Composer purpose and state announced",
                    "Form fields and labels properly associated",
                    "Action buttons clearly described",
                    "Status updates communicated"
                ],
                "aria_attributes": [
                    "role='dialog' for composer container",
                    "aria-labelledby for composer title",
                    "aria-describedby for composer content",
                    "aria-expanded for minimize/expand state",
                    "aria-live for status updates"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For content composition that shouldn't interrupt workflow",
                    "When users need to reference other content while composing",
                    "For email, message, or document creation",
                    "When composition is a secondary task"
                ],
                "when_not_to_use": [
                    "For simple, quick inputs (use modal instead)",
                    "When composition is the primary task",
                    "On small screens with limited space"
                ],
                "best_practices": [
                    "Provide clear minimize/maximize controls",
                    "Save draft content automatically",
                    "Allow multiple composers when appropriate",
                    "Maintain scroll position when minimized",
                    "Provide clear send/save actions"
                ],
                "common_mistakes": [
                    "Blocking user interaction with underlying content",
                    "Not saving drafts automatically",
                    "Poor mobile responsive behavior",
                    "Unclear composer state indicators"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Docked Composer",
                    "description": "Standard docked composer for general content creation",
                    "code": "<section class=\"slds-docked-composer slds-is-open\" role=\"dialog\" aria-labelledby=\"composer-title\" aria-describedby=\"composer-body\">\n      <header class=\"slds-docked-composer__header\">\n        <div class=\"slds-media slds-media_center\">\n          <div class=\"slds-media__figure\">\n            <span class=\"slds-icon_container slds-icon-standard-email\">\n              <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#email\"></use>\n              </svg>\n            </span>\n          </div>\n          <div class=\"slds-media__body\">\n            <h2 id=\"composer-title\" class=\"slds-truncate slds-text-heading_small\">New Email</h2>\n          </div>\n          <div class=\"slds-media__figure slds-media__figure_reverse\">\n            <div class=\"slds-button-group\">\n              <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Minimize\">\n                <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#minimize_window\"></use>\n                </svg>\n                <span class=\"slds-assistive-text\">Minimize composer</span>\n              </button>\n              <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Expand\">\n                <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#expand\"></use>\n                </svg>\n                <span class=\"slds-assistive-text\">Expand composer</span>\n              </button>\n              <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Close\">\n                <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n                </svg>\n                <span class=\"slds-assistive-text\">Close composer</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </header>\n      <div class=\"slds-docked-composer__body\" id=\"composer-body\">\n        <div class=\"slds-form-element slds-m-bottom_small\">\n          <label class=\"slds-form-element__label\" for=\"composer-to\">To</label>\n          <div class=\"slds-form-element__control\">\n            <input type=\"email\" id=\"composer-to\" class=\"slds-input\" placeholder=\"Enter recipient email\">\n          </div>\n        </div>\n        <div class=\"slds-form-element slds-m-bottom_small\">\n          <label class=\"slds-form-element__label\" for=\"composer-subject\">Subject</label>\n          <div class=\"slds-form-element__control\">\n            <input type=\"text\" id=\"composer-subject\" class=\"slds-input\" placeholder=\"Enter subject\">\n          </div>\n        </div>\n        <div class=\"slds-form-element\">\n          <label class=\"slds-form-element__label\" for=\"composer-message\">Message</label>\n          <div class=\"slds-form-element__control\">\n            <textarea id=\"composer-message\" class=\"slds-textarea\" rows=\"10\" placeholder=\"Enter your message\"></textarea>\n          </div>\n        </div>\n      </div>\n      <footer class=\"slds-docked-composer__footer\">\n        <div class=\"slds-grid slds-grid_align-spread\">\n          <div class=\"slds-col\">\n            <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Attach file\">\n              <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#attach\"></use>\n              </svg>\n              <span class=\"slds-assistive-text\">Attach file</span>\n            </button>\n          </div>\n          <div class=\"slds-col slds-no-flex\">\n            <div class=\"slds-button-group\">\n              <button class=\"slds-button slds-button_neutral\">Save Draft</button>\n              <button class=\"slds-button slds-button_brand\">Send</button>\n            </div>\n          </div>\n        </div>\n      </footer>\n      </section>\n"
                },
                {
                    "title": "Minimized Docked Composer",
                    "description": "Docked composer in minimized state",
                    "code": "<section class=\"slds-docked-composer slds-is-closed\" role=\"dialog\" aria-labelledby=\"composer-min-title\">\n      <header class=\"slds-docked-composer__header\">\n        <div class=\"slds-media slds-media_center\">\n          <div class=\"slds-media__figure\">\n            <span class=\"slds-icon_container slds-icon-standard-email\">\n              <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#email\"></use>\n              </svg>\n            </span>\n          </div>\n          <div class=\"slds-media__body\">\n            <h2 id=\"composer-min-title\" class=\"slds-truncate slds-text-heading_small\">Draft - New Email</h2>\n          </div>\n          <div class=\"slds-media__figure slds-media__figure_reverse\">\n            <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Expand\">\n              <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#expand\"></use>\n              </svg>\n              <span class=\"slds-assistive-text\">Expand composer</span>\n            </button>\n          </div>\n        </div>\n      </header>\n      </section>\n"
                },
                {
                    "title": "Task Composer",
                    "description": "Docked composer configured for task creation",
                    "code": "<section class=\"slds-docked-composer slds-is-open\" role=\"dialog\" aria-labelledby=\"task-composer-title\">\n      <header class=\"slds-docked-composer__header\">\n        <div class=\"slds-media slds-media_center\">\n          <div class=\"slds-media__figure\">\n            <span class=\"slds-icon_container slds-icon-standard-task\">\n              <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#task\"></use>\n              </svg>\n            </span>\n          </div>\n          <div class=\"slds-media__body\">\n            <h2 id=\"task-composer-title\" class=\"slds-truncate slds-text-heading_small\">New Task</h2>\n          </div>\n          <div class=\"slds-media__figure slds-media__figure_reverse\">\n            <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Close\">\n              <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n              </svg>\n              <span class=\"slds-assistive-text\">Close composer</span>\n            </button>\n          </div>\n        </div>\n      </header>\n      <div class=\"slds-docked-composer__body\">\n        <div class=\"slds-form-element slds-m-bottom_small\">\n          <label class=\"slds-form-element__label\" for=\"task-subject\">Task Subject</label>\n          <div class=\"slds-form-element__control\">\n            <input type=\"text\" id=\"task-subject\" class=\"slds-input\" placeholder=\"Enter task subject\">\n          </div>\n        </div>\n        <div class=\"slds-form-element slds-m-bottom_small\">\n          <label class=\"slds-form-element__label\" for=\"task-due-date\">Due Date</label>\n          <div class=\"slds-form-element__control\">\n            <input type=\"date\" id=\"task-due-date\" class=\"slds-input\">\n          </div>\n        </div>\n        <div class=\"slds-form-element\">\n          <label class=\"slds-form-element__label\" for=\"task-description\">Description</label>\n          <div class=\"slds-form-element__control\">\n            <textarea id=\"task-description\" class=\"slds-textarea\" rows=\"6\" placeholder=\"Enter task description\"></textarea>\n          </div>\n        </div>\n      </div>\n      <footer class=\"slds-docked-composer__footer\">\n        <div class=\"slds-grid slds-grid_align-end\">\n          <div class=\"slds-col slds-no-flex\">\n            <div class=\"slds-button-group\">\n              <button class=\"slds-button slds-button_neutral\">Save Draft</button>\n              <button class=\"slds-button slds-button_brand\">Create Task</button>\n            </div>\n          </div>\n        </div>\n      </footer>\n      </section>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "docked-composer.css",
                    "form-element.css",
                    "button.css",
                    "input.css",
                    "textarea.css"
                ],
                "javascript": [
                    "docked-composer.js"
                ],
                "icons": [
                    "standard-sprite.svg",
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "form-element",
                    "button",
                    "input",
                    "textarea"
                ]
            },
            "related_components": [
                {
                    "name": "Modal",
                    "relationship": "alternative",
                    "description": "Alternative for full-screen composition"
                },
                {
                    "name": "Rich Text Editor",
                    "relationship": "depends-on",
                    "description": "Often includes rich text editing capabilities"
                },
                {
                    "name": "Form Element",
                    "relationship": "container",
                    "description": "Contains form elements for data input"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/docked-composer/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Docked Form Footer",
            "description": "A fixed footer component that docks to the bottom of the viewport, typically containing form action buttons like Save and Cancel. It remains visible as the user scrolls through long forms.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-docked-form-footer",
                "elements": [],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard docked footer with centered content",
                    "classes": [
                        "slds-docked-form-footer"
                    ],
                    "usage_context": "Default footer for long forms that need persistent action buttons",
                    "differences": "Fixed to bottom of viewport with shadow elevation"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - implement with custom footer and CSS positioning"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate to footer buttons",
                    "Enter or Space to activate buttons"
                ],
                "screen_reader": [
                    "Footer landmark announced if using footer element",
                    "Button labels announced clearly",
                    "Action sequence communicated"
                ],
                "aria_attributes": [
                    "role='contentinfo' if using div instead of footer",
                    "Buttons should have clear aria-label if needed"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For long forms that extend beyond viewport height",
                    "When form actions need to remain always visible",
                    "For edit or create flows with Save/Cancel actions",
                    "In modal or page contexts with critical actions"
                ],
                "when_not_to_use": [
                    "For short forms that fit in viewport",
                    "When inline form actions are sufficient",
                    "In contexts where fixed positioning causes issues",
                    "On small screens where footer takes too much space"
                ],
                "best_practices": [
                    "Keep action buttons clearly labeled and visible",
                    "Place primary action on the right (e.g., Save)",
                    "Include Cancel or secondary action on the left",
                    "Ensure footer doesn't obscure important content",
                    "Consider mobile viewport height limitations",
                    "Provide adequate padding around buttons"
                ],
                "common_mistakes": [
                    "Overcrowding footer with too many actions",
                    "Poor color contrast on footer background",
                    "Forgetting to account for footer height in page layout",
                    "Not handling mobile viewport properly",
                    "Missing keyboard navigation support"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Docked Form Footer",
                    "code": "<div class=\"slds-docked-form-footer\">\n  <button class=\"slds-button slds-button_neutral\">Cancel</button>\n  <button class=\"slds-button slds-button_brand\">Save</button>\n</div>\n",
                    "description": "Simple docked footer with Save and Cancel buttons"
                },
                {
                    "title": "Docked Footer with Multiple Actions",
                    "code": "<div class=\"slds-docked-form-footer\">\n  <div class=\"slds-grid slds-grid_align-spread slds-wrap\">\n    <div class=\"slds-col slds-no-flex\">\n      <button class=\"slds-button slds-button_neutral\">Cancel</button>\n    </div>\n    <div class=\"slds-col slds-no-flex\">\n      <div class=\"slds-button-group\" role=\"group\">\n        <button class=\"slds-button slds-button_neutral\">Save Draft</button>\n        <button class=\"slds-button slds-button_brand\">Save &amp; Submit</button>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    "description": "Docked footer with multiple action options"
                },
                {
                    "title": "Docked Footer in Form Context",
                    "code": "<div class=\"slds-card\">\n  <div class=\"slds-card__header slds-grid\">\n    <header class=\"slds-media slds-media_center slds-has-flexi-truncate\">\n      <div class=\"slds-media__body\">\n        <h2 class=\"slds-card__header-title\">\n          <span>Edit Contact</span>\n        </h2>\n      </div>\n    </header>\n  </div>\n  <div class=\"slds-card__body slds-card__body_inner\" style=\"padding-bottom: 5rem;\">\n    <form>\n      <div class=\"slds-form-element\">\n        <label class=\"slds-form-element__label\" for=\"input-01\">\n          <abbr class=\"slds-required\" title=\"required\">* </abbr>First Name\n        </label>\n        <div class=\"slds-form-element__control\">\n          <input type=\"text\" id=\"input-01\" class=\"slds-input\" required />\n        </div>\n      </div>\n      <div class=\"slds-form-element\">\n        <label class=\"slds-form-element__label\" for=\"input-02\">\n          <abbr class=\"slds-required\" title=\"required\">* </abbr>Last Name\n        </label>\n        <div class=\"slds-form-element__control\">\n          <input type=\"text\" id=\"input-02\" class=\"slds-input\" required />\n        </div>\n      </div>\n      <!-- More form fields... -->\n    </form>\n  </div>\n</div>\n<div class=\"slds-docked-form-footer\">\n  <button class=\"slds-button slds-button_neutral\" type=\"button\">Cancel</button>\n  <button class=\"slds-button slds-button_brand\" type=\"submit\">Save</button>\n</div>\n",
                    "description": "Docked footer used with a form in a card, note padding-bottom on card body to prevent content overlap"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-g-color-neutral-base-95",
                    "description": "Background color of the docked footer",
                    "css_property": "background"
                }
            ],
            "dependencies": {
                "css_files": [
                    "docked-form-footer.css",
                    "button.css"
                ],
                "javascript": [
                    "Form submission handling",
                    "Scroll position management"
                ],
                "icons": [],
                "other_components": [
                    "button",
                    "button-group"
                ]
            },
            "related_components": [
                {
                    "name": "Modal",
                    "relationship": "alternative",
                    "description": "Alternative pattern for forms in overlay context"
                },
                {
                    "name": "Page Header",
                    "relationship": "complementary",
                    "description": "Header component that pairs with form content"
                },
                {
                    "name": "Button",
                    "relationship": "contains",
                    "description": "Action buttons within the footer"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/docked-form-footer/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Docked Utility Bar",
            "description": "A persistent utility panel that remains docked at the bottom or side of the screen, providing quick access to frequently used tools, actions, and information without interrupting the primary workflow.",
            "category": "Actions",
            "slds_classes": {
                "root": "slds-utility-bar_container",
                "elements": [
                    {
                        "class": "slds-utility-bar",
                        "description": "Fixed bar at the bottom of viewport that contains items",
                        "purpose": "Main utility bar element with fixed positioning and background"
                    },
                    {
                        "class": "slds-utility-bar__item",
                        "description": "Individual utility item that invokes specific utility bar panel",
                        "purpose": "Represents a single utility tool or action"
                    },
                    {
                        "class": "slds-utility-bar__action",
                        "description": "Action button within utility bar",
                        "purpose": "Interactive element for utility functions"
                    },
                    {
                        "class": "slds-utility-bar__text",
                        "description": "Text content within utility bar actions",
                        "purpose": "Contains label text for utility actions"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-utility-bar__item_pop-out",
                        "description": "Modifier for utility item with panel popped out in new window",
                        "usage": "When utility panel is opened in a separate window"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active utility action state",
                        "trigger": "Applied to currently active utility action"
                    },
                    {
                        "class": "slds-indicator_unread",
                        "description": "Unread notification indicator",
                        "trigger": "Applied when utility has unread notifications"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard docked utility bar fixed at bottom of viewport",
                    "classes": [
                        "slds-utility-bar_container",
                        "slds-utility-bar"
                    ],
                    "usage_context": "Default implementation for utility access",
                    "differences": "Fixed horizontal utility bar at bottom of screen"
                },
                {
                    "name": "With Pop-out",
                    "description": "Utility bar item with panel popped out in new window",
                    "classes": [
                        "slds-utility-bar__item",
                        "slds-utility-bar__item_pop-out"
                    ],
                    "usage_context": "When utility panel is opened in a separate window",
                    "differences": "Visual indicator showing panel is popped out"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented using custom components with lightning-button-group patterns"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through utility items",
                    "Enter/Space to activate utility actions",
                    "Arrow keys for utility bar navigation",
                    "Escape to close expanded panels"
                ],
                "screen_reader": [
                    "Utility bar purpose and items announced",
                    "Panel expansion state communicated",
                    "Utility actions clearly described"
                ],
                "aria_attributes": [
                    "role='toolbar' for utility bar container",
                    "role='button' for utility actions",
                    "aria-expanded for expandable utilities",
                    "aria-label for utility descriptions",
                    "aria-controls for panel relationships"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For frequently accessed tools and utilities",
                    "When users need persistent access to functions",
                    "For secondary tools that support primary workflows",
                    "To provide quick actions without navigation"
                ],
                "when_not_to_use": [
                    "For primary navigation (use main navigation)",
                    "For infrequently used features",
                    "When screen space is severely limited"
                ],
                "best_practices": [
                    "Include only essential utilities",
                    "Provide clear icons and labels",
                    "Allow customization of utility order",
                    "Handle responsive behavior gracefully",
                    "Maintain consistent interaction patterns"
                ],
                "common_mistakes": [
                    "Overcrowding with too many utilities",
                    "Unclear or ambiguous utility icons",
                    "Poor responsive behavior on small screens",
                    "Inconsistent interaction patterns"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Docked Utility Bar",
                    "description": "Standard utility bar with common tools and actions",
                    "code": "<div class=\"\" role=\"toolbar\" aria-label=\"Utility tools\">\n      <div class=\"\">\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon\" aria-expanded=\"false\" aria-controls=\"utility-panel-1\" title=\"Notes\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#note\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Open notes utility</span>\n          </button>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon slds-is-active\" aria-expanded=\"true\" aria-controls=\"utility-panel-2\" title=\"Calculator\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#calculator\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Open calculator utility</span>\n          </button>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon\" aria-expanded=\"false\" aria-controls=\"utility-panel-3\" title=\"Timer\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#clock\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Open timer utility</span>\n          </button>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon\" title=\"Help\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#help\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Open help</span>\n          </button>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Utility Bar with Expanded Panel",
                    "description": "Utility bar with an expanded utility panel showing detailed content",
                    "code": "<div class=\"slds-is-open\" role=\"toolbar\" aria-label=\"Utility tools\">\n      <div class=\"\" id=\"utility-panel-calculator\" role=\"dialog\" aria-labelledby=\"panel-title\">\n        <header class=\"\">\n          <h2 id=\"panel-title\" class=\"slds-text-heading_small\">Calculator</h2>\n          <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Close\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Close calculator</span>\n          </button>\n        </header>\n        <div class=\"\">\n          <div class=\"slds-grid slds-grid_vertical\">\n            <div class=\"slds-col\">\n              <input type=\"text\" class=\"slds-input slds-text-align_right\" value=\"0\" readonly aria-label=\"Calculator display\">\n            </div>\n            <div class=\"slds-col slds-m-top_small\">\n              <div class=\"slds-grid slds-wrap\">\n                <div class=\"slds-col slds-size_1-of-4 slds-p-around_xx-small\">\n                  <button class=\"slds-button slds-button_neutral slds-size_1-of-1\">7</button>\n                </div>\n                <div class=\"slds-col slds-size_1-of-4 slds-p-around_xx-small\">\n                  <button class=\"slds-button slds-button_neutral slds-size_1-of-1\">8</button>\n                </div>\n                <div class=\"slds-col slds-size_1-of-4 slds-p-around_xx-small\">\n                  <button class=\"slds-button slds-button_neutral slds-size_1-of-1\">9</button>\n                </div>\n                <div class=\"slds-col slds-size_1-of-4 slds-p-around_xx-small\">\n                  <button class=\"slds-button slds-button_brand slds-size_1-of-1\">÷</button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"\">\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon\" title=\"Notes\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#note\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Notes</span>\n          </button>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon slds-is-active\" aria-expanded=\"true\" title=\"Calculator\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#calculator\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Calculator (Active)</span>\n          </button>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Vertical Utility Bar",
                    "description": "Vertically oriented utility bar for side placement",
                    "code": "<div class=\"\" role=\"toolbar\" aria-label=\"Utility tools\">\n      <div class=\"\">\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon\" title=\"Bookmarks\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#bookmark\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Bookmarks</span>\n          </button>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon\" title=\"Recent Items\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#recent\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Recent Items</span>\n          </button>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon\" title=\"Search\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#search\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Search</span>\n          </button>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "docked-utility-bar.css",
                    "button.css",
                    "grid.css",
                    "panel.css"
                ],
                "javascript": [
                    "docked-utility-bar.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "grid",
                    "panel"
                ]
            },
            "related_components": [
                {
                    "name": "Docked Composer",
                    "relationship": "similar",
                    "description": "Similar docked interface concept"
                },
                {
                    "name": "Global Header",
                    "relationship": "alternative",
                    "description": "Alternative location for utility access"
                },
                {
                    "name": "Button Group",
                    "relationship": "depends-on",
                    "description": "Uses button group patterns for utility items"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/docked-utility-bar/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Drop Zone",
            "description": "A component for screen building that provides a draggable drop target area where users can drop components or elements. Indicates drop availability and provides visual feedback during drag operations.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "slds-drop-zone",
                "elements": [
                    {
                        "class": "slds-drop-zone__label",
                        "description": "Top label of the drop zone",
                        "purpose": "Displays instructional text or title"
                    },
                    {
                        "class": "slds-drop-zone__label_container",
                        "description": "Container for populated drop zone label",
                        "purpose": "Wraps label content when zone contains items"
                    },
                    {
                        "class": "slds-drop-zone__label_button",
                        "description": "Button within drop zone label",
                        "purpose": "Interactive element in label area"
                    },
                    {
                        "class": "slds-drop-zone_drag__slot",
                        "description": "Insertion point of drop zone",
                        "purpose": "Target area where items are dropped"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-drop-zone_drag",
                        "description": "Modifier indicating drop availability",
                        "purpose": "Applied when component may be dropped in container"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard drop zone for component placement",
                    "classes": [
                        "slds-drop-zone"
                    ],
                    "usage_context": "Default drop zone for drag-and-drop interfaces",
                    "differences": "Empty drop target ready to receive dragged items"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - implement with custom drag-and-drop JavaScript"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus on drop zone",
                    "Enter or Space to activate alternative placement",
                    "Arrow keys for keyboard-based positioning"
                ],
                "screen_reader": [
                    "Drop zone role and purpose announced",
                    "Drag state changes announced",
                    "Successful drop confirmed"
                ],
                "aria_attributes": [
                    "aria-label describing drop zone purpose",
                    "aria-dropeffect indicating allowed operations",
                    "aria-grabbed on draggable items",
                    "role='region' or custom role for drop area"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For screen or page builders",
                    "When users need to arrange components visually",
                    "For customizable dashboards or layouts",
                    "In drag-and-drop interfaces"
                ],
                "when_not_to_use": [
                    "For simple file uploads (use file selector)",
                    "When drag-and-drop adds unnecessary complexity",
                    "For mobile-only experiences (touch drag can be difficult)",
                    "When list reordering is sufficient"
                ],
                "best_practices": [
                    "Provide clear visual feedback during drag",
                    "Show valid drop targets clearly",
                    "Indicate when zone is ready to receive drops",
                    "Provide alternative non-drag methods",
                    "Handle touch interactions for mobile",
                    "Show drop zone boundaries clearly"
                ],
                "common_mistakes": [
                    "Unclear drop target boundaries",
                    "No visual feedback during drag",
                    "Missing keyboard alternatives",
                    "Poor mobile/touch support",
                    "Not indicating valid vs invalid drops"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Drop Zone",
                    "code": "<div class=\"slds-drop-zone\">\n  <span class=\"slds-drop-zone__label\">\n    Drop components here\n  </span>\n</div>\n",
                    "description": "Empty drop zone ready to receive components"
                },
                {
                    "title": "Drop Zone in Drag State",
                    "code": "<div class=\"slds-drop-zone slds-drop-zone_drag\">\n  <span class=\"slds-drop-zone__label\">\n    Release to place component\n  </span>\n  <div class=\"slds-drop-zone_drag__slot\"></div>\n</div>\n",
                    "description": "Drop zone during active drag operation"
                },
                {
                    "title": "Drop Zone with Content",
                    "code": "<div class=\"slds-drop-zone\">\n  <div class=\"slds-drop-zone__label_container\">\n    <button class=\"slds-button slds-drop-zone__label_button\">\n      Add Component\n    </button>\n  </div>\n  <div class=\"\">\n    <!-- Placed components appear here -->\n  </div>\n</div>\n",
                    "description": "Drop zone with placed content and add button"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "drop-zone.css"
                ],
                "javascript": [
                    "Drag and drop event handlers",
                    "Drop validation logic",
                    "Visual feedback during drag",
                    "Component placement logic"
                ],
                "icons": [],
                "other_components": [
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "File Selector",
                    "relationship": "alternative",
                    "description": "Alternative for file uploads"
                },
                {
                    "name": "Builder Header",
                    "relationship": "complementary",
                    "description": "Often used together in builder interfaces"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/drop-zone/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Dueling Picklist",
            "description": "A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-dueling-list",
                "elements": [
                    {
                        "class": "slds-dueling-list__column",
                        "description": "Column container for each list and button group",
                        "purpose": "Organizes the two lists and control buttons in a flex layout"
                    },
                    {
                        "class": "slds-dueling-list__options",
                        "description": "Bounding visual container for listbox of options",
                        "purpose": "Contains the selectable options list with border and scrollable area"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-dueling-list__column_responsive",
                        "description": "Responsive layout modifier for dueling picklist columns",
                        "usage": "Applied to columns containing options to make them responsive and flexible"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected state of a listbox option",
                        "trigger": "When an option is selected (aria-selected='true')"
                    },
                    {
                        "class": "slds-is-grabbed",
                        "description": "Grabbed state of a listbox option during drag",
                        "trigger": "When an option is being dragged"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state for the entire dueling picklist",
                        "trigger": "When the component is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard dueling picklist with two lists and move buttons",
                    "classes": [
                        "slds-dueling-list"
                    ],
                    "usage_context": "Default dueling picklist implementation",
                    "differences": "Two side-by-side lists with buttons to move items between them"
                },
                {
                    "name": "Responsive",
                    "description": "Responsive dueling picklist that adapts to available space",
                    "classes": [
                        "slds-dueling-list",
                        "slds-dueling-list__column_responsive"
                    ],
                    "usage_context": "Use in narrow regions or responsive layouts",
                    "differences": "Columns flex to available space, items truncate with ellipsis"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - use custom implementation with SLDS classes"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between lists and buttons",
                    "Up/Down arrows to move focus and selection within a list",
                    "Shift + Up/Down to extend selection",
                    "Ctrl + Up/Down to move focus without changing selection",
                    "Ctrl + Space to toggle selection on focused option",
                    "Ctrl + A to select all options in a list",
                    "Cmd/Ctrl + Left/Right to move selected items between lists",
                    "Space to toggle Drag and Drop mode",
                    "In Drag mode: Up/Down arrows move selected items within current list"
                ],
                "screen_reader": [
                    "List labels announced via aria-labelledby",
                    "Operation instructions announced via aria-describedby",
                    "Selected state announced for each option",
                    "Drag and drop mode announced"
                ],
                "aria_attributes": [
                    "role='listbox' on each options container",
                    "aria-multiselectable='true' on each listbox",
                    "aria-selected on each option (true/false)",
                    "aria-labelledby pointing to list label",
                    "aria-describedby for operation instructions",
                    "tabindex='0' on selected items, '-1' on others",
                    "role='group' on form-element wrapper",
                    "aria-labelledby on group pointing to group label ID"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When users need to select multiple options from a large set",
                    "For moving items between available and selected lists",
                    "When reordering selected items is needed",
                    "For complex multi-select scenarios"
                ],
                "when_not_to_use": [
                    "For single selection (use select or combobox)",
                    "When only a few options exist (use checkboxes)",
                    "In very constrained spaces",
                    "When drag and drop is not supported"
                ],
                "best_practices": [
                    "Use group labels (fieldset/legend pattern) for accessibility",
                    "Provide clear operation instructions",
                    "Support both button and keyboard interactions",
                    "Implement proper focus management",
                    "Handle drag and drop gracefully with fallbacks",
                    "Use responsive variant for narrow layouts",
                    "Provide visual feedback for all interactions"
                ],
                "common_mistakes": [
                    "Not implementing proper ARIA listbox patterns",
                    "Missing keyboard navigation support",
                    "Inadequate focus management",
                    "Not providing operation instructions",
                    "Missing group labels for accessibility"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Dueling Picklist",
                    "code": "<div class=\"slds-form-element\" role=\"group\" aria-labelledby=\"dueling-picklist-label\">\n  <div class=\"slds-form-element__label slds-form-element__legend\" id=\"dueling-picklist-label\">\n    Select Options\n  </div>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-dueling-list\">\n      <div class=\"slds-dueling-list__column\">\n        <span class=\"slds-form-element__label\">Available</span>\n        <div class=\"slds-dueling-list__options\" role=\"listbox\" aria-multiselectable=\"true\" aria-labelledby=\"available-label\">\n          <div role=\"option\" aria-selected=\"false\" tabindex=\"0\">Option 1</div>\n          <div role=\"option\" aria-selected=\"false\" tabindex=\"-1\">Option 2</div>\n          <div role=\"option\" aria-selected=\"false\" tabindex=\"-1\">Option 3</div>\n        </div>\n      </div>\n      <div class=\"slds-dueling-list__column\">\n        <button class=\"slds-button slds-button_neutral\">Move Right</button>\n        <button class=\"slds-button slds-button_neutral\">Move Left</button>\n      </div>\n      <div class=\"slds-dueling-list__column\">\n        <span class=\"slds-form-element__label\">Selected</span>\n        <div class=\"slds-dueling-list__options\" role=\"listbox\" aria-multiselectable=\"true\" aria-labelledby=\"selected-label\">\n          <div role=\"option\" aria-selected=\"false\" tabindex=\"0\">Option 4</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    "description": "Basic dueling picklist with two lists and move buttons"
                },
                {
                    "title": "Responsive Dueling Picklist",
                    "code": "<div class=\"slds-form-element\" role=\"group\" aria-labelledby=\"responsive-picklist-label\">\n  <div class=\"slds-form-element__label slds-form-element__legend\" id=\"responsive-picklist-label\">\n    Select Options\n  </div>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-dueling-list\">\n      <div class=\"slds-dueling-list__column slds-dueling-list__column_responsive\">\n        <span class=\"slds-form-element__label\">Available</span>\n        <div class=\"slds-dueling-list__options\" role=\"listbox\" aria-multiselectable=\"true\">\n          <div role=\"option\" aria-selected=\"false\" tabindex=\"0\">Option 1</div>\n          <div role=\"option\" aria-selected=\"false\" tabindex=\"-1\">Option 2</div>\n        </div>\n      </div>\n      <div class=\"slds-dueling-list__column\">\n        <button class=\"slds-button slds-button_neutral\">Move Right</button>\n        <button class=\"slds-button slds-button_neutral\">Move Left</button>\n      </div>\n      <div class=\"slds-dueling-list__column slds-dueling-list__column_responsive\">\n        <span class=\"slds-form-element__label\">Selected</span>\n        <div class=\"slds-dueling-list__options\" role=\"listbox\" aria-multiselectable=\"true\">\n          <div role=\"option\" aria-selected=\"false\" tabindex=\"0\">Option 3</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    "description": "Responsive dueling picklist that adapts to available space"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "dueling-picklist.css",
                    "form-element.css",
                    "listbox.css",
                    "button.css"
                ],
                "javascript": [
                    "Listbox selection management",
                    "Item movement between lists",
                    "Drag and drop functionality (optional)",
                    "Keyboard navigation",
                    "Focus management"
                ],
                "icons": [],
                "other_components": [
                    "form-element",
                    "listbox",
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Listbox",
                    "relationship": "depends-on",
                    "description": "ARIA listbox component used for each list"
                },
                {
                    "name": "Select",
                    "relationship": "alternative",
                    "description": "For single selection scenarios"
                },
                {
                    "name": "Multi-Select",
                    "relationship": "similar",
                    "description": "Alternative multi-select component"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/dueling-picklist/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/dueling-picklist/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-01-15",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Follows ARIA listbox practices for accessibility."
            }
        },
        {
            "name": "Dynamic Icons",
            "description": "Interactive icon components that change appearance, state, or behavior based on user interaction or data conditions, providing visual feedback and enhanced user experience through animated or contextual icon transformations.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-icon-waffle",
                "elements": [
                    {
                        "class": "slds-icon-waffle_container",
                        "description": "Container for dynamic waffle/grid icon",
                        "purpose": "Holds the dynamic waffle icon structure"
                    },
                    {
                        "class": "slds-icon-ellie",
                        "description": "Animated Ellie (assistance) icon",
                        "purpose": "Provides animated feedback for assistance features"
                    },
                    {
                        "class": "slds-icon-eq",
                        "description": "Animated equalizer icon",
                        "purpose": "Shows dynamic audio or data visualization"
                    },
                    {
                        "class": "slds-icon-score",
                        "description": "Dynamic score indicator icon",
                        "purpose": "Displays changing scores or ratings"
                    },
                    {
                        "class": "slds-icon-trend",
                        "description": "Trend indicator icon",
                        "purpose": "Shows directional trends with dynamic arrows"
                    },
                    {
                        "class": "slds-icon-typing",
                        "description": "Typing indicator icon",
                        "purpose": "Shows active typing or loading states"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-animated",
                        "description": "Animated state for dynamic icons",
                        "trigger": "Applied when icon should show animation"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Waffle",
                    "description": "Grid/waffle icon with interactive states",
                    "classes": [
                        "slds-icon-waffle"
                    ],
                    "usage_context": "For app launcher or grid menu functionality",
                    "differences": "Interactive grid pattern that responds to user interaction"
                },
                {
                    "name": "Ellie",
                    "description": "Animated assistance icon",
                    "classes": [
                        "slds-icon-ellie"
                    ],
                    "usage_context": "For AI assistance or help features",
                    "differences": "Animated character providing contextual assistance"
                },
                {
                    "name": "Equalizer",
                    "description": "Dynamic equalizer visualization",
                    "classes": [
                        "slds-icon-eq"
                    ],
                    "usage_context": "For audio controls or data visualization",
                    "differences": "Animated bars showing activity or levels"
                }
            ],
            "lightning_component": {
                "name": "lightning-dynamic-icon",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-dynamic-icon",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS dynamic icon blueprint with animation support"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation to interactive dynamic icons",
                    "Enter/Space to activate icon functions",
                    "Focus indicators for interactive states"
                ],
                "screen_reader": [
                    "Icon purpose and state announced",
                    "Animation status communicated",
                    "Dynamic changes described appropriately"
                ],
                "aria_attributes": [
                    "aria-label for icon description",
                    "aria-live for dynamic state changes",
                    "role='img' for decorative icons",
                    "role='button' for interactive icons",
                    "aria-hidden for purely decorative elements"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For interactive feedback and state indication",
                    "When icons need to convey changing information",
                    "For engaging user interface animations",
                    "To show progress or activity states"
                ],
                "when_not_to_use": [
                    "For static decorative purposes (use regular icons)",
                    "When animation might distract or confuse users",
                    "In accessibility-sensitive contexts where motion should be reduced"
                ],
                "best_practices": [
                    "Use animations purposefully to convey meaning",
                    "Provide reduced-motion alternatives",
                    "Keep animations smooth and performant",
                    "Ensure icons remain recognizable during animation",
                    "Consider accessibility and motion sensitivity"
                ],
                "common_mistakes": [
                    "Overusing animation causing distraction",
                    "Animations that are too fast or jarring",
                    "Not providing static alternatives",
                    "Poor performance with multiple animated icons"
                ]
            },
            "code_examples": [
                {
                    "title": "Waffle Dynamic Icon",
                    "description": "Dynamic score indicator with changing values",
                    "code": "<div class=\"slds-icon-score\" role=\"img\" aria-label=\"Current score: 85\">\n      <svg class=\"slds-icon slds-icon_large\" viewBox=\"0 0 100 100\">\n        <circle class=\"\" cx=\"50\" cy=\"50\" r=\"45\" stroke=\"#e0e5ee\" stroke-width=\"10\" fill=\"none\"/>\n        <circle class=\"slds-is-animated\" cx=\"50\" cy=\"50\" r=\"45\" stroke=\"#0176d3\" stroke-width=\"10\" fill=\"none\"\\ \n                stroke-dasharray=\"283\" stroke-dashoffset=\"42\" transform=\"rotate(-90 50 50)\"/>\n        <text class=\"\" x=\"50\" y=\"50\" text-anchor=\"middle\" dy=\"0.3em\" font-size=\"20\" font-weight=\"bold\">85</text>\n      </svg>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "dynamic-icons.css",
                    "icons.css",
                    "animations.css"
                ],
                "javascript": [
                    "dynamic-icons.js"
                ],
                "icons": [
                    "dynamic-sprite.svg",
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "icon"
                ]
            },
            "related_components": [
                {
                    "name": "Icon",
                    "relationship": "parent",
                    "description": "Dynamic icons extend basic icon functionality"
                },
                {
                    "name": "Button",
                    "relationship": "container",
                    "description": "Often used within button components"
                },
                {
                    "name": "Spinner",
                    "relationship": "similar",
                    "description": "Similar animated feedback concept"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/dynamic-icons/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Dynamic Menu",
            "description": "A menu component that displays contextual navigation or actions in a popover dialog. It provides a flexible container for menu items with header and footer support, typically triggered by a button or other interaction.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-dynamic-menu",
                "elements": [
                    {
                        "class": "slds-dynamic-menu__header",
                        "description": "Header section of the dynamic menu",
                        "purpose": "Contains the menu title or heading"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard dynamic menu in popover",
                    "classes": [
                        "slds-dynamic-menu"
                    ],
                    "usage_context": "Default menu implementation with header and footer support",
                    "differences": "Displayed in a popover dialog with role='dialog'"
                }
            ],
            "lightning_component": {
                "name": "lightning-menu",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-menu",
                "mapping_notes": "lightning-menu provides dynamic menu functionality with menu items"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between menu items",
                    "Arrow keys to move through menu options",
                    "Enter or Space to select menu item",
                    "Escape to close menu"
                ],
                "screen_reader": [
                    "Dialog role announced",
                    "Menu header announced",
                    "Menu items announced as clickable actions",
                    "Current selection state communicated"
                ],
                "aria_attributes": [
                    "role='dialog' on menu container",
                    "aria-labelledby pointing to menu header",
                    "aria-describedby for additional context",
                    "Focus management when opening/closing"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For contextual navigation menus",
                    "When menu content changes based on context",
                    "For action menus triggered by buttons",
                    "When you need a menu with header and footer"
                ],
                "when_not_to_use": [
                    "For simple dropdown select (use select or combobox)",
                    "For static navigation (use standard menu)",
                    "When content doesn't change dynamically",
                    "For very simple action lists (use dropdown menu)"
                ],
                "best_practices": [
                    "Provide clear, descriptive header text",
                    "Group related menu items logically",
                    "Use appropriate icons for menu items",
                    "Ensure proper focus management",
                    "Close menu on selection or Escape key",
                    "Position menu appropriately relative to trigger"
                ],
                "common_mistakes": [
                    "Missing dialog role for accessibility",
                    "Poor keyboard navigation support",
                    "Not managing focus properly",
                    "Unclear menu item labels",
                    "Menu not closing on selection"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Dynamic Menu",
                    "code": "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top-left\" role=\"dialog\" aria-labelledby=\"menu-header\" aria-describedby=\"menu-body\">\n  <div class=\"slds-popover__header\">\n    <h3 id=\"menu-header\" class=\"slds-dynamic-menu__header\">Menu Options</h3>\n  </div>\n  <div id=\"menu-body\" class=\"slds-popover__body\">\n    <ul class=\"\" role=\"menu\">\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"0\">\n          <span class=\"slds-truncate\" title=\"Menu Item 1\">Menu Item 1</span>\n        </a>\n      </li>\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n          <span class=\"slds-truncate\" title=\"Menu Item 2\">Menu Item 2</span>\n        </a>\n      </li>\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n          <span class=\"slds-truncate\" title=\"Menu Item 3\">Menu Item 3</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n</section>\n",
                    "description": "Basic dynamic menu with header and menu items"
                },
                {
                    "title": "Dynamic Menu with Footer",
                    "code": "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top\" role=\"dialog\" aria-labelledby=\"menu-header-2\" aria-describedby=\"menu-body-2\">\n  <div class=\"slds-popover__header\">\n    <h3 id=\"menu-header-2\" class=\"slds-dynamic-menu__header\">Actions</h3>\n  </div>\n  <div id=\"menu-body-2\" class=\"slds-popover__body\">\n    <ul class=\"\" role=\"menu\">\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"0\">\n          <span class=\"slds-truncate\" title=\"Action 1\">Action 1</span>\n        </a>\n      </li>\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n          <span class=\"slds-truncate\" title=\"Action 2\">Action 2</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"slds-popover__footer\">\n    <a href=\"#\" class=\"slds-text-link\">View All</a>\n  </div>\n</section>\n",
                    "description": "Dynamic menu with header, items, and footer link"
                },
                {
                    "title": "Dynamic Menu with Icons",
                    "code": "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top-right\" role=\"dialog\" aria-labelledby=\"menu-header-3\">\n  <div class=\"slds-popover__header\">\n    <h3 id=\"menu-header-3\" class=\"slds-dynamic-menu__header\">Document Actions</h3>\n  </div>\n  <div class=\"slds-popover__body\">\n    <ul class=\"\" role=\"menu\">\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"0\">\n          <span class=\"slds-icon_container slds-icon-utility-download slds-m-right_x-small\">\n            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>\n            </svg>\n          </span>\n          <span class=\"slds-truncate\" title=\"Download\">Download</span>\n        </a>\n      </li>\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n          <span class=\"slds-icon_container slds-icon-utility-share slds-m-right_x-small\">\n            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#share\"></use>\n            </svg>\n          </span>\n          <span class=\"slds-truncate\" title=\"Share\">Share</span>\n        </a>\n      </li>\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n          <span class=\"slds-icon_container slds-icon-utility-delete slds-m-right_x-small\">\n            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#delete\"></use>\n            </svg>\n          </span>\n          <span class=\"slds-truncate\" title=\"Delete\">Delete</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n</section>\n",
                    "description": "Dynamic menu with icons next to menu items"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "dynamic-menu.css",
                    "popover.css",
                    "dropdown.css"
                ],
                "javascript": [
                    "Menu open/close management",
                    "Keyboard navigation",
                    "Focus management",
                    "Click outside to close"
                ],
                "icons": [
                    "Various utility icons for menu items"
                ],
                "other_components": [
                    "popover",
                    "dropdown",
                    "menu"
                ]
            },
            "related_components": [
                {
                    "name": "Menu",
                    "relationship": "parent",
                    "description": "Base menu component"
                },
                {
                    "name": "Dropdown",
                    "relationship": "similar",
                    "description": "Alternative menu pattern for simpler use cases"
                },
                {
                    "name": "Popover",
                    "relationship": "container",
                    "description": "Popover container for the menu"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/dynamic-menu/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Expandable Section",
            "description": "A content container that can be expanded or collapsed to show or hide detailed information, providing progressive disclosure of content.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-section",
                "elements": [
                    {
                        "class": "slds-section__title",
                        "description": "Header area with expand/collapse control",
                        "purpose": "Contains title and toggle button for section"
                    },
                    {
                        "class": "slds-section__title-action",
                        "description": "Clickable area for expand/collapse",
                        "purpose": "Interactive element to toggle section state"
                    },
                    {
                        "class": "slds-section__content",
                        "description": "Collapsible content area",
                        "purpose": "Contains the expandable section content"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Expanded section state",
                        "trigger": "When section content is visible"
                    },
                    {
                        "class": "slds-is-closed",
                        "description": "Collapsed section state",
                        "trigger": "When section content is hidden"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard expandable section",
                    "classes": [
                        "slds-section"
                    ],
                    "usage_context": "Default expandable section for progressive disclosure",
                    "differences": "Toggleable content section with expand/collapse control"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented as custom component"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus expand/collapse button",
                    "Enter/Space to toggle section state",
                    "Tab to navigate through expanded content"
                ],
                "screen_reader": [
                    "Section title and current state announced",
                    "Expansion state changes communicated",
                    "Content availability indicated clearly"
                ],
                "aria_attributes": [
                    "aria-expanded on toggle button",
                    "aria-controls linking button to content",
                    "aria-labelledby for content area",
                    "role='button' for toggle element"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To manage large amounts of content in limited space",
                    "For optional or secondary information",
                    "When content hierarchy needs progressive disclosure",
                    "To reduce cognitive load by hiding details initially"
                ],
                "when_not_to_use": [
                    "For critical information users must see",
                    "When all content should be immediately visible",
                    "For single pieces of simple information"
                ],
                "best_practices": [
                    "Use clear, descriptive section titles",
                    "Provide visual indicators for expand/collapse state",
                    "Group related content logically",
                    "Consider default expanded state for important content",
                    "Maintain consistent interaction patterns"
                ],
                "common_mistakes": [
                    "Hiding critical information in collapsed sections",
                    "Unclear section titles or purposes",
                    "Poor visual indicators for state",
                    "Inconsistent expand/collapse behavior"
                ]
            },
            "code_examples": [
                {
                    "title": "Expandable Section",
                    "code": "<div class=\"slds-section slds-is-open\">\n      <h3 class=\"slds-section__title\">\n        <button aria-controls=\"expando-unique-id\" aria-expanded=\"true\" class=\"slds-button slds-section__title-action\">\n          <svg class=\"slds-section__title-action-icon slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#switch\"></use>\n          </svg>\n          <span class=\"slds-truncate\" title=\"Section Title\">Section Title</span>\n        </button>\n      </h3>\n      <div aria-hidden=\"false\" class=\"slds-section__content\" id=\"expando-unique-id\">\n        <p>This is the expandable content area. It can contain any type of content including text, forms, lists, or other components.</p>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "section.css",
                    "button.css"
                ],
                "javascript": [
                    "section.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "icons",
                    "truncate"
                ]
            },
            "related_components": [
                {
                    "name": "Accordion",
                    "relationship": "similar",
                    "description": "Similar expand/collapse pattern for multiple sections"
                },
                {
                    "name": "Tabs",
                    "relationship": "alternative",
                    "description": "Alternative for organizing multiple content areas"
                },
                {
                    "name": "Cards",
                    "relationship": "container",
                    "description": "Often used within card components"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/expandable-section/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Expression",
            "description": "A formula builder interface that allows users to construct complex expressions, calculations, and logical conditions through visual components, operators, and functions with syntax validation and auto-completion.",
            "category": "Input",
            "slds_classes": {
                "root": "",
                "elements": [
                    {
                        "class": "slds-expression__group",
                        "description": "Logical grouping container for expression elements",
                        "purpose": "Groups related expression components together"
                    },
                    {
                        "class": "slds-expression__row",
                        "description": "Individual row within expression builder",
                        "purpose": "Contains a single expression statement or condition"
                    },
                    {
                        "class": "slds-expression__buttons",
                        "description": "Action buttons for expression manipulation",
                        "purpose": "Contains add, remove, and group action buttons"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state for invalid expressions",
                        "trigger": "Applied when expression syntax is invalid"
                    },
                    {
                        "class": "slds-is-editing",
                        "description": "Active editing state",
                        "trigger": "Applied when user is actively editing expression"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard expression builder interface",
                    "classes": [],
                    "usage_context": "Default implementation for expression building",
                    "differences": "Basic expression builder with fields and operators"
                },
                {
                    "name": "Compound",
                    "description": "Multi-condition expression builder",
                    "classes": [],
                    "usage_context": "When multiple logical conditions are needed",
                    "differences": "Support for AND/OR logic and grouped conditions"
                },
                {
                    "name": "Advanced",
                    "description": "Advanced expression builder with functions",
                    "classes": [],
                    "usage_context": "When complex calculations and functions are required",
                    "differences": "Includes function library and advanced operators"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented using custom components with lightning-combobox and lightning-input patterns"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through expression elements",
                    "Enter/Space to activate buttons and dropdowns",
                    "Arrow keys for navigating expression components",
                    "Delete/Backspace to remove expression elements"
                ],
                "screen_reader": [
                    "Expression structure and logic announced",
                    "Field and operator selections described",
                    "Validation errors clearly communicated",
                    "Expression summary provided"
                ],
                "aria_attributes": [
                    "role='group' for expression sections",
                    "aria-label for expression components",
                    "aria-describedby for validation messages",
                    "aria-expanded for collapsible groups",
                    "aria-invalid for error states"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For building complex business rules and formulas",
                    "When users need to create calculated fields",
                    "For advanced filtering and search criteria",
                    "In workflow and automation rule builders"
                ],
                "when_not_to_use": [
                    "For simple single-field filters (use basic inputs)",
                    "When users don't need complex logic",
                    "For purely visual/design-related conditions"
                ],
                "best_practices": [
                    "Provide clear field and operator labels",
                    "Include helpful examples and documentation",
                    "Validate expressions in real-time",
                    "Offer function assistance and auto-completion",
                    "Group related conditions logically"
                ],
                "common_mistakes": [
                    "Poor validation feedback",
                    "Overwhelming users with too many options",
                    "Unclear operator meanings",
                    "Not providing expression examples"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Expression Builder",
                    "description": "Advanced expression builder including functions and calculations",
                    "code": "<div class=\"\">\n      <div class=\"\">\n        <div class=\"slds-expression__group\">\n          <div class=\"slds-expression__row\">\n            <div class=\"slds-grid slds-grid_align-center\">\n              <div class=\"slds-col\">\n                <div class=\"slds-form-element\">\n                  <label class=\"slds-form-element__label\">Function</label>\n                  <div class=\"slds-form-element__control\">\n                    <div class=\"slds-combobox_container\">\n                      <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\">\n                        <div class=\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\">\n                          <input type=\"text\" class=\"slds-input slds-combobox__input\" value=\"SUM(\" readonly>\n                          <span class=\"slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right\">\n                            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n                            </svg>\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"slds-col slds-p-horizontal_x-small\">\n                <div class=\"slds-form-element\">\n                  <label class=\"slds-form-element__label\">Field</label>\n                  <div class=\"slds-form-element__control\">\n                    <input type=\"text\" class=\"slds-input\" value=\"Opportunity Amount\">\n                  </div>\n                </div>\n              </div>\n              <div class=\"slds-col slds-no-flex\">\n                <span class=\"slds-text-body_regular\">)</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"slds-expression__row slds-m-top_small\">\n            <div class=\"slds-form-element\">\n              <label class=\"slds-form-element__label\">Preview</label>\n              <div class=\"slds-form-element__control\">\n                <div class=\"slds-form-element__static slds-p-around_small slds-text-color_weak\">\n                  SUM(Opportunity.Amount)\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"slds-expression__buttons slds-m-top_small\">\n          <div class=\"slds-button-group\">\n            <button class=\"slds-button slds-button_neutral\">Insert Field</button>\n            <button class=\"slds-button slds-button_neutral\">Insert Function</button>\n            <button class=\"slds-button slds-button_neutral\">Insert Operator</button>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "expression.css",
                    "form-element.css",
                    "combobox.css",
                    "button.css"
                ],
                "javascript": [
                    "expression.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "form-element",
                    "combobox",
                    "button",
                    "select",
                    "input"
                ]
            },
            "related_components": [
                {
                    "name": "Form Element",
                    "relationship": "container",
                    "description": "Uses form elements for input controls"
                },
                {
                    "name": "Combobox",
                    "relationship": "depends-on",
                    "description": "Uses combobox for field and function selection"
                },
                {
                    "name": "Visual Picker",
                    "relationship": "alternative",
                    "description": "Alternative for simpler selection scenarios"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/expression/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Feeds",
            "description": "Activity feed component that displays a chronological list of updates, posts, or activities. Similar to social media feeds, it shows user-generated content with timestamps and interactions.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "slds-feed",
                "elements": [
                    {
                        "class": "slds-feed__list",
                        "description": "List container for feed items",
                        "purpose": "Holds the ordered list of feed entries"
                    },
                    {
                        "class": "slds-feed__item",
                        "description": "Individual feed item",
                        "purpose": "Wraps each post or update in the feed"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard activity feed",
                    "classes": [
                        "slds-feed"
                    ],
                    "usage_context": "Default feed implementation for activity streams",
                    "differences": "Chronological list of user activities and updates"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically built with custom components or lightning-record-view-form"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate through feed items",
                    "Enter to activate links or actions",
                    "Arrow keys to scroll through feed"
                ],
                "screen_reader": [
                    "Feed role announced",
                    "Feed items announced in order",
                    "Timestamps and authors announced",
                    "New items announced when added"
                ],
                "aria_attributes": [
                    "role='feed' on container",
                    "role='article' on feed items",
                    "aria-label for feed region",
                    "aria-posinset and aria-setsize for position",
                    "aria-live for new items (polite)"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For social activity streams",
                    "To display chronological updates",
                    "For user-generated content feeds",
                    "In collaboration or communication features"
                ],
                "when_not_to_use": [
                    "For static content lists",
                    "When chronology isn't important",
                    "For structured data tables",
                    "When real-time updates aren't needed"
                ],
                "best_practices": [
                    "Display items in reverse chronological order (newest first)",
                    "Include timestamps on all items",
                    "Show author/source clearly",
                    "Support infinite scroll or pagination",
                    "Provide refresh mechanism",
                    "Handle real-time updates smoothly"
                ],
                "common_mistakes": [
                    "Poor performance with many items",
                    "Missing timestamps",
                    "Unclear authorship",
                    "Not handling new items gracefully",
                    "Inadequate loading states"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Feed",
                    "code": "<div class=\"slds-feed\" role=\"feed\" aria-label=\"Activity feed\">\n  <ul class=\"slds-feed__list\">\n    <li class=\"slds-feed__item\" role=\"article\">\n      <article class=\"slds-post\">\n        <header class=\"slds-post__header\">\n          <div class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__figure\">\n              <span class=\"slds-avatar slds-avatar_circle slds-avatar_medium\">\n                <img src=\"/assets/images/avatar1.jpg\" alt=\"John Doe\" />\n              </span>\n            </div>\n            <div class=\"slds-media__body\">\n              <p class=\"\">John Doe</p>\n              <p class=\"slds-text-body_small\">2 hours ago</p>\n            </div>\n          </div>\n        </header>\n        <div class=\"slds-post__content\">\n          <p>Just completed the Q4 presentation deck. Ready for review!</p>\n        </div>\n        <footer class=\"slds-post__footer\">\n          <ul class=\"slds-list_horizontal slds-has-dividers_left\">\n            <li class=\"slds-item\">Like</li>\n            <li class=\"slds-item\">Comment</li>\n            <li class=\"slds-item\">Share</li>\n          </ul>\n        </footer>\n      </article>\n    </li>\n    <li class=\"slds-feed__item\" role=\"article\">\n      <article class=\"slds-post\">\n        <header class=\"slds-post__header\">\n          <div class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__figure\">\n              <span class=\"slds-avatar slds-avatar_circle slds-avatar_medium\">\n                <img src=\"/assets/images/avatar2.jpg\" alt=\"Jane Smith\" />\n              </span>\n            </div>\n            <div class=\"slds-media__body\">\n              <p class=\"\">Jane Smith</p>\n              <p class=\"slds-text-body_small\">5 hours ago</p>\n            </div>\n          </div>\n        </header>\n        <div class=\"slds-post__content\">\n          <p>Great team meeting today! Looking forward to our next sprint.</p>\n        </div>\n        <footer class=\"slds-post__footer\">\n          <ul class=\"slds-list_horizontal slds-has-dividers_left\">\n            <li class=\"slds-item\">Like (3)</li>\n            <li class=\"slds-item\">Comment (1)</li>\n            <li class=\"slds-item\">Share</li>\n          </ul>\n        </footer>\n      </article>\n    </li>\n  </ul>\n</div>\n",
                    "description": "Activity feed with posts from multiple users"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "feeds.css",
                    "post.css",
                    "avatar.css"
                ],
                "javascript": [
                    "Infinite scroll or pagination",
                    "Real-time update handling",
                    "Post interaction handlers",
                    "Feed refresh mechanism"
                ],
                "icons": [],
                "other_components": [
                    "avatar",
                    "post",
                    "media-object"
                ]
            },
            "related_components": [
                {
                    "name": "Activity Timeline",
                    "relationship": "similar",
                    "description": "Alternative chronological display"
                },
                {
                    "name": "Chat",
                    "relationship": "similar",
                    "description": "Similar messaging pattern"
                },
                {
                    "name": "Publisher",
                    "relationship": "complementary",
                    "description": "Input component for creating feed posts"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/feeds/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "File Selector",
            "description": "A file upload interface that allows users to select and upload files through drag-and-drop areas, browse buttons, or direct file input, with support for multiple files, file type restrictions, and upload progress indication.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-file-selector",
                "elements": [
                    {
                        "class": "slds-file-selector__dropzone",
                        "description": "Drag and drop zone for file selection",
                        "purpose": "Provides area for dragging and dropping files"
                    },
                    {
                        "class": "slds-file-selector__body",
                        "description": "Main content area of file selector",
                        "purpose": "Contains file selection interface and messaging"
                    },
                    {
                        "class": "slds-file-selector__button",
                        "description": "Browse button for file selection",
                        "purpose": "Triggers file browser dialog"
                    },
                    {
                        "class": "slds-file-selector__input",
                        "description": "Hidden file input element",
                        "purpose": "Actual file input for form submission"
                    },
                    {
                        "class": "slds-file-selector__text",
                        "description": "Instructional text within file selector",
                        "purpose": "Provides guidance and instructions to users"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-file-selector_files",
                        "description": "File selector with file list display",
                        "usage": "When showing selected files is important"
                    },
                    {
                        "class": "slds-file-selector_images",
                        "description": "Image-specific file selector",
                        "usage": "When selector is specifically for images"
                    },
                    {
                        "class": "slds-file-selector_integrated",
                        "description": "Integrated file selector within forms",
                        "usage": "When file selector is part of a larger form"
                    }
                ],
                "states": [
                    {
                        "class": "slds-has-drag-over",
                        "description": "Drag over state for dropzone",
                        "trigger": "Applied when files are being dragged over the dropzone"
                    },
                    {
                        "class": "slds-has-error",
                        "description": "Error state for file selection",
                        "trigger": "Applied when file upload or selection fails"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard file selector with dropzone",
                    "classes": [
                        "slds-file-selector"
                    ],
                    "usage_context": "Default implementation for file upload",
                    "differences": "Basic dropzone with browse functionality"
                },
                {
                    "name": "With Files",
                    "description": "File selector displaying selected files",
                    "classes": [
                        "slds-file-selector",
                        "slds-file-selector_files"
                    ],
                    "usage_context": "When showing file list is important",
                    "differences": "Includes file list display below selector"
                },
                {
                    "name": "Images",
                    "description": "Image-specific file selector",
                    "classes": [
                        "slds-file-selector",
                        "slds-file-selector_images"
                    ],
                    "usage_context": "Specifically for image uploads",
                    "differences": "Optimized for image files with previews"
                }
            ],
            "lightning_component": {
                "name": "lightning-file-upload",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS file selector blueprint with upload functionality"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation to file selector elements",
                    "Enter/Space to activate browse button",
                    "Enter/Space to select files in file list",
                    "Delete/Backspace to remove selected files"
                ],
                "screen_reader": [
                    "File selector purpose and instructions announced",
                    "Drag and drop capability communicated",
                    "Selected files list properly structured",
                    "Upload progress and status described"
                ],
                "aria_attributes": [
                    "aria-label for file input elements",
                    "aria-describedby for instructions",
                    "role='button' for dropzone areas",
                    "aria-live for upload status updates",
                    "aria-expanded for file lists"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For file upload functionality",
                    "When users need to attach documents",
                    "For image or media upload scenarios",
                    "In forms requiring file attachments"
                ],
                "when_not_to_use": [
                    "For text input (use input fields)",
                    "When files aren't actually uploaded",
                    "For purely decorative file interfaces"
                ],
                "best_practices": [
                    "Clearly indicate supported file types",
                    "Provide file size limitations",
                    "Show upload progress for large files",
                    "Allow removal of selected files",
                    "Validate files before upload"
                ],
                "common_mistakes": [
                    "Not specifying file type restrictions",
                    "Poor error handling for invalid files",
                    "Missing progress indicators",
                    "Unclear instructions for users"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic File Selector",
                    "description": "File selector showing upload progress",
                    "code": "<div class=\"slds-form-element\">\n      <span class=\"slds-form-element__label\">Upload Files</span>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-file-selector slds-file-selector_files\">\n          <div class=\"slds-file-selector__dropzone\">\n            <label class=\"slds-file-selector__body\">\n              <span class=\"slds-spinner slds-spinner_medium slds-spinner_inline\">\n                <span class=\"slds-assistive-text\">Uploading...</span>\n                <div class=\"slds-spinner__dot-a\"></div>\n                <div class=\"slds-spinner__dot-b\"></div>\n              </span>\n              <span class=\"slds-file-selector__text\">Uploading files...</span>\n            </label>\n          </div>\n        </div>\n        <div class=\"slds-m-top_small\">\n          <div class=\"\">\n            <div class=\"slds-media slds-media_center\">\n              <span class=\"slds-media__figure\">\n                <span class=\"\">\n                  <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                    <use xlink:href=\"/assets/icons/doctype-sprite/svg/symbols.svg#pdf\"></use>\n                  </svg>\n                </span>\n              </span>\n              <span class=\"slds-media__body\">\n                <span class=\"\">\n                  <span class=\"\">annual-report.pdf</span>\n                  <span class=\"\">Uploading... 65%</span>\n                  <div class=\"slds-progress-bar slds-progress-bar_x-small slds-m-top_xx-small\">\n                    <span class=\"slds-progress-bar__value\" style=\"width: 65%\"></span>\n                  </div>\n                </span>\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "file-selector.css",
                    "button.css",
                    "progress-bar.css",
                    "spinner.css"
                ],
                "javascript": [
                    "file-selector.js"
                ],
                "icons": [
                    "utility-sprite.svg",
                    "doctype-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "progress-bar",
                    "spinner",
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Form Element",
                    "relationship": "container",
                    "description": "File selector is typically wrapped in form elements"
                },
                {
                    "name": "Button",
                    "relationship": "depends-on",
                    "description": "Uses buttons for browse and remove actions"
                },
                {
                    "name": "Progress Bar",
                    "relationship": "depends-on",
                    "description": "Shows upload progress for files"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/file-selector/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Files",
            "description": "Components for displaying and interacting with file attachments, uploads, and document management, including file previews and actions.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-file",
                "elements": [
                    {
                        "class": "slds-file__figure",
                        "description": "Container for file icon or preview",
                        "purpose": "Holds visual representation of the file"
                    },
                    {
                        "class": "slds-file__title",
                        "description": "File name or title",
                        "purpose": "Primary label for the file"
                    },
                    {
                        "class": "slds-file__text",
                        "description": "Additional file information",
                        "purpose": "Secondary details like size, type, or date"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-file_card",
                        "description": "Card-style file display",
                        "usage": "File representation in card format"
                    },
                    {
                        "class": "slds-file_overlay",
                        "description": "Overlay-style file display",
                        "usage": "File with overlay information"
                    }
                ],
                "states": [
                    {
                        "class": "slds-file_loading",
                        "description": "Loading state for file operations",
                        "trigger": "When file is being uploaded or processed"
                    },
                    {
                        "class": "slds-has-error",
                        "description": "Error state for file operations",
                        "trigger": "When file operation has failed"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard file display component",
                    "classes": [
                        "slds-file"
                    ],
                    "usage_context": "Default file representation with icon and metadata",
                    "differences": "Basic file display with icon, name, and actions"
                }
            ],
            "lightning_component": {
                "name": "lightning-file-download",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-file-download",
                "mapping_notes": "Partially mapped through lightning-file-download - full file management requires custom implementation"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through file actions",
                    "Enter/Space to activate file actions",
                    "Focus management for file interactions"
                ],
                "screen_reader": [
                    "File name and type announced",
                    "File size and metadata communicated",
                    "Available actions clearly described",
                    "File status and state changes announced"
                ],
                "aria_attributes": [
                    "aria-label for file containers",
                    "aria-describedby for file metadata",
                    "role='button' for interactive file elements",
                    "aria-live for status updates"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For displaying file attachments or uploads",
                    "In document management interfaces",
                    "For file download or sharing functionality",
                    "When users need to interact with files"
                ],
                "when_not_to_use": [
                    "For decorative images (use image components)",
                    "For functional icons (use icon components)",
                    "When file interaction is not needed"
                ],
                "best_practices": [
                    "Show clear file type indicators",
                    "Display relevant file metadata (size, date)",
                    "Provide appropriate actions for file type",
                    "Handle loading and error states gracefully",
                    "Use recognizable file type icons"
                ],
                "common_mistakes": [
                    "Not showing file type or size",
                    "Poor error handling for file operations",
                    "Unclear file action buttons",
                    "Missing loading states for file operations"
                ]
            },
            "code_examples": [
                {
                    "title": "File Card",
                    "code": "<div class=\"slds-file slds-file_card\">\n      <figure class=\"slds-file__figure\">\n        <a href=\"#\">\n          <span class=\"slds-icon_container slds-icon-doctype-pdf\">\n            <svg class=\"slds-icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/doctype-sprite/svg/symbols.svg#pdf\"></use>\n            </svg>\n          </span>\n        </a>\n      </figure>\n      <div class=\"\">\n        <div class=\"slds-file__title\">\n          <a href=\"#\" title=\"Proposal_2024.pdf\">Proposal_2024.pdf</a>\n        </div>\n        <div class=\"slds-file__text slds-text-body_small\">\n          PDF • 1.2 MB\n        </div>\n      </div>\n      <div class=\"\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border-filled\" title=\"Download\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Download</span>\n        </button>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "files.css",
                    "media-objects.css"
                ],
                "javascript": [],
                "icons": [
                    "doctype-sprite.svg",
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "icons",
                    "button-icon",
                    "media-objects"
                ]
            },
            "related_components": [
                {
                    "name": "Cards",
                    "relationship": "container",
                    "description": "Often used as container for file components"
                },
                {
                    "name": "Media Objects",
                    "relationship": "similar",
                    "description": "Similar layout pattern for content with media"
                },
                {
                    "name": "Icons",
                    "relationship": "depends-on",
                    "description": "File type icons enhance file recognition"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/files/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Form Element",
            "description": "A foundational wrapper component that provides consistent structure, labeling, and validation messaging for form inputs, ensuring accessibility and visual consistency across form controls.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-form-element",
                "elements": [
                    {
                        "class": "slds-form-element__label",
                        "description": "Label for the form element",
                        "purpose": "Provides accessible labeling for form controls"
                    },
                    {
                        "class": "slds-form-element__control",
                        "description": "Container for the form control",
                        "purpose": "Wraps the actual input element"
                    },
                    {
                        "class": "slds-form-element__help",
                        "description": "Help text for the form element",
                        "purpose": "Provides additional guidance or instructions"
                    },
                    {
                        "class": "slds-form-element__icon",
                        "description": "Icon associated with the form element",
                        "purpose": "Visual indicator or status icon"
                    },
                    {
                        "class": "slds-form-element__addon",
                        "description": "Additional content attached to form element",
                        "purpose": "Supplementary content like buttons or text"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-form-element_stacked",
                        "description": "Stacked layout with label above control",
                        "usage": "Default vertical layout for form elements"
                    },
                    {
                        "class": "slds-form-element_horizontal",
                        "description": "Horizontal layout with label beside control",
                        "usage": "When horizontal alignment is preferred"
                    },
                    {
                        "class": "slds-form-element_compound",
                        "description": "Compound form element with multiple controls",
                        "usage": "For grouped or related form controls"
                    }
                ],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state for form element",
                        "trigger": "Applied when validation fails"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard form element wrapper",
                    "classes": [
                        "slds-form-element"
                    ],
                    "usage_context": "Default wrapper for individual form controls",
                    "differences": "Basic structure with label, control, and help text"
                },
                {
                    "name": "Stacked",
                    "description": "Vertical layout form element",
                    "classes": [
                        "slds-form-element",
                        "slds-form-element_stacked"
                    ],
                    "usage_context": "When vertical layout is preferred",
                    "differences": "Label positioned above the form control"
                },
                {
                    "name": "Horizontal",
                    "description": "Horizontal layout form element",
                    "classes": [
                        "slds-form-element",
                        "slds-form-element_horizontal"
                    ],
                    "usage_context": "When horizontal alignment is needed",
                    "differences": "Label positioned beside the form control"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - form element structure is built into Lightning input components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation to form controls",
                    "Label association with controls",
                    "Error message association"
                ],
                "screen_reader": [
                    "Label text announced with control",
                    "Required state communicated",
                    "Error messages read when present",
                    "Help text associated and announced"
                ],
                "aria_attributes": [
                    "for attribute linking label to control",
                    "aria-describedby for help text",
                    "aria-required for required fields",
                    "aria-invalid for error states",
                    "aria-labelledby for complex labeling"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "As wrapper for all form input controls",
                    "When consistent form structure is needed",
                    "For accessible form labeling",
                    "When validation messaging is required"
                ],
                "when_not_to_use": [
                    "For non-form content",
                    "When custom form structure is needed"
                ],
                "best_practices": [
                    "Always include meaningful labels",
                    "Provide clear error messages",
                    "Use help text for additional guidance",
                    "Maintain consistent form element structure",
                    "Ensure proper label-control association"
                ],
                "common_mistakes": [
                    "Missing or unclear labels",
                    "Poor error message placement",
                    "Inconsistent form element structure",
                    "Breaking label-control associations"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Form Element",
                    "description": "Form element with multiple related controls",
                    "code": "<fieldset class=\"slds-form-element slds-form-element_compound\">\n      <legend class=\"slds-form-element__label\">Address</legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"\">\n          <div class=\"\">\n            <div class=\"slds-size_1-of-1\">\n              <div class=\"slds-form-element\">\n                <label class=\"slds-form-element__label\" for=\"street\">Street Address</label>\n                <div class=\"slds-form-element__control\">\n                  <input type=\"text\" id=\"street\" class=\"slds-input\">\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"\">\n            <div class=\"slds-size_1-of-2\">\n              <div class=\"slds-form-element\">\n                <label class=\"slds-form-element__label\" for=\"city\">City</label>\n                <div class=\"slds-form-element__control\">\n                  <input type=\"text\" id=\"city\" class=\"slds-input\">\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-size_1-of-2\">\n              <div class=\"slds-form-element\">\n                <label class=\"slds-form-element__label\" for=\"zip\">ZIP Code</label>\n                <div class=\"slds-form-element__control\">\n                  <input type=\"text\" id=\"zip\" class=\"slds-input\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      </fieldset>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "form-element.css",
                    "input.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "input",
                    "select",
                    "textarea",
                    "checkbox",
                    "radio"
                ]
            },
            "related_components": [
                {
                    "name": "Input",
                    "relationship": "container",
                    "description": "Form element wraps input components"
                },
                {
                    "name": "Select",
                    "relationship": "container",
                    "description": "Form element wraps select components"
                },
                {
                    "name": "Textarea",
                    "relationship": "container",
                    "description": "Form element wraps textarea components"
                },
                {
                    "name": "Checkbox",
                    "relationship": "container",
                    "description": "Form element wraps checkbox components"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/form-element/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Global Header",
            "description": "The primary navigation header that appears at the top of the application, providing access to global navigation, search, notifications, and user account functions.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-global-header",
                "elements": [
                    {
                        "class": "slds-global-header__logo",
                        "description": "Container for application logo or brand",
                        "purpose": "Displays the primary brand identity"
                    },
                    {
                        "class": "slds-global-header__item",
                        "description": "Individual navigation item wrapper",
                        "purpose": "Wraps each navigation element"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active navigation item state",
                        "trigger": "Applied to currently selected navigation item"
                    },
                    {
                        "class": "slds-has-notification",
                        "description": "Notification indicator state",
                        "trigger": "Applied when notifications are present"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard global header with full navigation",
                    "classes": [
                        "slds-global-header"
                    ],
                    "usage_context": "Default implementation for application header",
                    "differences": "Full-featured header with logo, navigation, and user controls"
                },
                {
                    "name": "Minimal",
                    "description": "Minimal global header with essential elements only",
                    "classes": [
                        "slds-global-header"
                    ],
                    "usage_context": "Simplified header for focused experiences",
                    "differences": "Reduced elements focusing on core navigation"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented using lightning-layout and custom components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through header elements",
                    "Enter/Space to activate navigation items",
                    "Arrow keys for dropdown navigation",
                    "Escape to close open menus"
                ],
                "screen_reader": [
                    "Header landmark identified",
                    "Navigation structure announced",
                    "User account information communicated",
                    "Notification status indicated"
                ],
                "aria_attributes": [
                    "role='banner' for header landmark",
                    "role='navigation' for nav sections",
                    "aria-label for navigation areas",
                    "aria-expanded for dropdown menus",
                    "aria-current for active navigation",
                    "aria-live for notification updates"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "As the primary application header",
                    "For global navigation and branding",
                    "When users need access to account functions",
                    "For consistent cross-application navigation"
                ],
                "when_not_to_use": [
                    "For page-specific headers (use page headers instead)",
                    "In embedded or widget contexts",
                    "When space is extremely limited"
                ],
                "best_practices": [
                    "Keep navigation items concise and clear",
                    "Prioritize most important functions",
                    "Provide clear visual hierarchy",
                    "Ensure responsive behavior across devices",
                    "Maintain consistent branding"
                ],
                "common_mistakes": [
                    "Overcrowding with too many navigation items",
                    "Poor mobile responsive behavior",
                    "Inconsistent styling across applications",
                    "Missing accessibility landmarks"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Global Header",
                    "description": "Simplified global header with essential elements",
                    "code": "<header class=\"slds-global-header\" role=\"banner\">\n      <div class=\"slds-global-header__logo\">\n        <a href=\"#\" class=\"\">\n          <img src=\"/assets/images/logo-minimal.svg\" alt=\"Logo\" class=\"\">\n        </a>\n      </div>\n      <nav class=\"\" role=\"navigation\" aria-label=\"Primary\">\n        <ul class=\"\">\n          <li class=\"slds-global-header__item\">\n            <a href=\"#\" class=\"slds-is-active\">Dashboard</a>\n          </li>\n          <li class=\"slds-global-header__item\">\n            <a href=\"#\" class=\"\">Reports</a>\n          </li>\n        </ul>\n      </nav>\n      <div class=\"\">\n        <span class=\"slds-avatar slds-avatar_circle slds-avatar_small\">\n          <img alt=\"User\" src=\"/assets/images/avatar.jpg\">\n        </span>\n      </div>\n      </header>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "global-header.css",
                    "avatar.css",
                    "button.css",
                    "input.css"
                ],
                "javascript": [
                    "global-header.js"
                ],
                "icons": [
                    "utility-sprite.svg",
                    "standard-sprite.svg"
                ],
                "other_components": [
                    "avatar",
                    "button",
                    "input",
                    "notification"
                ]
            },
            "related_components": [
                {
                    "name": "Global Navigation",
                    "relationship": "similar",
                    "description": "Similar global navigation concept"
                },
                {
                    "name": "Page Headers",
                    "relationship": "alternative",
                    "description": "Alternative header for page-specific content"
                },
                {
                    "name": "App Launcher",
                    "relationship": "depends-on",
                    "description": "Often launched from global header"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/global-header/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Global Navigation",
            "description": "The primary navigation component that provides consistent access to main application areas, typically positioned at the top of the interface.",
            "category": "Navigation",
            "slds_classes": {
                "root": "",
                "elements": [],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active navigation item state",
                        "trigger": "Currently selected navigation section"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard horizontal global navigation",
                    "classes": [],
                    "usage_context": "Default global navigation for application header",
                    "differences": "Horizontal navigation bar with logo, links, and actions"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented as custom component or app builder"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through navigation items",
                    "Enter/Space to activate navigation links",
                    "Arrow keys for navigation between items",
                    "Skip links for efficient navigation"
                ],
                "screen_reader": [
                    "Navigation structure and purpose announced",
                    "Current location clearly identified",
                    "Logo and branding appropriately labeled",
                    "Action controls properly described"
                ],
                "aria_attributes": [
                    "role='navigation' for navigation container",
                    "aria-label describing navigation purpose",
                    "aria-current='page' for current section",
                    "aria-expanded for dropdown navigation items",
                    "landmark roles for major navigation areas"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For primary application navigation",
                    "To provide consistent access to main areas",
                    "When navigation should be persistent across pages",
                    "For branding and global actions placement"
                ],
                "when_not_to_use": [
                    "For secondary or contextual navigation",
                    "When simpler navigation patterns suffice",
                    "For single-page applications with minimal navigation"
                ],
                "best_practices": [
                    "Keep navigation items concise and clear",
                    "Maintain consistent navigation structure",
                    "Indicate current location clearly",
                    "Provide logical grouping of navigation items",
                    "Ensure responsive behavior across devices"
                ],
                "common_mistakes": [
                    "Overloading with too many navigation items",
                    "Unclear or inconsistent labeling",
                    "Poor mobile responsiveness",
                    "Not indicating current location"
                ]
            },
            "code_examples": [
                {
                    "title": "Global Navigation",
                    "code": "<nav class=\"\" role=\"navigation\" aria-label=\"Global\">\n      <div class=\"\">\n        <a href=\"#\" class=\"\">\n          <img src=\"/assets/images/logo.svg\" alt=\"Company Logo\" class=\"\" />\n        </a>\n      </div>\n      <ul class=\"\">\n        <li class=\"slds-is-active\">\n          <a href=\"#\" class=\"\" aria-current=\"page\">\n            Dashboard\n          </a>\n        </li>\n        <li class=\"\">\n          <a href=\"#\" class=\"\">\n            Accounts\n          </a>\n        </li>\n        <li class=\"\">\n          <a href=\"#\" class=\"\">\n            Opportunities\n          </a>\n        </li>\n        <li class=\"\">\n          <a href=\"#\" class=\"\">\n            Reports\n          </a>\n        </li>\n      </ul>\n      <div class=\"\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Notifications\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#notification\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Notifications</span>\n        </button>\n      </div>\n      </nav>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "global-navigation.css",
                    "button.css"
                ],
                "javascript": [],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button-icon",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Vertical Navigation",
                    "relationship": "alternative",
                    "description": "Alternative navigation layout for sidebar placement"
                },
                {
                    "name": "Tabs",
                    "relationship": "similar",
                    "description": "Similar navigation concept for content areas"
                },
                {
                    "name": "Breadcrumbs",
                    "relationship": "similar",
                    "description": "Provides hierarchical navigation context"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/global-navigation/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Icons",
            "description": "Scalable vector graphics that provide visual meaning and enhance user interface elements with consistent symbolic representation.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-icon",
                "elements": [
                    {
                        "class": "slds-icon_container",
                        "description": "Container for icon with background",
                        "purpose": "Provides background and spacing for icons"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-icon_xx-small",
                        "description": "Extra extra small icon size",
                        "usage": "12px icons for very compact spaces"
                    },
                    {
                        "class": "slds-icon_x-small",
                        "description": "Extra small icon size",
                        "usage": "16px icons for compact elements"
                    },
                    {
                        "class": "slds-icon_small",
                        "description": "Small icon size",
                        "usage": "20px icons for small components"
                    },
                    {
                        "class": "slds-icon_large",
                        "description": "Large icon size",
                        "usage": "32px icons for prominent display"
                    },
                    {
                        "class": "slds-icon-text-default",
                        "description": "Default icon color",
                        "usage": "Standard text color for icons"
                    },
                    {
                        "class": "slds-icon-text-light",
                        "description": "Light icon color",
                        "usage": "Subdued icon appearance"
                    },
                    {
                        "class": "slds-icon-text-warning",
                        "description": "Warning icon color",
                        "usage": "Warning state indication"
                    },
                    {
                        "class": "slds-icon-text-error",
                        "description": "Error icon color",
                        "usage": "Error state indication"
                    },
                    {
                        "class": "slds-icon-text-success",
                        "description": "Success icon color",
                        "usage": "Success state indication"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard icon implementation",
                    "classes": [
                        "slds-icon"
                    ],
                    "usage_context": "Default icon display",
                    "differences": "SVG icon with standard styling"
                },
                {
                    "name": "Container",
                    "description": "Icon with background container",
                    "classes": [
                        "slds-icon_container"
                    ],
                    "usage_context": "Icons needing background emphasis",
                    "differences": "Icon with colored background circle"
                }
            ],
            "lightning_component": {
                "name": "lightning-icon",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-icon",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS icon blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "No keyboard interaction (display-only)",
                    "Focus handled by parent interactive elements"
                ],
                "screen_reader": [
                    "Icon meaning conveyed through aria-label or title",
                    "Decorative icons hidden with aria-hidden='true'",
                    "Meaningful icons announced with appropriate labels"
                ],
                "aria_attributes": [
                    "aria-hidden='true' for decorative icons",
                    "aria-label for meaningful icons without text",
                    "title attribute for hover tooltips"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To enhance understanding of UI elements",
                    "For visual consistency and recognition",
                    "To indicate status or state",
                    "As visual cues for actions or content types"
                ],
                "when_not_to_use": [
                    "As the only way to convey important information",
                    "When the icon meaning is unclear or ambiguous",
                    "For purely decorative purposes without semantic value"
                ],
                "best_practices": [
                    "Use icons from the SLDS icon library for consistency",
                    "Choose appropriate size for context",
                    "Provide text labels or alt text for meaningful icons",
                    "Use consistent icon styles throughout the interface",
                    "Test icon recognition with users"
                ],
                "common_mistakes": [
                    "Using unclear or ambiguous icons",
                    "Relying solely on icons without text backup",
                    "Inconsistent icon sizing",
                    "Missing accessibility attributes"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Icon",
                    "code": "<svg class=\"slds-icon slds-icon_small slds-icon-text-default\" aria-hidden=\"true\">\n      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#user\"></use>\n      </svg>\n"
                },
                {
                    "title": "Icon with Container",
                    "code": "<span class=\"slds-icon_container slds-icon-standard-account\">\n      <svg class=\"slds-icon\" aria-hidden=\"true\">\n        <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#account\"></use>\n      </svg>\n      </span>\n"
                },
                {
                    "title": "Large Warning Icon",
                    "code": "<svg class=\"slds-icon slds-icon_large slds-icon-text-warning\" aria-hidden=\"true\">\n      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#warning\"></use>\n      </svg>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-icon-color-foreground-default",
                    "default_value": "#706e6b",
                    "description": "Default color for icons",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "icons.css"
                ],
                "javascript": [],
                "icons": [
                    "utility-sprite.svg",
                    "standard-sprite.svg",
                    "action-sprite.svg",
                    "custom-sprite.svg"
                ],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Button Icons",
                    "relationship": "similar",
                    "description": "Icons used within button components"
                },
                {
                    "name": "Avatar",
                    "relationship": "similar",
                    "description": "Icons often used with avatar fallbacks"
                },
                {
                    "name": "Illustrations",
                    "relationship": "similar",
                    "description": "Larger, more complex visual graphics"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/icons/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Illustration",
            "description": "Visual illustrations used for empty states, error states, or informational contexts. Provides scalable SVG graphics with consistent styling and themeable colors for strokes and fills.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-illustration",
                "elements": [
                    {
                        "class": "slds-illustration__svg",
                        "description": "SVG container for the illustration graphic",
                        "purpose": "Holds the SVG illustration image"
                    },
                    {
                        "class": "slds-illustration__header",
                        "description": "Header text above the illustration",
                        "purpose": "Provides title or main message"
                    },
                    {
                        "class": "slds-illustration__stroke-primary",
                        "description": "Primary stroke color for SVG elements",
                        "purpose": "Applied to SVG paths for consistent theming"
                    },
                    {
                        "class": "slds-illustration__stroke-secondary",
                        "description": "Secondary stroke color for SVG elements",
                        "purpose": "Applied to SVG paths for accent colors"
                    },
                    {
                        "class": "slds-illustration__fill-primary",
                        "description": "Primary fill color for SVG elements",
                        "purpose": "Applied to SVG shapes for consistent theming"
                    },
                    {
                        "class": "slds-illustration__fill-secondary",
                        "description": "Secondary fill color for SVG elements",
                        "purpose": "Applied to SVG shapes for accent colors"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-illustration_small",
                        "description": "Small size variant (300x200px max)",
                        "purpose": "Compact illustration for smaller spaces"
                    },
                    {
                        "class": "slds-illustration_large",
                        "description": "Large size variant (600x400px max)",
                        "purpose": "Full-size illustration for prominent empty states"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard illustration with default sizing",
                    "classes": [
                        "slds-illustration"
                    ],
                    "usage_context": "Default illustration implementation",
                    "differences": "Responsive illustration with natural SVG sizing"
                },
                {
                    "name": "Small",
                    "description": "Compact illustration for smaller contexts",
                    "classes": [
                        "slds-illustration",
                        "slds-illustration_small"
                    ],
                    "usage_context": "Use in panels, cards, or compact layouts",
                    "differences": "Maximum 300x200px with reduced spacing"
                },
                {
                    "name": "Large",
                    "description": "Full-size illustration for prominent display",
                    "classes": [
                        "slds-illustration",
                        "slds-illustration_large"
                    ],
                    "usage_context": "Use for main content area empty states",
                    "differences": "Maximum 600x400px with increased spacing"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - implement with custom SVG and styling"
            },
            "accessibility": {
                "keyboard_support": [
                    "Illustrations are typically non-interactive"
                ],
                "screen_reader": [
                    "Provide descriptive alt text or aria-label",
                    "Use aria-hidden='true' for decorative illustrations",
                    "Ensure accompanying text is accessible"
                ],
                "aria_attributes": [
                    "role='img' on SVG or wrapper",
                    "aria-label with description for meaningful illustrations",
                    "aria-hidden='true' for purely decorative images"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For empty states (no data, no results, no items)",
                    "For error or success confirmation screens",
                    "To communicate system status visually",
                    "For onboarding or informational screens"
                ],
                "when_not_to_use": [
                    "As primary content (use as supporting visual)",
                    "For critical information without text backup",
                    "In place of icons for actions",
                    "When space is extremely limited"
                ],
                "best_practices": [
                    "Always pair illustration with descriptive text",
                    "Use appropriate size variant for context",
                    "Provide clear messaging about user action or state",
                    "Ensure illustrations support but don't replace text",
                    "Use consistent illustration style across application",
                    "Consider color contrast and visibility"
                ],
                "common_mistakes": [
                    "Missing descriptive text or heading",
                    "Illustrations too large for context",
                    "Poor color contrast making illustration hard to see",
                    "Relying solely on illustration without text",
                    "Using wrong size variant for space available"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Illustration with Empty State",
                    "code": "<div class=\"slds-illustration slds-illustration_small\">\n  <svg class=\"slds-illustration__svg\" viewBox=\"0 0 468 194\" aria-hidden=\"true\">\n    <g class=\"slds-illustration__stroke-primary\">\n      <path d=\"M233.9 87.3l14.6 36.9 39.6 5.8-28.6 27.9 6.8 39.3-35.5-18.6-35.4 18.6 6.7-39.3L174 130l39.6-5.8z\"/>\n    </g>\n    <g class=\"slds-illustration__fill-secondary\">\n      <path d=\"M234 180.5l-22.7-11.9 4.3 25.2 18.4-13.3z\"/>\n    </g>\n  </svg>\n  <h3 class=\"slds-illustration__header\">No Items Found</h3>\n  <p class=\"slds-text-body_regular\">Start by creating your first item.</p>\n</div>\n",
                    "description": "Small illustration for empty state with header and description"
                },
                {
                    "title": "Large Illustration with Action",
                    "code": "<div class=\"slds-illustration slds-illustration_large\">\n  <svg class=\"slds-illustration__svg\" viewBox=\"0 0 600 400\" aria-hidden=\"true\">\n    <g class=\"slds-illustration__stroke-primary\">\n      <rect x=\"100\" y=\"100\" width=\"400\" height=\"200\" rx=\"8\"/>\n    </g>\n    <g class=\"slds-illustration__fill-secondary\">\n      <circle cx=\"300\" cy=\"200\" r=\"50\"/>\n    </g>\n  </svg>\n  <h3 class=\"slds-illustration__header\">Welcome to Your Dashboard</h3>\n  <p class=\"slds-text-body_regular\">Get started by adding your first widget.</p>\n  <button class=\"slds-button slds-button_brand\">Add Widget</button>\n</div>\n",
                    "description": "Large illustration with header, description, and action button"
                },
                {
                    "title": "Illustration with No Data State",
                    "code": "<div class=\"slds-illustration slds-illustration_small\">\n  <svg class=\"slds-illustration__svg\" viewBox=\"0 0 300 200\" aria-hidden=\"true\">\n    <g class=\"slds-illustration__fill-primary\">\n      <path d=\"M150 50 L250 150 L50 150 Z\"/>\n    </g>\n    <g class=\"slds-illustration__stroke-secondary\">\n      <line x1=\"150\" y1=\"70\" x2=\"150\" y2=\"130\" stroke-width=\"3\"/>\n      <line x1=\"130\" y1=\"150\" x2=\"170\" y2=\"150\" stroke-width=\"3\"/>\n    </g>\n  </svg>\n  <div class=\"slds-text-longform\">\n    <h3 class=\"slds-illustration__header slds-text-heading_medium\">\n      No Records to Display\n    </h3>\n    <p class=\"slds-text-body_regular\">\n      When you have records, they'll appear here.\n    </p>\n  </div>\n</div>\n",
                    "description": "Illustration communicating no data available"
                },
                {
                    "title": "Error State Illustration",
                    "code": "<div class=\"slds-illustration slds-illustration_small\">\n  <svg class=\"slds-illustration__svg\" viewBox=\"0 0 300 200\" role=\"img\" aria-labelledby=\"error-title\">\n    <title id=\"error-title\">Error occurred</title>\n    <g class=\"slds-illustration__stroke-primary\">\n      <circle cx=\"150\" cy=\"100\" r=\"40\" fill=\"none\" stroke-width=\"3\"/>\n      <line x1=\"130\" y1=\"80\" x2=\"170\" y2=\"120\" stroke-width=\"3\"/>\n      <line x1=\"170\" y1=\"80\" x2=\"130\" y2=\"120\" stroke-width=\"3\"/>\n    </g>\n  </svg>\n  <h3 class=\"slds-illustration__header\">Something Went Wrong</h3>\n  <p class=\"slds-text-body_regular\">\n    We couldn't complete your request. Please try again.\n  </p>\n  <button class=\"slds-button slds-button_neutral\">Try Again</button>\n</div>\n",
                    "description": "Error state illustration with retry action"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-g-color-palette-cloud-blue-80",
                    "description": "Primary color for illustration strokes and fills",
                    "css_property": "stroke, fill"
                },
                {
                    "name": "--slds-g-color-palette-cloud-blue-90",
                    "description": "Secondary color for illustration strokes and fills",
                    "css_property": "stroke, fill"
                }
            ],
            "dependencies": {
                "css_files": [
                    "illustration.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "button",
                    "text"
                ]
            },
            "related_components": [
                {
                    "name": "Empty State",
                    "relationship": "pattern",
                    "description": "Complete pattern using illustration"
                },
                {
                    "name": "Icon",
                    "relationship": "alternative",
                    "description": "Simpler graphic alternative for smaller contexts"
                },
                {
                    "name": "Spinner",
                    "relationship": "complementary",
                    "description": "Loading state while content loads"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/illustration/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Input",
            "description": "A fundamental form control that allows users to enter text, numbers, or other data with various input types and validation states.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-input",
                "elements": [],
                "modifiers": [
                    {
                        "class": "slds-input_bare",
                        "description": "Input without border styling",
                        "usage": "Minimal input appearance for specific contexts"
                    },
                    {
                        "class": "slds-input_counter",
                        "description": "Input with character counter",
                        "usage": "Shows character count for length-limited inputs"
                    }
                ],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling",
                        "trigger": "When input validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When input is not interactive"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focus state styling",
                        "trigger": "When input has keyboard focus"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard text input",
                    "classes": [
                        "slds-input"
                    ],
                    "usage_context": "Default text input implementation",
                    "differences": "Standard input field with border and padding"
                },
                {
                    "name": "Bare",
                    "description": "Input without border styling",
                    "classes": [
                        "slds-input",
                        "slds-input_bare"
                    ],
                    "usage_context": "Minimal styling for specific design needs",
                    "differences": "Input without visible border or background"
                }
            ],
            "lightning_component": {
                "name": "lightning-input",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS input blueprint with various types"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the input",
                    "Standard text input keyboard interactions",
                    "Arrow keys for number inputs"
                ],
                "screen_reader": [
                    "Label text announced with the input",
                    "Error messages associated and announced",
                    "Required state communicated",
                    "Input type and current value announced"
                ],
                "aria_attributes": [
                    "aria-describedby for help text and error messages",
                    "aria-invalid when validation fails",
                    "aria-required for required inputs",
                    "aria-label when no visible label is present"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For single-line text entry",
                    "When users need to input data",
                    "For search functionality",
                    "In forms and data entry contexts"
                ],
                "when_not_to_use": [
                    "For multi-line text (use textarea instead)",
                    "For selecting from options (use select or combobox)",
                    "For binary choices (use checkbox or toggle)"
                ],
                "best_practices": [
                    "Use appropriate input types (email, tel, number, etc.)",
                    "Provide clear labels and placeholder text",
                    "Show validation feedback immediately",
                    "Use proper form structure and organization",
                    "Ensure adequate touch target size"
                ],
                "common_mistakes": [
                    "Using wrong input type for the data",
                    "Missing or unclear labels",
                    "Poor validation feedback",
                    "Inadequate error messaging"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Text Input",
                    "code": "<div class=\"slds-form-element\">\n  <label class=\"slds-form-element__label\" for=\"text-input-id-1\">\n    <abbr class=\"slds-required\" title=\"required\">* </abbr>Text Input Label\n  </label>\n  <div class=\"slds-form-element__control\">\n    <input type=\"text\" id=\"text-input-id-1\" class=\"slds-input\" placeholder=\"Enter text...\" required />\n  </div>\n</div>\n",
                    "description": "Basic text input with label"
                },
                {
                    "title": "Input with Error",
                    "code": "<div class=\"slds-form-element slds-has-error\">\n  <label class=\"slds-form-element__label\" for=\"text-input-error\">\n    <abbr class=\"slds-required\" title=\"required\">* </abbr>Text Input Label\n  </label>\n  <div class=\"slds-form-element__control\">\n    <input type=\"text\" id=\"text-input-error\" class=\"slds-input\" aria-describedby=\"text-input-error-message\" required />\n  </div>\n  <div id=\"text-input-error-message\" class=\"slds-form-element__help\">This field is required</div>\n</div>\n",
                    "description": "Input with error state and validation message"
                },
                {
                    "title": "Number Input",
                    "code": "<div class=\"slds-form-element\">\n  <label class=\"slds-form-element__label\" for=\"number-input-id\">Number Input Label</label>\n  <div class=\"slds-form-element__control\">\n    <input type=\"number\" id=\"number-input-id\" class=\"slds-input\" placeholder=\"Enter number...\" />\n  </div>\n</div>\n",
                    "description": "Number input with appropriate type"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-input-color-background",
                    "description": "Background color for inputs",
                    "category": "color"
                },
                {
                    "name": "--slds-c-input-color-border",
                    "description": "Border color for inputs",
                    "category": "color"
                },
                {
                    "name": "--slds-c-input-color-border-focus",
                    "description": "Border color for focused inputs",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "input.css",
                    "form-element.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Textarea",
                    "relationship": "alternative",
                    "description": "For multi-line text input"
                },
                {
                    "name": "Select",
                    "relationship": "alternative",
                    "description": "For selecting from predefined options"
                },
                {
                    "name": "Combobox",
                    "relationship": "alternative",
                    "description": "Enhanced input with dropdown options"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/input/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2024-12-19",
                "review_status": "complete"
            }
        },
        {
            "name": "List Builder",
            "description": "A component that allows users to build and manage lists by selecting items from one list and adding them to another. Provides drag-and-drop or click-to-move functionality for managing selections.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "",
                "elements": [],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard list builder interface",
                    "classes": [],
                    "usage_context": "Default list builder for managing selections",
                    "differences": "Two-panel interface for moving items between lists"
                }
            ],
            "lightning_component": {
                "name": "lightning-dual-listbox",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-dual-listbox",
                "mapping_notes": "lightning-dual-listbox provides similar two-list selection functionality"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between lists and controls",
                    "Arrow keys to move through list items",
                    "Space to select items",
                    "Enter to move selected items",
                    "Shift+Arrow for multi-select"
                ],
                "screen_reader": [
                    "List roles announced",
                    "Selected item count announced",
                    "Move operations confirmed",
                    "List labels clearly announced"
                ],
                "aria_attributes": [
                    "role='listbox' on list containers",
                    "role='option' on list items",
                    "aria-label on lists and buttons",
                    "aria-selected on selected items",
                    "aria-multiselectable on lists allowing multi-select"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For managing permissions or access lists",
                    "When users need to build custom collections",
                    "For configuring visible fields or columns",
                    "When ordering and selection are both needed"
                ],
                "when_not_to_use": [
                    "For simple multi-select (use checkbox list)",
                    "When items don't need reordering",
                    "For very long lists (consider search/filter)",
                    "When drag-and-drop isn't appropriate"
                ],
                "best_practices": [
                    "Provide clear labels for both lists",
                    "Show count of items in each list",
                    "Support both drag-and-drop and button moves",
                    "Allow reordering within destination list",
                    "Provide search/filter for long lists",
                    "Show visual feedback during operations"
                ],
                "common_mistakes": [
                    "Missing keyboard support",
                    "Unclear which list is source vs destination",
                    "No way to move multiple items at once",
                    "Poor performance with many items",
                    "Missing reordering capability"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic List Builder",
                    "code": "<div class=\"\">\n  <div class=\"slds-grid slds-grid_vertical-align-center\">\n    <div class=\"slds-col slds-size_5-of-12\">\n      <div class=\"slds-form-element\">\n        <label class=\"slds-form-element__label\" for=\"available-list\">Available Items</label>\n        <div class=\"slds-form-element__control\">\n          <div class=\"\" role=\"listbox\" aria-label=\"Available items\" aria-multiselectable=\"true\" id=\"available-list\">\n            <ul class=\"slds-listbox slds-listbox_vertical\">\n              <li role=\"presentation\" class=\"\">\n                <div class=\"slds-listbox__option slds-listbox__option_plain\" role=\"option\" aria-selected=\"false\">\n                  <span class=\"slds-truncate\">Item 1</span>\n                </div>\n              </li>\n              <li role=\"presentation\" class=\"\">\n                <div class=\"slds-listbox__option slds-listbox__option_plain\" role=\"option\" aria-selected=\"false\">\n                  <span class=\"slds-truncate\">Item 2</span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"slds-col slds-size_2-of-12\">\n      <div class=\"slds-grid slds-grid_vertical slds-grid_align-center\">\n        <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Move to Selected\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#right\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Move to Selected</span>\n        </button>\n        <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Move to Available\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#left\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Move to Available</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"slds-col slds-size_5-of-12\">\n      <div class=\"slds-form-element\">\n        <label class=\"slds-form-element__label\" for=\"selected-list\">Selected Items</label>\n        <div class=\"slds-form-element__control\">\n          <div class=\"\" role=\"listbox\" aria-label=\"Selected items\" aria-multiselectable=\"true\" id=\"selected-list\">\n            <ul class=\"slds-listbox slds-listbox_vertical\">\n              <li role=\"presentation\" class=\"\">\n                <div class=\"slds-listbox__option slds-listbox__option_plain\" role=\"option\" aria-selected=\"false\">\n                  <span class=\"slds-truncate\">Item 3</span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    "description": "Two-panel list builder with move buttons"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "list-builder.css",
                    "listbox.css",
                    "button.css"
                ],
                "javascript": [
                    "Item selection management",
                    "Move operations",
                    "Drag-and-drop handling",
                    "Reordering logic"
                ],
                "icons": [
                    "utility:right",
                    "utility:left",
                    "utility:up",
                    "utility:down"
                ],
                "other_components": [
                    "listbox",
                    "button",
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Dual Listbox",
                    "relationship": "alternative",
                    "description": "Lightning component alternative"
                },
                {
                    "name": "Picklist",
                    "relationship": "similar",
                    "description": "Simpler selection pattern"
                },
                {
                    "name": "Dueling Picklist",
                    "relationship": "similar",
                    "description": "SLDS version of dual-listbox pattern"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/list-builder/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Lookups",
            "description": "Search and selection components that allow users to find and select records from large datasets, with autocomplete functionality and result filtering.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-lookup",
                "elements": [
                    {
                        "class": "slds-lookup__menu",
                        "description": "Results dropdown container",
                        "purpose": "Contains search results and options"
                    },
                    {
                        "class": "slds-lookup__item",
                        "description": "Individual result item",
                        "purpose": "Represents a single search result"
                    },
                    {
                        "class": "slds-lookup__result-text",
                        "description": "Primary result text",
                        "purpose": "Main label for the search result"
                    },
                    {
                        "class": "slds-lookup__result-meta",
                        "description": "Secondary result information",
                        "purpose": "Additional context for the search result"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-focus",
                        "description": "Focus state for lookup",
                        "trigger": "When lookup has keyboard focus"
                    },
                    {
                        "class": "slds-is-open",
                        "description": "Open state for dropdown",
                        "trigger": "When results dropdown is visible"
                    },
                    {
                        "class": "slds-has-selection",
                        "description": "Selection state",
                        "trigger": "When a result has been selected"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard lookup with search and results",
                    "classes": [
                        "slds-lookup"
                    ],
                    "usage_context": "Default lookup for record selection",
                    "differences": "Search input with dropdown results list"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically implemented through custom components or third-party libraries"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus search input",
                    "Type to search and filter results",
                    "Arrow keys to navigate results",
                    "Enter to select highlighted result",
                    "Escape to close results dropdown"
                ],
                "screen_reader": [
                    "Search purpose and current value announced",
                    "Result count and filtering status communicated",
                    "Selected result clearly identified",
                    "Loading and empty states announced"
                ],
                "aria_attributes": [
                    "role='combobox' for search input",
                    "aria-expanded for dropdown state",
                    "aria-activedescendant for current result",
                    "role='listbox' for results container",
                    "role='option' for individual results",
                    "aria-autocomplete='list' for search behavior"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For selecting records from large datasets",
                    "When search and filtering capabilities are needed",
                    "For relationship fields and record associations",
                    "When autocomplete functionality improves usability"
                ],
                "when_not_to_use": [
                    "For small, fixed option lists (use select instead)",
                    "When all options should be visible (use radio group)",
                    "For simple text input without search"
                ],
                "best_practices": [
                    "Provide meaningful search result formatting",
                    "Show loading states during search",
                    "Handle empty search results gracefully",
                    "Implement debounced search for performance",
                    "Display relevant result metadata"
                ],
                "common_mistakes": [
                    "Poor search result formatting",
                    "Missing loading and empty states",
                    "Inadequate keyboard navigation",
                    "Poor search performance optimization"
                ]
            },
            "code_examples": [
                {
                    "title": "Account Lookup",
                    "code": "<div class=\"slds-lookup\" data-select=\"single\" data-scope=\"single\">\n      <div class=\"\">\n        <div class=\"slds-form-element\">\n          <label class=\"slds-form-element__label\" for=\"lookup-search\">\n            Search Accounts\n          </label>\n          <div class=\"slds-form-element__control slds-input-has-icon slds-input-has-icon_right\">\n            <input type=\"text\" class=\"slds-input\" id=\"lookup-search\" role=\"combobox\" aria-expanded=\"true\" aria-haspopup=\"listbox\" placeholder=\"Search Accounts...\" />\n            <span class=\"slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right\">\n              <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#search\"></use>\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"slds-lookup__menu\" role=\"listbox\">\n        <ul class=\"slds-lookup__list\" role=\"presentation\">\n          <li class=\"slds-lookup__item\" role=\"option\">\n            <div class=\"slds-media\">\n              <div class=\"slds-media__figure\">\n                <span class=\"slds-icon_container slds-icon-standard-account\">\n                  <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                    <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#account\"></use>\n                  </svg>\n                </span>\n              </div>\n              <div class=\"slds-media__body\">\n                <div class=\"slds-lookup__result-text\">Acme Corporation</div>\n                <div class=\"slds-lookup__result-meta slds-text-body_small\">Account • San Francisco</div>\n              </div>\n            </div>\n          </li>\n        </ul>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "lookup.css",
                    "combobox.css",
                    "media-objects.css"
                ],
                "javascript": [
                    "lookup.js"
                ],
                "icons": [
                    "utility-sprite.svg",
                    "standard-sprite.svg"
                ],
                "other_components": [
                    "combobox",
                    "media-objects",
                    "input",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Combobox",
                    "relationship": "similar",
                    "description": "Similar search and select pattern"
                },
                {
                    "name": "Select",
                    "relationship": "alternative",
                    "description": "Alternative for smaller, fixed option sets"
                },
                {
                    "name": "Pills",
                    "relationship": "depends-on",
                    "description": "Often used to display selected lookup results"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/lookups/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Map",
            "description": "A component for displaying interactive maps with coordinates and location information. Provides a container for third-party map libraries with a coordinates panel for displaying location details.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "slds-map",
                "elements": [
                    {
                        "class": "slds-map_container",
                        "description": "Container for the map component",
                        "purpose": "Wraps the map and coordinates panel"
                    },
                    {
                        "class": "slds-coordinates",
                        "description": "Coordinates panel element",
                        "purpose": "Displays location coordinates and details"
                    },
                    {
                        "class": "slds-coordinates__header",
                        "description": "Header of coordinates panel",
                        "purpose": "Contains title for coordinates panel"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-has-coordinates",
                        "description": "Modifier indicating coordinates panel is active",
                        "purpose": "Applied to parent container when panel is visible"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard map with optional coordinates panel",
                    "classes": [
                        "slds-map_container"
                    ],
                    "usage_context": "Default map implementation",
                    "differences": "Container for third-party map with SLDS styling"
                }
            ],
            "lightning_component": {
                "name": "lightning-map",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-map",
                "mapping_notes": "lightning-map provides interactive map with markers and location display"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus on map controls",
                    "Arrow keys to pan map (when supported by map library)",
                    "Enter to activate map markers",
                    "+/- keys to zoom (when supported)"
                ],
                "screen_reader": [
                    "Map region announced",
                    "Location information announced",
                    "Marker details announced when focused",
                    "Coordinates read when displayed"
                ],
                "aria_attributes": [
                    "role='application' or 'region' on map container",
                    "aria-label describing map purpose",
                    "aria-live for coordinate updates",
                    "Accessible labels for map controls"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For displaying geographic locations",
                    "When showing multiple locations on a map",
                    "For route or area visualization",
                    "In location-based applications"
                ],
                "when_not_to_use": [
                    "For simple address display (use text)",
                    "When location context isn't important",
                    "For very small screens with limited space",
                    "When map interaction adds unnecessary complexity"
                ],
                "best_practices": [
                    "Use reputable map library (Google Maps, Mapbox, Leaflet)",
                    "Provide zoom and pan controls",
                    "Show location coordinates when relevant",
                    "Support keyboard navigation",
                    "Handle loading states gracefully",
                    "Respect user location privacy"
                ],
                "common_mistakes": [
                    "Missing keyboard support",
                    "Poor performance with many markers",
                    "Not handling map library load failures",
                    "Inadequate mobile/touch support",
                    "Missing accessible labels"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Map Container",
                    "code": "<div class=\"slds-map_container\">\n  <div class=\"slds-map\" aria-label=\"Map showing office location\">\n    <!-- Third-party map library rendered here -->\n    <div id=\"map-canvas\"></div>\n  </div>\n</div>\n",
                    "description": "Basic map container for third-party map library"
                },
                {
                    "title": "Map with Coordinates Panel",
                    "code": "<div class=\"slds-grid slds-map_container slds-has-coordinates\">\n  <div class=\"slds-col slds-size_2-of-3\">\n    <div class=\"slds-map\" aria-label=\"Interactive map\">\n      <!-- Third-party map library rendered here -->\n      <div id=\"map-canvas\"></div>\n    </div>\n  </div>\n  <div class=\"slds-col slds-size_1-of-3\">\n    <div class=\"slds-coordinates\">\n      <div class=\"slds-coordinates__header\">\n        <h2 class=\"slds-text-heading_medium\">Location Details</h2>\n      </div>\n      <div class=\"\">\n        <dl class=\"slds-list_horizontal slds-wrap\">\n          <dt class=\"slds-item_label slds-text-color_weak slds-truncate\">Latitude:</dt>\n          <dd class=\"slds-item_detail slds-truncate\">37.7749</dd>\n          <dt class=\"slds-item_label slds-text-color_weak slds-truncate\">Longitude:</dt>\n          <dd class=\"slds-item_detail slds-truncate\">-122.4194</dd>\n          <dt class=\"slds-item_label slds-text-color_weak slds-truncate\">Address:</dt>\n          <dd class=\"slds-item_detail\">San Francisco, CA</dd>\n        </dl>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    "description": "Map with coordinates panel showing location details"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "map.css"
                ],
                "javascript": [
                    "Third-party map library integration",
                    "Map initialization",
                    "Marker management",
                    "Coordinates panel updates"
                ],
                "icons": [],
                "other_components": [
                    "grid"
                ]
            },
            "related_components": [
                {
                    "name": "Formatted Address",
                    "relationship": "complementary",
                    "description": "Displays formatted address alongside map"
                },
                {
                    "name": "Formatted Location",
                    "relationship": "complementary",
                    "description": "Displays location information"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/map/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Menus",
            "description": "Contextual navigation components that present a list of actions or options, typically triggered by user interaction with a button or other control.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-dropdown",
                "elements": [
                    {
                        "class": "slds-dropdown__item",
                        "description": "Individual menu item wrapper",
                        "purpose": "Contains a single menu option"
                    },
                    {
                        "class": "slds-dropdown__header",
                        "description": "Menu section header",
                        "purpose": "Groups related menu items with a heading"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-dropdown_left",
                        "description": "Left-aligned dropdown menu",
                        "usage": "Menu aligned to the left edge of trigger"
                    },
                    {
                        "class": "slds-dropdown_right",
                        "description": "Right-aligned dropdown menu",
                        "usage": "Menu aligned to the right edge of trigger"
                    },
                    {
                        "class": "slds-dropdown_bottom",
                        "description": "Bottom-positioned dropdown menu",
                        "usage": "Menu appears below the trigger element"
                    },
                    {
                        "class": "slds-dropdown_length-5",
                        "description": "Menu height for 5 items",
                        "usage": "Constrains menu height for scrolling"
                    },
                    {
                        "class": "slds-dropdown_length-7",
                        "description": "Menu height for 7 items",
                        "usage": "Constrains menu height for scrolling"
                    },
                    {
                        "class": "slds-dropdown_length-10",
                        "description": "Menu height for 10 items",
                        "usage": "Constrains menu height for scrolling"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Open menu state",
                        "trigger": "When menu is visible"
                    },
                    {
                        "class": "slds-is-selected",
                        "description": "Selected menu item state",
                        "trigger": "Currently selected menu option"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard dropdown menu",
                    "classes": [
                        "slds-dropdown"
                    ],
                    "usage_context": "Default menu implementation for actions and options",
                    "differences": "Basic dropdown menu with list of actionable items"
                }
            ],
            "lightning_component": {
                "name": "lightning-menu-item",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-menu-item",
                "mapping_notes": "Mapped through lightning-menu-item and lightning-button-menu components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus menu trigger",
                    "Enter/Space to open menu",
                    "Arrow keys to navigate menu items",
                    "Enter/Space to select menu items",
                    "Escape to close menu"
                ],
                "screen_reader": [
                    "Menu structure and purpose announced",
                    "Menu items and their actions described",
                    "Current selection communicated",
                    "Menu state changes announced"
                ],
                "aria_attributes": [
                    "role='menu' for menu container",
                    "role='menuitem' for menu options",
                    "aria-expanded on menu trigger",
                    "aria-haspopup on menu trigger",
                    "aria-labelledby for menu identification"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For contextual actions related to specific content",
                    "To group related actions in a compact interface",
                    "For overflow actions when space is limited",
                    "To provide secondary or advanced options"
                ],
                "when_not_to_use": [
                    "For primary navigation (use navigation components)",
                    "For form inputs (use select or combobox)",
                    "When all actions should be immediately visible"
                ],
                "best_practices": [
                    "Use clear, action-oriented menu item labels",
                    "Group related actions with headers and dividers",
                    "Order items by frequency of use or importance",
                    "Limit menu length to avoid overwhelming users",
                    "Provide keyboard navigation support"
                ],
                "common_mistakes": [
                    "Too many menu items without organization",
                    "Unclear or vague menu item labels",
                    "Poor menu positioning that gets cut off",
                    "Missing keyboard navigation support"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Dropdown Menu",
                    "code": "<div class=\"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open\">\n      <button class=\"slds-button slds-button_neutral\" aria-haspopup=\"true\" aria-expanded=\"true\">\n        Show Menu\n        <svg class=\"slds-button__icon slds-button__icon_right\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n        </svg>\n      </button>\n      <div class=\"slds-dropdown slds-dropdown_right\">\n        <ul class=\"\" role=\"menu\">\n          <li class=\"slds-dropdown__item\" role=\"presentation\">\n            <a href=\"#\" role=\"menuitem\" tabindex=\"0\">\n              <span class=\"slds-truncate\" title=\"Menu Item One\">Menu Item One</span>\n            </a>\n          </li>\n          <li class=\"slds-dropdown__item\" role=\"presentation\">\n            <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n              <span class=\"slds-truncate\" title=\"Menu Item Two\">Menu Item Two</span>\n            </a>\n          </li>\n          <li class=\"slds-dropdown__item\" role=\"presentation\">\n            <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n              <span class=\"slds-truncate\" title=\"Menu Item Three\">Menu Item Three</span>\n            </a>\n          </li>\n        </ul>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "dropdown.css",
                    "menu.css",
                    "button.css"
                ],
                "javascript": [
                    "dropdown.js",
                    "menu.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "dropdown",
                    "truncate"
                ]
            },
            "related_components": [
                {
                    "name": "Button Menu",
                    "relationship": "container",
                    "description": "Button that triggers menu dropdown"
                },
                {
                    "name": "Popover",
                    "relationship": "similar",
                    "description": "Alternative overlay for contextual content"
                },
                {
                    "name": "Navigation",
                    "relationship": "alternative",
                    "description": "Alternative for primary navigation"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/menus/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Modals",
            "description": "Dialog overlays that display content above the main interface, requiring user interaction to continue with the underlying workflow.",
            "category": "Overlay",
            "slds_classes": {
                "root": "slds-modal",
                "elements": [
                    {
                        "class": "slds-modal__container",
                        "description": "Container for modal content",
                        "purpose": "Centers and constrains modal dialog"
                    },
                    {
                        "class": "slds-modal__header",
                        "description": "Header section of the modal",
                        "purpose": "Contains title and close action"
                    },
                    {
                        "class": "slds-modal__content",
                        "description": "Main content area of the modal",
                        "purpose": "Contains the primary modal content"
                    },
                    {
                        "class": "slds-modal__footer",
                        "description": "Footer section of the modal",
                        "purpose": "Contains action buttons and controls"
                    },
                    {
                        "class": "slds-backdrop",
                        "description": "Background overlay",
                        "purpose": "Dims background and captures clicks"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-modal_small",
                        "description": "Small modal size",
                        "usage": "For simple confirmations or minimal content"
                    },
                    {
                        "class": "slds-modal_medium",
                        "description": "Medium modal size (default)",
                        "usage": "Standard modal size for most use cases"
                    },
                    {
                        "class": "slds-modal_large",
                        "description": "Large modal size",
                        "usage": "For complex forms or detailed content"
                    },
                    {
                        "class": "slds-modal_full",
                        "description": "Full-screen modal",
                        "usage": "For complex workflows or mobile experiences"
                    },
                    {
                        "class": "slds-fade-in-open",
                        "description": "Animation for opening modal",
                        "usage": "Smooth fade-in transition"
                    }
                ],
                "states": [
                    {
                        "class": "slds-backdrop_open",
                        "description": "Open state for backdrop",
                        "trigger": "When modal is visible"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard modal dialog",
                    "classes": [
                        "slds-modal"
                    ],
                    "usage_context": "Default modal implementation",
                    "differences": "Centered dialog with header, content, and footer"
                }
            ],
            "lightning_component": {
                "name": "Various (lightning-modal-*)",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-modal-header",
                "mapping_notes": "Mapped through lightning-modal-header, lightning-modal-body, lightning-modal-footer components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to cycle through interactive elements within modal",
                    "Escape to close modal",
                    "Focus trapped within modal while open",
                    "Focus returned to trigger element on close"
                ],
                "screen_reader": [
                    "Modal purpose announced when opened",
                    "Content structure conveyed through proper markup",
                    "Close action clearly identified"
                ],
                "aria_attributes": [
                    "role='dialog' for modal container",
                    "aria-labelledby pointing to modal title",
                    "aria-describedby for modal content when appropriate",
                    "aria-modal='true' to indicate modal state",
                    "aria-hidden='true' on background content"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For critical information that requires user attention",
                    "For complex forms or workflows",
                    "When you need to interrupt the current workflow",
                    "For confirmations of destructive actions"
                ],
                "when_not_to_use": [
                    "For simple notifications (use toast instead)",
                    "For non-critical information",
                    "When users need to reference background content",
                    "For progressive enhancement (use inline expansion)"
                ],
                "best_practices": [
                    "Provide clear modal title and purpose",
                    "Include obvious way to close or cancel",
                    "Keep modal content focused and concise",
                    "Use appropriate modal size for content",
                    "Implement proper focus management",
                    "Avoid stacking multiple modals"
                ],
                "common_mistakes": [
                    "Making modals too large or complex",
                    "Poor focus management implementation",
                    "Missing or unclear close options",
                    "Overusing modals for non-critical content"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Modal",
                    "code": "<section role=\"dialog\" tabindex=\"-1\" aria-labelledby=\"modal-heading-01\" aria-modal=\"true\" aria-describedby=\"modal-content-id-1\" class=\"slds-modal slds-fade-in-open\">\n      <div class=\"slds-modal__container\">\n        <header class=\"slds-modal__header\">\n          <button class=\"slds-button slds-button_icon slds-modal__close slds-button_icon-inverse\" title=\"Close\">\n            <svg class=\"slds-button__icon slds-button__icon_large\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Close</span>\n          </button>\n          <h2 id=\"modal-heading-01\" class=\"slds-modal__title slds-hyphenate\">Modal Header</h2>\n        </header>\n        <div class=\"slds-modal__content slds-var-p-around_medium\" id=\"modal-content-id-1\">\n          <p>Modal body content goes here...</p>\n        </div>\n        <footer class=\"slds-modal__footer\">\n          <button class=\"slds-button slds-button_neutral\">Cancel</button>\n          <button class=\"slds-button slds-button_brand\">Save</button>\n        </footer>\n      </div>\n      </section>\n      <div class=\"slds-backdrop slds-backdrop_open\"></div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-modal-color-background",
                    "description": "Background color for modal",
                    "category": "color"
                },
                {
                    "name": "--slds-c-modal-radius-border",
                    "description": "Border radius for modal",
                    "category": "border"
                }
            ],
            "dependencies": {
                "css_files": [
                    "modal.css",
                    "backdrop.css",
                    "button.css"
                ],
                "javascript": [
                    "modal.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "button-icon",
                    "backdrop"
                ]
            },
            "related_components": [
                {
                    "name": "Prompt",
                    "relationship": "variant",
                    "description": "Simplified modal for confirmations"
                },
                {
                    "name": "Popovers",
                    "relationship": "alternative",
                    "description": "Alternative overlay for contextual content"
                },
                {
                    "name": "Toast",
                    "relationship": "alternative",
                    "description": "Alternative for simple notifications"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/modals/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Notifications",
            "description": "System-generated messages that inform users about important events, updates, or required actions in a non-intrusive manner.",
            "category": "Feedback",
            "slds_classes": {
                "root": "slds-notification",
                "elements": [
                    {
                        "class": "slds-notification__target",
                        "description": "Link or action target within notification",
                        "purpose": "Provides actionable element for user interaction"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard notification message",
                    "classes": [
                        "slds-notification"
                    ],
                    "usage_context": "Default notification implementation",
                    "differences": "Basic notification with message content"
                }
            ],
            "lightning_component": {
                "name": "lightning-toast",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-toast",
                "mapping_notes": "Primarily mapped through lightning-toast for temporary notifications"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through interactive elements",
                    "Escape to dismiss dismissible notifications",
                    "Focus management for embedded actions"
                ],
                "screen_reader": [
                    "Notification content announced when displayed",
                    "Importance level conveyed through ARIA",
                    "Action elements properly labeled"
                ],
                "aria_attributes": [
                    "role='alert' for important notifications",
                    "role='status' for informational updates",
                    "aria-live='polite' or 'assertive' based on importance",
                    "aria-label for close buttons"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To inform users of system events or status changes",
                    "For feedback on user actions",
                    "To communicate important updates",
                    "For error or success confirmations"
                ],
                "when_not_to_use": [
                    "For critical errors requiring immediate action (use modals)",
                    "For instructional content (use help text)",
                    "For persistent information (use banners or alerts)"
                ],
                "best_practices": [
                    "Keep notification messages concise and clear",
                    "Use appropriate urgency levels",
                    "Provide actionable information when possible",
                    "Consider auto-dismissal timing carefully",
                    "Group related notifications when appropriate"
                ],
                "common_mistakes": [
                    "Overusing notifications for non-essential information",
                    "Making notification text too long or complex",
                    "Poor timing for auto-dismissal",
                    "Not providing adequate contrast or visibility"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Toast Notification",
                    "code": "<div class=\"slds-notification\" role=\"alert\">\n      <div class=\"\">\n        <p>Your changes have been saved successfully.</p>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "notification.css",
                    "toast.css"
                ],
                "javascript": [
                    "notification.js"
                ],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Toast",
                    "relationship": "variant",
                    "description": "Specific type of temporary notification"
                },
                {
                    "name": "Alert",
                    "relationship": "similar",
                    "description": "Similar feedback mechanism for system-wide messages"
                },
                {
                    "name": "Banner",
                    "relationship": "alternative",
                    "description": "Alternative for persistent messaging"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/notifications/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Page Headers",
            "description": "Header components that provide consistent page structure with titles, actions, and navigation context for application pages.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-page-header",
                "elements": [
                    {
                        "class": "slds-page-header__row",
                        "description": "Horizontal row container within header",
                        "purpose": "Organizes header content in rows"
                    },
                    {
                        "class": "slds-page-header__title",
                        "description": "Main page title container",
                        "purpose": "Contains the primary page heading"
                    },
                    {
                        "class": "slds-page-header__name",
                        "description": "Page name element",
                        "purpose": "Displays the specific page or record name"
                    },
                    {
                        "class": "slds-page-header__controls",
                        "description": "Action controls container",
                        "purpose": "Holds primary page actions and buttons"
                    },
                    {
                        "class": "slds-page-header__detail-row",
                        "description": "Secondary row for additional details",
                        "purpose": "Contains secondary information below main header"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-page-header_object-home",
                        "description": "Object home page header variant",
                        "usage": "For object list/home pages"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard page header",
                    "classes": [
                        "slds-page-header"
                    ],
                    "usage_context": "Default page header for application pages",
                    "differences": "Basic header with title and optional actions"
                },
                {
                    "name": "Record Home",
                    "description": "Header for record detail pages",
                    "classes": [
                        "slds-page-header"
                    ],
                    "usage_context": "Record detail and edit pages",
                    "differences": "Enhanced header with record-specific layout and actions"
                },
                {
                    "name": "Object Home",
                    "description": "Header for object list pages",
                    "classes": [
                        "slds-page-header",
                        "slds-page-header_object-home"
                    ],
                    "usage_context": "Object list views and home pages",
                    "differences": "Header optimized for list view contexts"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented through page layout templates"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through header actions",
                    "Enter/Space to activate header controls",
                    "Proper heading hierarchy for page structure"
                ],
                "screen_reader": [
                    "Page title and context announced",
                    "Header actions clearly described",
                    "Page metadata appropriately communicated",
                    "Heading hierarchy provides page structure"
                ],
                "aria_attributes": [
                    "aria-labelledby for page header sections",
                    "role='banner' for main page header",
                    "aria-describedby for additional page context",
                    "proper heading levels (h1, h2, etc.)"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For consistent page structure across application",
                    "To provide page context and primary actions",
                    "When pages need clear titles and navigation",
                    "For record and object-specific page layouts"
                ],
                "when_not_to_use": [
                    "For simple pages without complex structure",
                    "When custom header layouts are more appropriate",
                    "For modal dialogs or overlay content"
                ],
                "best_practices": [
                    "Use clear, descriptive page titles",
                    "Place primary actions prominently",
                    "Maintain consistent header structure",
                    "Provide appropriate page context and metadata",
                    "Use proper heading hierarchy"
                ],
                "common_mistakes": [
                    "Inconsistent header layouts across pages",
                    "Poor action button placement or labeling",
                    "Missing or unclear page context",
                    "Improper heading hierarchy"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Page Header",
                    "code": "<div class=\"slds-page-header\">\n      <div class=\"slds-page-header__row\">\n        <div class=\"slds-has-flexi-truncate\">\n          <div class=\"slds-page-header__name\">\n            <div class=\"slds-page-header__name-title\">\n              <h1>\n                <span class=\"slds-page-header__title slds-truncate\" title=\"Accounts\">Accounts</span>\n              </h1>\n            </div>\n          </div>\n        </div>\n        <div class=\"slds-no-flex slds-grid slds-align-top\">\n          <div class=\"slds-page-header__controls\">\n            <div class=\"slds-page-header__control\">\n              <button class=\"slds-button slds-button_neutral\">New</button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"slds-page-header__detail-row\">\n        <div class=\"\">\n          <p class=\"slds-text-body_small\">10 items • Updated 2 hours ago</p>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Record Home Header",
                    "code": "<div class=\"slds-page-header\">\n      <div class=\"slds-page-header__row\">\n        <div class=\"slds-has-flexi-truncate\">\n          <div class=\"slds-page-header__name\">\n            <div class=\"slds-page-header__name-title\">\n              <h1>\n                <span>Account</span>\n                <span class=\"slds-page-header__title slds-truncate\" title=\"Acme Corporation\">Acme Corporation</span>\n              </h1>\n            </div>\n            <div class=\"slds-page-header__name-meta\">Account • Customer</div>\n          </div>\n        </div>\n        <div class=\"slds-no-flex slds-grid slds-align-top\">\n          <div class=\"slds-page-header__controls\">\n            <button class=\"slds-button slds-button_neutral\">Edit</button>\n            <button class=\"slds-button slds-button_brand\">Follow</button>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "page-header.css",
                    "grid.css",
                    "truncate.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "grid",
                    "truncate",
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Global Navigation",
                    "relationship": "similar",
                    "description": "Works together for complete page navigation"
                },
                {
                    "name": "Breadcrumbs",
                    "relationship": "depends-on",
                    "description": "Often included in page headers for navigation context"
                },
                {
                    "name": "Cards",
                    "relationship": "alternative",
                    "description": "Alternative container for page content"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/page-headers/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Panels",
            "description": "A flexible container component that provides structured content areas with headers, bodies, and footers, supporting various layouts and content organization patterns for building complex interfaces.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-panel",
                "elements": [
                    {
                        "class": "slds-panel__header",
                        "description": "Panel header section",
                        "purpose": "Contains panel title and header actions"
                    },
                    {
                        "class": "slds-panel__body",
                        "description": "Panel content area",
                        "purpose": "Contains the main panel content"
                    },
                    {
                        "class": "slds-panel__actions",
                        "description": "Panel action controls",
                        "purpose": "Contains buttons and interactive elements"
                    },
                    {
                        "class": "slds-panel__close",
                        "description": "Panel close button",
                        "purpose": "Allows panel dismissal"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-panel_docked",
                        "description": "Docked panel layout",
                        "usage": "For panels attached to screen edges"
                    },
                    {
                        "class": "slds-panel_filters",
                        "description": "Filter panel style",
                        "usage": "For filter and search interfaces"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard panel with header, body, and footer",
                    "classes": [
                        "slds-panel"
                    ],
                    "usage_context": "Default implementation for panel containers",
                    "differences": "Basic panel structure with flexible content area"
                },
                {
                    "name": "Docked",
                    "description": "Panel docked to screen edge",
                    "classes": [
                        "slds-panel",
                        "slds-panel_docked"
                    ],
                    "usage_context": "When panel should be attached to viewport edge",
                    "differences": "Fixed positioning with edge attachment"
                },
                {
                    "name": "Drawer",
                    "description": "Slide-out drawer panel",
                    "classes": [
                        "slds-panel"
                    ],
                    "usage_context": "For slide-out navigation or content",
                    "differences": "Slide animation and overlay behavior"
                },
                {
                    "name": "Filter",
                    "description": "Panel optimized for filtering interfaces",
                    "classes": [
                        "slds-panel",
                        "slds-panel_filters"
                    ],
                    "usage_context": "For search and filter controls",
                    "differences": "Optimized layout for form controls and filters"
                }
            ],
            "lightning_component": {
                "name": "lightning-panel",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "Panel functionality often implemented through modal or overlay components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through panel content",
                    "Escape to close dismissible panels",
                    "Arrow keys for panel navigation when applicable",
                    "Focus management for panel open/close"
                ],
                "screen_reader": [
                    "Panel purpose and content announced",
                    "Panel state changes communicated",
                    "Panel structure properly described"
                ],
                "aria_attributes": [
                    "role='region' for panel containers",
                    "aria-label for panel purpose",
                    "aria-expanded for collapsible panels",
                    "aria-hidden for closed panels"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For organizing related content in structured areas",
                    "When creating sidebar or detail views",
                    "For filter and configuration interfaces",
                    "In dashboard and workspace layouts"
                ],
                "when_not_to_use": [
                    "For simple content grouping (use cards instead)",
                    "When modal behavior is needed",
                    "For single-purpose content displays"
                ],
                "best_practices": [
                    "Provide clear panel headers with descriptive titles",
                    "Ensure panels are keyboard accessible",
                    "Use appropriate panel types for content",
                    "Handle responsive behavior appropriately",
                    "Provide clear close/dismiss mechanisms"
                ],
                "common_mistakes": [
                    "Overusing panels for simple content",
                    "Poor responsive panel behavior",
                    "Missing accessibility considerations",
                    "Inconsistent panel sizing and spacing"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Panel",
                    "description": "Slide-out drawer panel with overlay",
                    "code": "<!-- Backdrop -->\n      <div class=\"slds-backdrop slds-backdrop_open\" style=\"z-index: 999;\"></div>\n      <!-- Drawer Panel -->\n      <div class=\"slds-panel\" role=\"dialog\" aria-label=\"Navigation drawer\" aria-modal=\"true\">\n      <div class=\"\" style=\"position: fixed; left: 0; top: 0; width: 280px; height: 100vh; z-index: 1000; transform: translateX(0);\">\n        <div class=\"slds-panel__header\">\n          <div class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__body\">\n              <h2 class=\"slds-text-heading_small\">\n                Navigation\n              </h2>\n            </div>\n            <div class=\"slds-media__figure slds-media__figure_reverse\">\n              <button class=\"slds-button slds-button_icon slds-panel__close\" title=\"Close navigation\">\n                <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n                </svg>\n                <span class=\"slds-assistive-text\">Close navigation</span>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"slds-panel__body\">\n          <nav class=\"slds-nav-vertical\" aria-label=\"Sub page navigation\">\n            <div class=\"slds-nav-vertical__section\">\n              <h3 class=\"slds-nav-vertical__title\">Section 1</h3>\n              <ul>\n                <li class=\"slds-nav-vertical__item slds-is-active\">\n                  <a href=\"#\" class=\"slds-nav-vertical__action\" aria-current=\"page\">Item 1</a>\n                </li>\n                <li class=\"slds-nav-vertical__item\">\n                  <a href=\"#\" class=\"slds-nav-vertical__action\">Item 2</a>\n                </li>\n                <li class=\"slds-nav-vertical__item\">\n                  <a href=\"#\" class=\"slds-nav-vertical__action\">Item 3</a>\n                </li>\n              </ul>\n            </div>\n            <div class=\"slds-nav-vertical__section\">\n              <h3 class=\"slds-nav-vertical__title\">Section 2</h3>\n              <ul>\n                <li class=\"slds-nav-vertical__item\">\n                  <a href=\"#\" class=\"slds-nav-vertical__action\">Item 4</a>\n                </li>\n                <li class=\"slds-nav-vertical__item\">\n                  <a href=\"#\" class=\"slds-nav-vertical__action\">Item 5</a>\n                </li>\n              </ul>\n            </div>\n          </nav>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "panel.css",
                    "button.css",
                    "form-element.css"
                ],
                "javascript": [
                    "panel.js",
                    "panel-drawer.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "form-element",
                    "nav-vertical"
                ]
            },
            "related_components": [
                {
                    "name": "Modal",
                    "relationship": "similar",
                    "description": "Similar overlay behavior for some panel types"
                },
                {
                    "name": "Card",
                    "relationship": "alternative",
                    "description": "Alternative for simpler content grouping"
                },
                {
                    "name": "Drawer",
                    "relationship": "variant",
                    "description": "Specific drawer implementation of panels"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/panels/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Path",
            "description": "A visual component that guides users through a linear process, showing progress through connected steps with clear visual indicators for completion status.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-path",
                "elements": [
                    {
                        "class": "slds-path__nav",
                        "description": "Navigation container for path steps",
                        "purpose": "Contains the list of process steps"
                    },
                    {
                        "class": "slds-path__item",
                        "description": "Individual path step wrapper",
                        "purpose": "Contains a single step in the process"
                    },
                    {
                        "class": "slds-path__link",
                        "description": "Clickable step element",
                        "purpose": "Interactive element for step navigation"
                    },
                    {
                        "class": "slds-path__stage",
                        "description": "Step stage indicator",
                        "purpose": "Visual indicator of step status"
                    },
                    {
                        "class": "slds-path__title",
                        "description": "Step title text",
                        "purpose": "Label describing the step"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-path_has-coaching",
                        "description": "Path with coaching content",
                        "usage": "When path includes guidance or coaching information"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-complete",
                        "description": "Completed step state",
                        "trigger": "Steps that have been finished"
                    },
                    {
                        "class": "slds-is-current",
                        "description": "Current step state",
                        "trigger": "The active step being worked on"
                    },
                    {
                        "class": "slds-is-incomplete",
                        "description": "Incomplete step state",
                        "trigger": "Steps not yet started"
                    },
                    {
                        "class": "slds-is-active",
                        "description": "Active step state",
                        "trigger": "Currently selected or focused step"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard linear path with connected steps",
                    "classes": [
                        "slds-path"
                    ],
                    "usage_context": "Default path implementation for process guidance",
                    "differences": "Horizontal connected steps showing process progression"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented as custom component"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through interactive steps",
                    "Enter/Space to activate clickable steps",
                    "Arrow keys for step navigation when appropriate"
                ],
                "screen_reader": [
                    "Process structure and current position announced",
                    "Step completion status communicated",
                    "Navigation between steps clearly described"
                ],
                "aria_attributes": [
                    "role='application' or 'tablist' for path container",
                    "aria-label describing the process",
                    "aria-current for the current step",
                    "aria-describedby for step details"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For linear processes with defined steps",
                    "To show progress through a workflow",
                    "When users need guidance through a process",
                    "For sales or approval processes"
                ],
                "when_not_to_use": [
                    "For non-linear or flexible processes",
                    "When steps can be completed in any order",
                    "For simple binary choices"
                ],
                "best_practices": [
                    "Use clear, descriptive step labels",
                    "Show progress and completion status clearly",
                    "Allow navigation to previous steps when appropriate",
                    "Provide guidance or coaching content when helpful",
                    "Maintain visual connection between steps"
                ],
                "common_mistakes": [
                    "Making step labels unclear or too technical",
                    "Not indicating current position clearly",
                    "Poor visual connection between steps",
                    "Allowing navigation to inappropriate steps"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Path",
                    "description": "Sales path showing contacted, open, and unqualified stages",
                    "code": "<div class=\"slds-path\">\n      <div class=\"slds-path__track\">\n        <div class=\"slds-grid slds-path__scroller-container\">\n          <div class=\"slds-path__scroller\" role=\"application\">\n            <div class=\"slds-path__scroller_inner\">\n              <ul class=\"slds-path__nav\" role=\"listbox\" aria-orientation=\"horizontal\">\n                <li class=\"slds-path__item slds-is-complete\" role=\"presentation\">\n                  <a aria-selected=\"false\" class=\"slds-path__link\" href=\"#\" role=\"option\" tabindex=\"-1\">\n                    <span class=\"slds-path__stage\">\n                      <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n                      </svg>\n                    </span>\n                    <span class=\"slds-path__title\">Contacted</span>\n                  </a>\n                </li>\n                <li class=\"slds-path__item slds-is-current\" role=\"presentation\">\n                  <a aria-selected=\"true\" class=\"slds-path__link\" href=\"#\" role=\"option\" tabindex=\"0\">\n                    <span class=\"slds-path__stage\">\n                      <span class=\"slds-assistive-text\">Current Stage:</span>\n                    </span>\n                    <span class=\"slds-path__title\">Open</span>\n                  </a>\n                </li>\n                <li class=\"slds-path__item slds-is-incomplete\" role=\"presentation\">\n                  <a aria-selected=\"false\" class=\"slds-path__link\" href=\"#\" role=\"option\" tabindex=\"-1\">\n                    <span class=\"slds-path__stage\">\n                      <span class=\"slds-assistive-text\">Stage Complete</span>\n                    </span>\n                    <span class=\"slds-path__title\">Unqualified</span>\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "path.css",
                    "grid.css"
                ],
                "javascript": [
                    "path.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "grid",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Progress Indicator",
                    "relationship": "similar",
                    "description": "Similar step-based progress visualization"
                },
                {
                    "name": "Breadcrumbs",
                    "relationship": "similar",
                    "description": "Similar hierarchical navigation concept"
                },
                {
                    "name": "Tabs",
                    "relationship": "alternative",
                    "description": "Alternative for non-linear content switching"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/path/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Picklist",
            "description": "A dropdown selection component that presents users with a list of predefined options, similar to select but with enhanced styling and functionality.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-picklist",
                "elements": [
                    {
                        "class": "slds-picklist__label",
                        "description": "Label for the picklist",
                        "purpose": "Describes the purpose of the selection"
                    },
                    {
                        "class": "slds-picklist__item",
                        "description": "Individual option item",
                        "purpose": "Represents a single selectable option"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-picklist_fluid",
                        "description": "Full-width picklist variant",
                        "usage": "Picklist that expands to container width"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Open dropdown state",
                        "trigger": "When options dropdown is visible"
                    },
                    {
                        "class": "slds-is-selected",
                        "description": "Selected option state",
                        "trigger": "Currently selected option(s)"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard single-select picklist",
                    "classes": [
                        "slds-picklist"
                    ],
                    "usage_context": "Default picklist for option selection",
                    "differences": "Dropdown button with selectable options list"
                },
                {
                    "name": "Multi-select",
                    "description": "Picklist allowing multiple selections",
                    "classes": [
                        "slds-picklist"
                    ],
                    "usage_context": "When users can select multiple options",
                    "differences": "Supports multiple selection with checkboxes"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - similar functionality through lightning-combobox or custom implementation"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus picklist trigger",
                    "Enter/Space to open dropdown",
                    "Arrow keys to navigate options",
                    "Enter/Space to select options",
                    "Escape to close dropdown"
                ],
                "screen_reader": [
                    "Picklist purpose and current selection announced",
                    "Option list and navigation communicated",
                    "Selection changes announced",
                    "Multi-select state indicated when applicable"
                ],
                "aria_attributes": [
                    "aria-haspopup='listbox' for dropdown trigger",
                    "aria-expanded for dropdown state",
                    "role='listbox' for options container",
                    "role='option' for individual choices",
                    "aria-selected for chosen options",
                    "aria-multiselectable for multi-select variant"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For selecting from predefined option lists",
                    "When enhanced styling over native select is needed",
                    "For multi-select scenarios",
                    "When custom option formatting is required"
                ],
                "when_not_to_use": [
                    "For simple cases where native select suffices",
                    "When search functionality is needed (use combobox)",
                    "For very large option lists (consider combobox)"
                ],
                "best_practices": [
                    "Use clear, descriptive option labels",
                    "Order options logically",
                    "Provide appropriate default selections",
                    "Handle empty states gracefully",
                    "Support keyboard navigation fully"
                ],
                "common_mistakes": [
                    "Poor option ordering or grouping",
                    "Unclear or ambiguous option labels",
                    "Missing keyboard navigation support",
                    "Inadequate multi-select feedback"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Picklist",
                    "description": "Basic picklist with three options",
                    "code": "<div class=\"slds-picklist\">\n      <button class=\"slds-button slds-button_neutral slds-picklist__label\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n        <span class=\"slds-truncate\" title=\"Choose an option\">Choose an option</span>\n        <svg class=\"slds-button__icon slds-button__icon_right\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n        </svg>\n      </button>\n      <div class=\"slds-dropdown slds-dropdown_left\">\n        <ul class=\"\" role=\"listbox\">\n          <li class=\"slds-dropdown__item slds-picklist__item\" role=\"option\">\n            <a href=\"#\" role=\"menuitem\">\n              <span class=\"slds-truncate\" title=\"Option One\">Option One</span>\n            </a>\n          </li>\n          <li class=\"slds-dropdown__item slds-picklist__item\" role=\"option\">\n            <a href=\"#\" role=\"menuitem\">\n              <span class=\"slds-truncate\" title=\"Option Two\">Option Two</span>\n            </a>\n          </li>\n          <li class=\"slds-dropdown__item slds-picklist__item\" role=\"option\">\n            <a href=\"#\" role=\"menuitem\">\n              <span class=\"slds-truncate\" title=\"Option Three\">Option Three</span>\n            </a>\n          </li>\n        </ul>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "picklist.css",
                    "dropdown.css",
                    "button.css"
                ],
                "javascript": [
                    "picklist.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "dropdown",
                    "button",
                    "truncate"
                ]
            },
            "related_components": [
                {
                    "name": "Select",
                    "relationship": "alternative",
                    "description": "Native alternative for simple option selection"
                },
                {
                    "name": "Combobox",
                    "relationship": "alternative",
                    "description": "Enhanced version with search capabilities"
                },
                {
                    "name": "Radio Group",
                    "relationship": "alternative",
                    "description": "Alternative for mutually exclusive options"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/picklist/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Pills",
            "description": "Compact elements that represent selected items, tags, or filters, typically with the ability to be removed by the user.",
            "category": "Display",
            "slds_classes": {
                "root": "slds-pill",
                "elements": [
                    {
                        "class": "slds-pill__label",
                        "description": "Text label within the pill",
                        "purpose": "Contains the pill's display text"
                    },
                    {
                        "class": "slds-pill__icon_container",
                        "description": "Container for pill icon",
                        "purpose": "Holds icon associated with the pill"
                    },
                    {
                        "class": "slds-pill__remove",
                        "description": "Remove button for dismissible pills",
                        "purpose": "Allows user to remove the pill"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-pill_link",
                        "description": "Clickable pill variant",
                        "usage": "When pill should be interactive/clickable"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected pill state",
                        "trigger": "When pill is currently selected"
                    },
                    {
                        "class": "slds-has-error",
                        "description": "Error state for pill",
                        "trigger": "When pill represents an error condition"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard pill element",
                    "classes": [
                        "slds-pill"
                    ],
                    "usage_context": "Default pill implementation for tags or selections",
                    "differences": "Basic pill with label and optional remove button"
                },
                {
                    "name": "Link",
                    "description": "Clickable pill that acts as a link",
                    "classes": [
                        "slds-pill",
                        "slds-pill_link"
                    ],
                    "usage_context": "Interactive pills that navigate or perform actions",
                    "differences": "Clickable pill with hover and focus states"
                }
            ],
            "lightning_component": {
                "name": "lightning-pill",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-pill",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS pill blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus interactive pills",
                    "Enter/Space to activate pill actions",
                    "Tab to focus remove button",
                    "Enter/Space to remove pill"
                ],
                "screen_reader": [
                    "Pill label announced clearly",
                    "Removal action announced when available",
                    "Selection state communicated",
                    "Error states announced appropriately"
                ],
                "aria_attributes": [
                    "aria-label for pills without visible text",
                    "aria-describedby for additional pill context",
                    "role='option' in listbox contexts",
                    "aria-selected for selectable pills"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To represent selected items or filters",
                    "For tags or categories",
                    "To show applied search criteria",
                    "For removable selections in forms"
                ],
                "when_not_to_use": [
                    "For permanent labels (use badges instead)",
                    "For navigation items (use navigation components)",
                    "For status indicators (use badges or icons)"
                ],
                "best_practices": [
                    "Keep pill labels concise and descriptive",
                    "Provide clear removal action when appropriate",
                    "Use consistent pill styling throughout interface",
                    "Group related pills logically",
                    "Limit number of pills to maintain usability"
                ],
                "common_mistakes": [
                    "Making pill labels too long or verbose",
                    "Using pills for non-removable content",
                    "Poor contrast or visibility",
                    "Inconsistent pill behavior within the same context"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Pill",
                    "code": "<span class=\"slds-pill\">\n      <a href=\"#\" class=\"slds-pill__action\" title=\"Full pill label verbiage mirrored here\">\n        <span class=\"slds-pill__label\">Pill Label</span>\n      </a>\n      <button class=\"slds-button slds-button_icon slds-button_icon-bare slds-pill__remove\" title=\"Remove\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Remove</span>\n      </button>\n      </span>\n"
                },
                {
                    "title": "Pill with Icon",
                    "code": "<span class=\"slds-pill\">\n      <span class=\"slds-pill__icon_container\">\n        <span class=\"slds-icon_container slds-icon-standard-account\">\n          <svg class=\"slds-icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#account\"></use>\n          </svg>\n        </span>\n      </span>\n      <a href=\"#\" class=\"slds-pill__action\" title=\"Account: Acme Corporation\">\n        <span class=\"slds-pill__label\">Acme Corporation</span>\n      </a>\n      <button class=\"slds-button slds-button_icon slds-button_icon-bare slds-pill__remove\" title=\"Remove\">\n        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n        </svg>\n        <span class=\"slds-assistive-text\">Remove</span>\n      </button>\n      </span>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-pill-color-background",
                    "description": "Background color for pills",
                    "category": "color"
                },
                {
                    "name": "--slds-c-pill-color-border",
                    "description": "Border color for pills",
                    "category": "color"
                },
                {
                    "name": "--slds-c-pill-radius-border",
                    "description": "Border radius for pills",
                    "category": "border"
                }
            ],
            "dependencies": {
                "css_files": [
                    "pill.css",
                    "button.css",
                    "icons.css"
                ],
                "javascript": [],
                "icons": [
                    "utility-sprite.svg",
                    "standard-sprite.svg"
                ],
                "other_components": [
                    "button-icon",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Badge",
                    "relationship": "similar",
                    "description": "Similar visual treatment for non-removable status"
                },
                {
                    "name": "Pill Container",
                    "relationship": "container",
                    "description": "Container for managing collections of pills"
                },
                {
                    "name": "Combobox",
                    "relationship": "depends-on",
                    "description": "Often uses pills to show selected items"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/pills/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Popovers",
            "description": "Contextual overlays that display additional information or controls related to a specific trigger element, positioned dynamically based on available space.",
            "category": "Overlay",
            "slds_classes": {
                "root": "slds-popover",
                "elements": [
                    {
                        "class": "slds-popover__body",
                        "description": "Main content area of the popover",
                        "purpose": "Contains the popover's primary content"
                    },
                    {
                        "class": "slds-popover__header",
                        "description": "Header section of the popover",
                        "purpose": "Optional header with title or controls"
                    },
                    {
                        "class": "slds-popover__footer",
                        "description": "Footer section of the popover",
                        "purpose": "Optional footer with actions or additional info"
                    },
                    {
                        "class": "slds-nubbin_top",
                        "description": "Top-pointing nubbin (arrow)",
                        "purpose": "Visual pointer indicating trigger relationship"
                    },
                    {
                        "class": "slds-nubbin_bottom",
                        "description": "Bottom-pointing nubbin",
                        "purpose": "Visual pointer for bottom positioning"
                    },
                    {
                        "class": "slds-nubbin_left",
                        "description": "Left-pointing nubbin",
                        "purpose": "Visual pointer for left positioning"
                    },
                    {
                        "class": "slds-nubbin_right",
                        "description": "Right-pointing nubbin",
                        "purpose": "Visual pointer for right positioning"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-popover_small",
                        "description": "Small popover size",
                        "usage": "For minimal content or compact spaces"
                    },
                    {
                        "class": "slds-popover_medium",
                        "description": "Medium popover size",
                        "usage": "Default size for most use cases"
                    },
                    {
                        "class": "slds-popover_large",
                        "description": "Large popover size",
                        "usage": "For complex content or detailed information"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard popover with content",
                    "classes": [
                        "slds-popover"
                    ],
                    "usage_context": "Default popover for contextual information",
                    "differences": "Basic popover with body content and directional nubbin"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically implemented through custom components or third-party libraries"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus trigger element",
                    "Enter/Space to activate popover",
                    "Escape to close popover",
                    "Tab navigation within popover content"
                ],
                "screen_reader": [
                    "Popover content announced when displayed",
                    "Relationship to trigger element communicated",
                    "Close action clearly identified"
                ],
                "aria_attributes": [
                    "aria-describedby linking trigger to popover",
                    "role='tooltip' for informational popovers",
                    "role='dialog' for interactive popovers",
                    "aria-labelledby for popover titles"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For contextual help or additional information",
                    "To display details without leaving current context",
                    "For secondary actions related to specific elements",
                    "When space is limited for inline content"
                ],
                "when_not_to_use": [
                    "For critical information (use modals instead)",
                    "For primary navigation",
                    "When content should always be visible",
                    "For complex forms or workflows"
                ],
                "best_practices": [
                    "Keep popover content concise and focused",
                    "Position popover to avoid obscuring important content",
                    "Provide clear trigger indication",
                    "Use appropriate popover size for content",
                    "Implement proper dismissal behavior"
                ],
                "common_mistakes": [
                    "Making popover content too long or complex",
                    "Poor positioning that blocks important content",
                    "Unclear trigger-popover relationship",
                    "Missing dismissal methods"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Popover",
                    "code": "<div class=\"slds-popover slds-nubbin_left\" role=\"tooltip\">\n      <div class=\"slds-popover__body\">\n        <p>This is helpful contextual information about the element.</p>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "popover.css",
                    "nubbins.css"
                ],
                "javascript": [
                    "popover.js"
                ],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Tooltip",
                    "relationship": "similar",
                    "description": "Similar overlay for simple informational content"
                },
                {
                    "name": "Modal",
                    "relationship": "alternative",
                    "description": "Alternative for more complex or critical content"
                },
                {
                    "name": "Dropdown",
                    "relationship": "similar",
                    "description": "Similar positioning concept for menu content"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/popovers/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Progress Bar",
            "description": "A linear indicator that shows the completion status of a task or process, displaying progress as a filled portion of a horizontal bar.",
            "category": "Feedback",
            "slds_classes": {
                "root": "slds-progress-bar",
                "elements": [
                    {
                        "class": "slds-progress-bar__value",
                        "description": "The filled portion of the progress bar",
                        "purpose": "Visual indicator of completion percentage"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-progress-bar_x-small",
                        "description": "Extra small progress bar height",
                        "usage": "Compact progress indicator"
                    },
                    {
                        "class": "slds-progress-bar_small",
                        "description": "Small progress bar height",
                        "usage": "Smaller progress indicator"
                    },
                    {
                        "class": "slds-progress-bar_medium",
                        "description": "Medium progress bar height (default)",
                        "usage": "Standard progress bar size"
                    },
                    {
                        "class": "slds-progress-bar_large",
                        "description": "Large progress bar height",
                        "usage": "Prominent progress indicator"
                    },
                    {
                        "class": "slds-progress-bar_circular",
                        "description": "Circular progress bar variant",
                        "usage": "Alternative circular progress visualization"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard horizontal progress bar",
                    "classes": [
                        "slds-progress-bar"
                    ],
                    "usage_context": "Default progress visualization for linear tasks",
                    "differences": "Horizontal bar with filled progress indicator"
                }
            ],
            "lightning_component": {
                "name": "lightning-progress-bar",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-bar",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS progress bar blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "No specific keyboard interactions required"
                ],
                "screen_reader": [
                    "Progress value announced as percentage",
                    "Progress updates communicated to assistive technology",
                    "Progress bar purpose described through labeling"
                ],
                "aria_attributes": [
                    "role='progressbar' for progress semantic",
                    "aria-valuenow for current progress value",
                    "aria-valuemin='0' for minimum value",
                    "aria-valuemax='100' for maximum value",
                    "aria-label describing the progress task"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To show completion progress of tasks",
                    "For file uploads or downloads",
                    "During multi-step processes",
                    "When users need to understand progress status"
                ],
                "when_not_to_use": [
                    "For indeterminate loading (use spinner instead)",
                    "When progress cannot be measured",
                    "For instant operations"
                ],
                "best_practices": [
                    "Show actual progress percentage when possible",
                    "Update progress smoothly and frequently",
                    "Provide context about what's progressing",
                    "Use appropriate size for the context",
                    "Include text labels for clarity"
                ],
                "common_mistakes": [
                    "Not updating progress frequently enough",
                    "Using progress bars for indeterminate states",
                    "Poor labeling of what's being tracked",
                    "Inconsistent progress reporting"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Progress Bar",
                    "code": "<div class=\"slds-progress-bar\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Progress: 25%\">\n      <span class=\"slds-progress-bar__value\" style=\"width: 25%;\">\n        <span class=\"slds-assistive-text\">Progress: 25%</span>\n      </span>\n      </div>\n"
                },
                {
                    "title": "Large Progress Bar",
                    "code": "<div class=\"slds-progress-bar slds-progress-bar_large\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Upload progress: 75%\">\n      <span class=\"slds-progress-bar__value\" style=\"width: 75%;\">\n        <span class=\"slds-assistive-text\">Upload progress: 75%</span>\n      </span>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "progress-bar.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Progress Ring",
                    "relationship": "alternative",
                    "description": "Circular alternative for progress visualization"
                },
                {
                    "name": "Progress Indicator",
                    "relationship": "similar",
                    "description": "Step-based progress for multi-step processes"
                },
                {
                    "name": "Spinner",
                    "relationship": "alternative",
                    "description": "Alternative for indeterminate loading states"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/progress-bar/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Progress Indicator",
            "description": "A visual component that shows the user's progress through a multi-step process or workflow, indicating current position and completed steps.",
            "category": "Feedback",
            "slds_classes": {
                "root": "slds-progress",
                "elements": [
                    {
                        "class": "slds-progress__list",
                        "description": "Container for progress steps",
                        "purpose": "Holds the list of process steps"
                    },
                    {
                        "class": "slds-progress__item",
                        "description": "Individual progress step",
                        "purpose": "Represents a single step in the process"
                    },
                    {
                        "class": "slds-progress__marker",
                        "description": "Visual marker for step",
                        "purpose": "Provides visual indicator for step state"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-progress_vertical",
                        "description": "Vertical progress indicator",
                        "usage": "When vertical layout is preferred"
                    },
                    {
                        "class": "slds-progress_shade",
                        "description": "Progress indicator with shaded background",
                        "usage": "Enhanced visual emphasis"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-completed",
                        "description": "Completed step state",
                        "trigger": "Steps that have been finished"
                    },
                    {
                        "class": "slds-is-current",
                        "description": "Current step state",
                        "trigger": "The active step being worked on"
                    },
                    {
                        "class": "slds-is-incomplete",
                        "description": "Incomplete step state",
                        "trigger": "Steps not yet started"
                    },
                    {
                        "class": "slds-has-error",
                        "description": "Error step state",
                        "trigger": "Steps with validation errors"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard horizontal progress indicator",
                    "classes": [
                        "slds-progress"
                    ],
                    "usage_context": "Default progress display for multi-step processes",
                    "differences": "Horizontal layout with step markers and labels"
                },
                {
                    "name": "Vertical",
                    "description": "Vertical progress indicator",
                    "classes": [
                        "slds-progress",
                        "slds-progress_vertical"
                    ],
                    "usage_context": "When vertical space is available and preferred",
                    "differences": "Vertical layout with step progression"
                }
            ],
            "lightning_component": {
                "name": "lightning-progress-indicator",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS progress indicator blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through interactive steps",
                    "Enter/Space to activate clickable steps",
                    "Arrow keys for step navigation when appropriate"
                ],
                "screen_reader": [
                    "Progress state and current position announced",
                    "Step labels and completion status communicated",
                    "Total steps and current step number provided"
                ],
                "aria_attributes": [
                    "role='progressbar' for overall progress",
                    "aria-valuenow, aria-valuemin, aria-valuemax for progress values",
                    "aria-label describing the process",
                    "aria-current for the current step"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For multi-step processes or workflows",
                    "When users need to understand their progress",
                    "To show completion status of a sequence",
                    "For guided setup or onboarding flows"
                ],
                "when_not_to_use": [
                    "For single-step processes",
                    "When steps are not sequential",
                    "For simple loading states (use spinners instead)"
                ],
                "best_practices": [
                    "Use clear, descriptive step labels",
                    "Show current position prominently",
                    "Allow navigation to completed steps when appropriate",
                    "Provide estimated time or completion percentage",
                    "Handle error states gracefully"
                ],
                "common_mistakes": [
                    "Too many steps making progress unclear",
                    "Unclear or inconsistent step labeling",
                    "Not indicating current position clearly",
                    "Poor error state handling"
                ]
            },
            "code_examples": [
                {
                    "title": "Three-Step Progress Indicator",
                    "code": "<div class=\"slds-progress\">\n      <ol class=\"slds-progress__list\">\n        <li class=\"slds-progress__item slds-is-completed\">\n          <button class=\"slds-button slds-progress__marker\">\n            <span class=\"slds-assistive-text\">Step 1 - Completed</span>\n          </button>\n          <div class=\"slds-progress__item_content slds-grid slds-grid_align-spread\">\n            <div class=\"slds-size_1-of-2\">\n              <h3 class=\"\">Contact Information</h3>\n            </div>\n          </div>\n        </li>\n        <li class=\"slds-progress__item slds-is-current\">\n          <button class=\"slds-button slds-progress__marker\">\n            <span class=\"slds-assistive-text\">Step 2 - Current</span>\n          </button>\n          <div class=\"slds-progress__item_content slds-grid slds-grid_align-spread\">\n            <div class=\"slds-size_1-of-2\">\n              <h3 class=\"\">Account Details</h3>\n            </div>\n          </div>\n        </li>\n        <li class=\"slds-progress__item slds-is-incomplete\">\n          <button class=\"slds-button slds-progress__marker\">\n            <span class=\"slds-assistive-text\">Step 3 - Incomplete</span>\n          </button>\n          <div class=\"slds-progress__item_content slds-grid slds-grid_align-spread\">\n            <div class=\"slds-size_1-of-2\">\n              <h3 class=\"\">Review & Submit</h3>\n            </div>\n          </div>\n        </li>\n      </ol>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "progress.css",
                    "grid.css",
                    "button.css"
                ],
                "javascript": [
                    "progress.js"
                ],
                "icons": [],
                "other_components": [
                    "button",
                    "grid"
                ]
            },
            "related_components": [
                {
                    "name": "Progress Bar",
                    "relationship": "similar",
                    "description": "Alternative progress visualization"
                },
                {
                    "name": "Progress Ring",
                    "relationship": "similar",
                    "description": "Circular progress indicator"
                },
                {
                    "name": "Path",
                    "relationship": "similar",
                    "description": "Similar step-based navigation"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/progress-indicator/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Progress Ring",
            "description": "A circular progress indicator that shows completion status as a filled arc, providing an alternative visualization to linear progress bars.",
            "category": "Feedback",
            "slds_classes": {
                "root": "slds-progress-ring",
                "elements": [
                    {
                        "class": "slds-progress-ring__progress",
                        "description": "The progress arc element",
                        "purpose": "SVG element that displays the completion arc"
                    },
                    {
                        "class": "slds-progress-ring__content",
                        "description": "Content area in the center of the ring",
                        "purpose": "Optional content displayed within the progress ring"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-progress-ring_large",
                        "description": "Large progress ring size",
                        "usage": "Prominent progress display"
                    }
                ],
                "states": [
                    {
                        "class": "slds-progress-ring_complete",
                        "description": "Completed progress state",
                        "trigger": "When progress reaches 100%"
                    },
                    {
                        "class": "slds-progress-ring_warning",
                        "description": "Warning progress state",
                        "trigger": "When progress indicates a warning condition"
                    },
                    {
                        "class": "slds-progress-ring_expired",
                        "description": "Expired progress state",
                        "trigger": "When progress has expired or failed"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard circular progress ring",
                    "classes": [
                        "slds-progress-ring"
                    ],
                    "usage_context": "Default circular progress visualization",
                    "differences": "Circular progress indicator with arc fill"
                }
            ],
            "lightning_component": {
                "name": "lightning-progress-ring",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-ring",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS progress ring blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "No specific keyboard interactions required"
                ],
                "screen_reader": [
                    "Progress value announced as percentage",
                    "Progress state changes communicated",
                    "Ring purpose described through labeling"
                ],
                "aria_attributes": [
                    "role='progressbar' for progress semantic",
                    "aria-valuenow for current progress value",
                    "aria-valuemin='0' for minimum value",
                    "aria-valuemax='100' for maximum value",
                    "aria-label describing the progress task"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For circular progress visualization",
                    "When space constraints favor circular layout",
                    "To show completion of circular processes",
                    "For dashboard or metric displays"
                ],
                "when_not_to_use": [
                    "When linear progress is more intuitive",
                    "For indeterminate loading (use spinner instead)",
                    "When detailed progress steps are needed"
                ],
                "best_practices": [
                    "Use appropriate size for context and importance",
                    "Include percentage or completion text when helpful",
                    "Choose colors that convey appropriate meaning",
                    "Update progress smoothly",
                    "Consider animation for progress changes"
                ],
                "common_mistakes": [
                    "Making progress ring too small to read",
                    "Using inappropriate colors for progress state",
                    "Not providing progress value to assistive technology",
                    "Poor contrast between ring and background"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Progress Ring",
                    "code": "<div class=\"slds-progress-ring\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Progress: 75%\">\n      <svg viewBox=\"-1 -1 2 2\" class=\"slds-progress-ring__progress\">\n        <circle class=\"slds-progress-ring__path\" r=\"1\"></circle>\n        <circle class=\"\" r=\"1\" style=\"stroke-dasharray: 4.712, 6.283\"></circle>\n      </svg>\n      <div class=\"slds-progress-ring__content\">75%</div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "progress-ring.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Progress Bar",
                    "relationship": "alternative",
                    "description": "Linear alternative for progress visualization"
                },
                {
                    "name": "Progress Indicator",
                    "relationship": "similar",
                    "description": "Step-based progress for multi-step processes"
                },
                {
                    "name": "Spinner",
                    "relationship": "alternative",
                    "description": "Alternative for indeterminate loading states"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/progress-ring/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Prompt",
            "description": "A prompt is a modal dialog that asks the user to confirm an action or provide input. It typically contains a question or message, along with action buttons for the user to respond.",
            "category": "Overlay",
            "slds_classes": {
                "root": "",
                "elements": [],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Open state for prompt modal",
                        "trigger": "When prompt is visible"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state for prompt actions",
                        "trigger": "When prompt actions are not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard prompt modal dialog",
                    "classes": [],
                    "usage_context": "Default prompt implementation",
                    "differences": "Modal dialog with header, body, and footer sections"
                }
            ],
            "lightning_component": {
                "name": "lightning-modal",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-modal",
                "mapping_notes": "Lightning modal can be configured as a prompt with appropriate content and actions"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between focusable elements",
                    "Shift+Tab to navigate backwards",
                    "Escape to close the prompt",
                    "Enter to confirm (when appropriate)"
                ],
                "screen_reader": [
                    "Prompt title announced",
                    "Prompt content announced",
                    "Action buttons announced",
                    "Close button announced"
                ],
                "aria_attributes": [
                    "role='dialog' or 'alertdialog' on prompt container",
                    "aria-labelledby pointing to prompt title",
                    "aria-describedby pointing to prompt content",
                    "aria-modal='true' on dialog",
                    "aria-label on close button",
                    "Focus trap within modal"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When user confirmation is required before an action",
                    "For destructive actions that need confirmation",
                    "When user input is needed in a modal context",
                    "For important decisions that require user attention"
                ],
                "when_not_to_use": [
                    "For simple informational messages (use alerts)",
                    "For non-critical confirmations (use inline confirmations)",
                    "When action can be easily undone",
                    "For frequent, repetitive confirmations"
                ],
                "best_practices": [
                    "Use clear, concise messaging",
                    "Provide specific action button labels",
                    "Make destructive actions clearly distinguishable",
                    "Ensure proper focus management",
                    "Provide keyboard shortcuts for common actions",
                    "Use appropriate dialog role (dialog vs alertdialog)",
                    "Include a way to dismiss (close button or cancel)"
                ],
                "common_mistakes": [
                    "Overusing prompts for non-critical actions",
                    "Unclear or vague messaging",
                    "Missing keyboard navigation",
                    "Not trapping focus within modal",
                    "Missing ARIA attributes",
                    "No way to dismiss the prompt"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Prompt",
                    "code": "<div class=\"slds-is-open\" role=\"dialog\" aria-labelledby=\"prompt-title\" aria-describedby=\"prompt-content\" aria-modal=\"true\">\n      <div class=\"\">\n        <h2 id=\"prompt-title\" class=\"slds-text-heading_medium\">Confirm Action</h2>\n        <button class=\"slds-button slds-button_icon slds-button_icon-small\" aria-label=\"Close\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"\" id=\"prompt-content\">\n        <p>Are you sure you want to perform this action?</p>\n      </div>\n      <div class=\"\">\n        <button class=\"slds-button slds-button_neutral\">Cancel</button>\n        <button class=\"slds-button slds-button_brand\">Confirm</button>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Destructive Action Prompt",
                    "code": "<div class=\"slds-is-open\" role=\"alertdialog\" aria-labelledby=\"delete-title\" aria-describedby=\"delete-content\" aria-modal=\"true\">\n      <div class=\"\">\n        <h2 id=\"delete-title\" class=\"slds-text-heading_medium\">Delete Record</h2>\n        <button class=\"slds-button slds-button_icon slds-button_icon-small\" aria-label=\"Close\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"\" id=\"delete-content\">\n        <p>This action cannot be undone. Are you sure you want to delete this record?</p>\n      </div>\n      <div class=\"\">\n        <button class=\"slds-button slds-button_neutral\">Cancel</button>\n        <button class=\"slds-button slds-button_destructive\">Delete</button>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "prompt.css",
                    "modal.css",
                    "button.css"
                ],
                "javascript": [
                    "Modal open/close functionality",
                    "Focus trap management",
                    "Backdrop/overlay handling",
                    "Escape key handling"
                ],
                "icons": [
                    "utility:close"
                ],
                "other_components": [
                    "modal",
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Modal",
                    "relationship": "parent",
                    "description": "Base modal component that prompt extends"
                },
                {
                    "name": "Alert",
                    "relationship": "alternative",
                    "description": "For non-interactive messages"
                },
                {
                    "name": "Popover",
                    "relationship": "alternative",
                    "description": "For lightweight overlays"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/prompt/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/prompt/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Publishers",
            "description": "A component for creating and publishing content, posts, or comments. Provides an input area with formatting options and action buttons for submitting user-generated content.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "slds-publisher",
                "elements": [
                    {
                        "class": "slds-publisher__input",
                        "description": "Input area for content creation",
                        "purpose": "Text input or textarea for user content"
                    },
                    {
                        "class": "slds-publisher__actions",
                        "description": "Container for publisher actions",
                        "purpose": "Holds submit and formatting buttons"
                    },
                    {
                        "class": "slds-publisher__toggle-visibility",
                        "description": "Toggle element for publisher visibility",
                        "purpose": "Controls visibility of publisher component"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active state for publisher",
                        "trigger": "When publisher is expanded and ready for input"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard publisher for creating posts or comments",
                    "classes": [
                        "slds-publisher"
                    ],
                    "usage_context": "Default publisher implementation",
                    "differences": "Input area with action buttons for content creation"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically built with lightning-textarea and custom components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between input and buttons",
                    "Enter in input field may submit (depending on implementation)",
                    "Escape to cancel/collapse publisher",
                    "Keyboard shortcuts for formatting (if supported)"
                ],
                "screen_reader": [
                    "Input field label announced",
                    "Character count announced (if present)",
                    "Action button purposes announced",
                    "Submit confirmation announced"
                ],
                "aria_attributes": [
                    "aria-label on input field",
                    "aria-describedby for character limits or hints",
                    "aria-disabled on submit when invalid",
                    "role='textbox' on input area"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For creating social posts or updates",
                    "For commenting systems",
                    "In collaboration or communication features",
                    "When users need to create content"
                ],
                "when_not_to_use": [
                    "For simple form inputs (use form elements)",
                    "When content creation isn't primary action",
                    "For search inputs",
                    "When rich text editing isn't needed"
                ],
                "best_practices": [
                    "Provide clear submit action button",
                    "Show character limits if applicable",
                    "Support basic text formatting",
                    "Auto-save drafts when possible",
                    "Provide cancel/clear option",
                    "Handle empty submissions gracefully"
                ],
                "common_mistakes": [
                    "Missing cancel or clear option",
                    "No character limit indication",
                    "Poor mobile keyboard handling",
                    "Not preserving draft content",
                    "Unclear submit button state"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Publisher",
                    "code": "<div class=\"slds-publisher slds-is-active\">\n  <label for=\"publisher-textarea\" class=\"slds-assistive-text\">Write a post</label>\n  <textarea id=\"publisher-textarea\" class=\"slds-publisher__input slds-textarea\" placeholder=\"What's on your mind?\"></textarea>\n  <div class=\"slds-publisher__actions slds-grid slds-grid_align-spread\">\n    <ul class=\"slds-grid\">\n      <li>\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-small\" title=\"Attach a file\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#attach\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Attach a file</span>\n        </button>\n      </li>\n    </ul>\n    <button class=\"slds-button slds-button_brand\">Post</button>\n  </div>\n</div>\n",
                    "description": "Basic publisher with text input and post button"
                },
                {
                    "title": "Publisher with Formatting Options",
                    "code": "<div class=\"slds-publisher slds-is-active\">\n  <label for=\"rich-publisher-textarea\" class=\"slds-assistive-text\">Write a post</label>\n  <textarea id=\"rich-publisher-textarea\" class=\"slds-publisher__input slds-textarea\" placeholder=\"Share your thoughts...\"></textarea>\n  <div class=\"slds-publisher__actions slds-grid slds-grid_align-spread\">\n    <ul class=\"slds-grid slds-grid_vertical-align-center\">\n      <li>\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-small\" title=\"Bold\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#bold\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Bold</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-small\" title=\"Italic\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#italic\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Italic</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"slds-button slds-button_icon slds-button_icon-border slds-button_icon-small\" title=\"Link\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#link\"></use>\n          </svg>\n          <span class=\"slds-assistive-text\">Insert link</span>\n        </button>\n      </li>\n    </ul>\n    <div class=\"slds-grid\">\n      <button class=\"slds-button slds-button_neutral slds-m-right_x-small\">Cancel</button>\n      <button class=\"slds-button slds-button_brand\">Publish</button>\n    </div>\n  </div>\n</div>\n",
                    "description": "Publisher with text formatting options and cancel button"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "publishers.css",
                    "textarea.css",
                    "button.css"
                ],
                "javascript": [
                    "Input validation",
                    "Character counting",
                    "Submit handling",
                    "Draft auto-save"
                ],
                "icons": [
                    "utility:attach",
                    "utility:bold",
                    "utility:italic",
                    "utility:link"
                ],
                "other_components": [
                    "textarea",
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Feed",
                    "relationship": "complementary",
                    "description": "Displays published content from publisher"
                },
                {
                    "name": "Rich Text Editor",
                    "relationship": "alternative",
                    "description": "More advanced editing capabilities"
                },
                {
                    "name": "Textarea",
                    "relationship": "contains",
                    "description": "Input element within publisher"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/publishers/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-11",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code"
            }
        },
        {
            "name": "Radio Button Group",
            "description": "A group of radio buttons that allows users to select a single option from a set of mutually exclusive choices. Radio button groups are used when only one option can be selected at a time.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-radio_button-group",
                "elements": [
                    {
                        "class": "slds-radio_button",
                        "description": "Individual radio button within the group",
                        "purpose": "Container for each radio option in the button group"
                    },
                    {
                        "class": "slds-radio_faux",
                        "description": "Visual radio button replacement styled as a button",
                        "purpose": "Custom-styled radio appearance that looks like a button"
                    },
                    {
                        "class": "slds-radio_button__label",
                        "description": "Label element for the radio button",
                        "purpose": "Provides clickable area and contains the radio faux element"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling for the form element",
                        "trigger": "When radio button group validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When radio button group is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard radio button group",
                    "classes": [
                        "slds-radio_button-group"
                    ],
                    "usage_context": "Default radio button group implementation",
                    "differences": "Group of radio buttons with shared border and styling, mutually exclusive selection"
                }
            ],
            "lightning_component": {
                "name": "lightning-radio-group",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-radio-group",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS radio button group blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate to the radio button group",
                    "Arrow keys (Up/Down/Left/Right) to navigate between radio options",
                    "Space to select the focused radio option",
                    "Tab to move to next form element after selection"
                ],
                "screen_reader": [
                    "Fieldset legend announced as group label",
                    "Radio button state announced (checked/unchecked)",
                    "Label text read with each radio button",
                    "Error messages associated and announced"
                ],
                "aria_attributes": [
                    "fieldset and legend for group semantics",
                    "aria-describedby for error messages",
                    "aria-invalid when validation fails",
                    "aria-required for required radio groups",
                    "role='radiogroup' on fieldset (if not using native fieldset)"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When users need to select exactly one option from a set",
                    "For mutually exclusive choices",
                    "When options are closely related and benefit from visual grouping",
                    "For preference selection, single-choice forms, or settings"
                ],
                "when_not_to_use": [
                    "When multiple options can be selected (use checkbox group)",
                    "For binary choices (use single checkbox or toggle)",
                    "When only two options exist (consider toggle or checkbox)",
                    "For actions (use buttons instead)"
                ],
                "best_practices": [
                    "Use clear, descriptive legend text for the group",
                    "Keep option labels short and concise",
                    "Group related options logically",
                    "Provide immediate visual feedback for selection",
                    "Ensure adequate touch target size for mobile",
                    "Use error states to indicate validation issues",
                    "Always have one option selected by default when appropriate"
                ],
                "common_mistakes": [
                    "Using radio button group for multiple selections",
                    "Making labels too long or unclear",
                    "Not providing proper fieldset/legend structure",
                    "Missing error state handling",
                    "Inadequate spacing between buttons",
                    "Not having a default selection when one is expected"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Radio Button Group",
                    "code": "<fieldset class=\"slds-form-element\">\n  <legend class=\"slds-form-element__legend slds-form-element__label\">\n    Select an Option\n  </legend>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-radio_button-group\">\n      <span class=\"slds-button slds-radio_button\">\n        <input type=\"radio\" name=\"radio-group\" id=\"radio-1\" value=\"option1\" />\n        <label class=\"slds-radio_button__label\" for=\"radio-1\">\n          <span class=\"slds-radio_faux\">Option 1</span>\n        </label>\n      </span>\n      <span class=\"slds-button slds-radio_button\">\n        <input type=\"radio\" name=\"radio-group\" id=\"radio-2\" value=\"option2\" />\n        <label class=\"slds-radio_button__label\" for=\"radio-2\">\n          <span class=\"slds-radio_faux\">Option 2</span>\n        </label>\n      </span>\n      <span class=\"slds-button slds-radio_button\">\n        <input type=\"radio\" name=\"radio-group\" id=\"radio-3\" value=\"option3\" />\n        <label class=\"slds-radio_button__label\" for=\"radio-3\">\n          <span class=\"slds-radio_faux\">Option 3</span>\n        </label>\n      </span>\n    </div>\n  </div>\n</fieldset>\n",
                    "description": "Basic radio button group with three mutually exclusive options"
                },
                {
                    "title": "Radio Button Group with Error State",
                    "code": "<fieldset class=\"slds-form-element slds-has-error\">\n  <legend class=\"slds-form-element__legend slds-form-element__label\">\n    <abbr class=\"slds-required\" title=\"required\">*</abbr> Select an Option\n  </legend>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-radio_button-group\">\n      <span class=\"slds-button slds-radio_button\">\n        <input type=\"radio\" name=\"radio-error\" id=\"radio-error-1\" value=\"option1\" aria-describedby=\"radio-error-message\" />\n        <label class=\"slds-radio_button__label\" for=\"radio-error-1\">\n          <span class=\"slds-radio_faux\">Option 1</span>\n        </label>\n      </span>\n      <span class=\"slds-button slds-radio_button\">\n        <input type=\"radio\" name=\"radio-error\" id=\"radio-error-2\" value=\"option2\" />\n        <label class=\"slds-radio_button__label\" for=\"radio-error-2\">\n          <span class=\"slds-radio_faux\">Option 2</span>\n        </label>\n      </span>\n    </div>\n  </div>\n  <div id=\"radio-error-message\" class=\"slds-form-element__help\">This field is required</div>\n</fieldset>\n",
                    "description": "Radio button group with error state and validation message"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "radio-button-group.css",
                    "form-element.css",
                    "radio-button.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element",
                    "radio-button"
                ]
            },
            "related_components": [
                {
                    "name": "Radio Group",
                    "relationship": "similar",
                    "description": "Standard radio group with circular radio buttons"
                },
                {
                    "name": "Checkbox Button Group",
                    "relationship": "alternative",
                    "description": "For multiple selections instead of single selection"
                },
                {
                    "name": "Radio Button",
                    "relationship": "similar",
                    "description": "Individual radio button component"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/radio-button-group/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/radio-button-group/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-01-15",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations."
            }
        },
        {
            "name": "Radio Group",
            "description": "A collection of radio button options that allows users to select exactly one choice from a set of mutually exclusive options.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-radio_button-group",
                "elements": [
                    {
                        "class": "slds-radio_button",
                        "description": "Individual radio button wrapper",
                        "purpose": "Contains a single radio button and its label"
                    },
                    {
                        "class": "slds-radio_button__label",
                        "description": "Label element for the radio button",
                        "purpose": "Provides clickable area and describes the option"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling",
                        "trigger": "When radio group validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When radio group is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard radio button group",
                    "classes": [
                        "slds-radio_button-group"
                    ],
                    "usage_context": "Default radio group implementation",
                    "differences": "Standard radio buttons with labels arranged vertically"
                }
            ],
            "lightning_component": {
                "name": "lightning-radio-group",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-radio-group",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS radio group blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to enter the radio group",
                    "Arrow keys to navigate between options",
                    "Space to select highlighted option",
                    "Tab to exit the radio group"
                ],
                "screen_reader": [
                    "Group purpose and current selection announced",
                    "Individual option labels read clearly",
                    "Required state communicated when applicable"
                ],
                "aria_attributes": [
                    "role='radiogroup' for the container",
                    "aria-labelledby for group labeling",
                    "aria-describedby for group help text",
                    "aria-required when selection is mandatory",
                    "aria-invalid when validation fails"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For mutually exclusive options (only one selection allowed)",
                    "When users must choose exactly one option",
                    "For small sets of related options (2-7 choices)",
                    "When all options should be visible simultaneously"
                ],
                "when_not_to_use": [
                    "For multiple selections (use checkbox group instead)",
                    "For large sets of options (use select or combobox)",
                    "When no selection is a valid choice initially"
                ],
                "best_practices": [
                    "Use clear, distinct option labels",
                    "Arrange options in logical order",
                    "Provide a default selection when appropriate",
                    "Keep option labels concise",
                    "Group related options together"
                ],
                "common_mistakes": [
                    "Using radio groups for multiple selections",
                    "Too many options making selection difficult",
                    "Unclear or ambiguous option labels",
                    "Not providing a sensible default selection"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Radio Group",
                    "code": "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\">\n        <abbr class=\"slds-required\" title=\"required\">* </abbr>Radio Group Label\n      </legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-radio_button-group\">\n          <span class=\"slds-radio_button\">\n            <input type=\"radio\" id=\"radio-1\" value=\"option1\" name=\"options\" />\n            <label class=\"slds-radio_button__label\" for=\"radio-1\">\n              <span class=\"\"></span>\n              <span class=\"slds-form-element__label\">Option One</span>\n            </label>\n          </span>\n          <span class=\"slds-radio_button\">\n            <input type=\"radio\" id=\"radio-2\" value=\"option2\" name=\"options\" />\n            <label class=\"slds-radio_button__label\" for=\"radio-2\">\n              <span class=\"\"></span>\n              <span class=\"slds-form-element__label\">Option Two</span>\n            </label>\n          </span>\n          <span class=\"slds-radio_button\">\n            <input type=\"radio\" id=\"radio-3\" value=\"option3\" name=\"options\" />\n            <label class=\"slds-radio_button__label\" for=\"radio-3\">\n              <span class=\"\"></span>\n              <span class=\"slds-form-element__label\">Option Three</span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </fieldset>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-radio-color-border",
                    "description": "Border color for radio buttons",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "radio-group.css",
                    "form-element.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Checkbox Group",
                    "relationship": "alternative",
                    "description": "For multiple selection scenarios"
                },
                {
                    "name": "Select",
                    "relationship": "alternative",
                    "description": "For larger sets of mutually exclusive options"
                },
                {
                    "name": "Button Group",
                    "relationship": "alternative",
                    "description": "Alternative visual treatment for option selection"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/radio-group/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Rich Text Editor",
            "description": "A comprehensive text editing interface that provides formatting tools, allowing users to create and edit rich content with styles, links, lists, and other formatting options.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-rich-text-editor",
                "elements": [
                    {
                        "class": "slds-rich-text-editor__toolbar",
                        "description": "Container for formatting toolbar",
                        "purpose": "Contains all formatting buttons and controls"
                    },
                    {
                        "class": "slds-rich-text-editor__textarea",
                        "description": "Main text editing area",
                        "purpose": "Editable content area for rich text input"
                    },
                    {
                        "class": "slds-rich-text-editor__output",
                        "description": "Rendered output area",
                        "purpose": "Displays formatted rich text content"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active formatting button state",
                        "trigger": "Applied to currently active formatting options"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focused editor state",
                        "trigger": "Applied when editor has keyboard focus"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard rich text editor with full toolbar",
                    "classes": [
                        "slds-rich-text-editor"
                    ],
                    "usage_context": "Default implementation for rich text editing",
                    "differences": "Complete formatting toolbar with all standard options"
                },
                {
                    "name": "Email",
                    "description": "Email-optimized rich text editor",
                    "classes": [
                        "slds-rich-text-editor"
                    ],
                    "usage_context": "Specifically for email composition and editing",
                    "differences": "Email-specific formatting options and constraints"
                },
                {
                    "name": "Minimal",
                    "description": "Simplified rich text editor with basic formatting",
                    "classes": [
                        "slds-rich-text-editor"
                    ],
                    "usage_context": "When only basic formatting is needed",
                    "differences": "Reduced toolbar with essential formatting only"
                }
            ],
            "lightning_component": {
                "name": "lightning-input-rich-text",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input-rich-text",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS rich text editor blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through toolbar buttons",
                    "Enter/Space to activate formatting buttons",
                    "Standard text editing shortcuts (Ctrl+B, Ctrl+I, etc.)",
                    "Arrow keys for text navigation",
                    "Escape to exit formatting modes"
                ],
                "screen_reader": [
                    "Toolbar structure and groups announced",
                    "Formatting state changes communicated",
                    "Content changes announced appropriately",
                    "Rich text content structure conveyed"
                ],
                "aria_attributes": [
                    "role='toolbar' for formatting toolbar",
                    "role='group' for toolbar sections",
                    "aria-pressed for toggle buttons",
                    "aria-label for formatting buttons",
                    "aria-describedby for editor instructions"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For content that requires text formatting",
                    "When users need to create rich documents",
                    "For email composition with formatting",
                    "In content management scenarios"
                ],
                "when_not_to_use": [
                    "For simple text input (use textarea)",
                    "When formatting is not needed",
                    "In constrained mobile interfaces"
                ],
                "best_practices": [
                    "Provide clear formatting button labels",
                    "Group related formatting options logically",
                    "Support standard keyboard shortcuts",
                    "Provide undo/redo functionality",
                    "Handle paste operations gracefully"
                ],
                "common_mistakes": [
                    "Overwhelming users with too many options",
                    "Poor keyboard accessibility",
                    "Inconsistent formatting behavior",
                    "Not handling paste from external sources"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Rich Text Editor",
                    "description": "Rich text editor optimized for email composition",
                    "code": "<div class=\"slds-rich-text-editor slds-grid slds-grid_vertical\">\n      <div class=\"slds-rich-text-editor__toolbar\" role=\"toolbar\" aria-label=\"Email formatting\">\n        <div class=\"\">\n          <select class=\"slds-select\" aria-label=\"Font family\">\n            <option>Arial</option>\n            <option>Times New Roman</option>\n            <option>Helvetica</option>\n          </select>\n          <select class=\"slds-select\" aria-label=\"Font size\">\n            <option>12px</option>\n            <option>14px</option>\n            <option>16px</option>\n            <option>18px</option>\n          </select>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_icon slds-button_icon-border slds-is-active\" aria-pressed=\"true\" title=\"Bold\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#bold\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Bold</span>\n          </button>\n          <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Text Color\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#text_color\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Text Color</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"slds-rich-text-editor__textarea\">\n        <div contenteditable=\"true\" class=\"slds-rich-text-area__content\" aria-label=\"Email content\">\n          <p><strong>Dear Customer,</strong></p>\n          <p>Thank you for your inquiry...</p>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "rich-text-editor.css",
                    "button.css",
                    "select.css",
                    "textarea.css"
                ],
                "javascript": [
                    "rich-text-editor.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "select",
                    "textarea"
                ]
            },
            "related_components": [
                {
                    "name": "Textarea",
                    "relationship": "alternative",
                    "description": "Alternative for plain text input"
                },
                {
                    "name": "Input",
                    "relationship": "similar",
                    "description": "Similar form input concept"
                },
                {
                    "name": "Combobox",
                    "relationship": "depends-on",
                    "description": "Used for formatting option selection"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/rich-text-editor/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Scoped Notifications",
            "description": "Scoped notifications serve advisory information for the user that is not important enough to justify an alert. It is often presented as a status bar scoped to the container. They are not dismissible.",
            "category": "Feedback",
            "slds_classes": {
                "root": "slds-scoped-notification",
                "elements": [
                    {
                        "class": "slds-media__figure",
                        "description": "Container for the notification icon",
                        "purpose": "Holds the utility icon that indicates notification type"
                    },
                    {
                        "class": "slds-media__body",
                        "description": "Container for the notification message content",
                        "purpose": "Contains the notification text and any links"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-scoped-notification_light",
                        "description": "Light theme variant for scoped notification",
                        "usage": "Use for light background notifications with dark text"
                    },
                    {
                        "class": "slds-scoped-notification_dark",
                        "description": "Dark theme variant for scoped notification",
                        "usage": "Use for dark background notifications with light text"
                    },
                    {
                        "class": "slds-theme_info",
                        "description": "Informational theme (defaults to dark)",
                        "usage": "For informational messages"
                    },
                    {
                        "class": "slds-theme_success",
                        "description": "Success theme",
                        "usage": "For success messages"
                    },
                    {
                        "class": "slds-theme_warning",
                        "description": "Warning theme",
                        "usage": "For warning messages"
                    },
                    {
                        "class": "slds-theme_error",
                        "description": "Error theme",
                        "usage": "For error messages"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Light Theme",
                    "description": "Light background scoped notification",
                    "classes": [
                        "slds-scoped-notification",
                        "slds-scoped-notification_light"
                    ],
                    "usage_context": "Use on light backgrounds or when dark theme is not appropriate",
                    "differences": "Light background with dark text"
                },
                {
                    "name": "Dark Theme",
                    "description": "Dark background scoped notification",
                    "classes": [
                        "slds-scoped-notification",
                        "slds-scoped-notification_dark"
                    ],
                    "usage_context": "Default for informational notifications, use for emphasis",
                    "differences": "Dark background with light text"
                },
                {
                    "name": "Informational",
                    "description": "Informational scoped notification",
                    "classes": [
                        "slds-scoped-notification",
                        "slds-theme_info"
                    ],
                    "usage_context": "For general information messages",
                    "differences": "Informational styling, defaults to dark theme"
                },
                {
                    "name": "Success",
                    "description": "Success scoped notification",
                    "classes": [
                        "slds-scoped-notification",
                        "slds-theme_success"
                    ],
                    "usage_context": "For success or completion messages",
                    "differences": "Success color styling"
                },
                {
                    "name": "Warning",
                    "description": "Warning scoped notification",
                    "classes": [
                        "slds-scoped-notification",
                        "slds-theme_warning"
                    ],
                    "usage_context": "For warning messages",
                    "differences": "Warning color styling"
                },
                {
                    "name": "Error",
                    "description": "Error scoped notification",
                    "classes": [
                        "slds-scoped-notification",
                        "slds-theme_error"
                    ],
                    "usage_context": "For error messages",
                    "differences": "Error color styling"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - use custom implementation with SLDS classes"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate to links within notification",
                    "Focus visible on links for keyboard users"
                ],
                "screen_reader": [
                    "Notification content announced via role='status'",
                    "Icon type announced (info, success, warning, error)",
                    "Link text and context announced"
                ],
                "aria_attributes": [
                    "role='status' on container for live region announcements",
                    "aria-label or assistive text on icons",
                    "Proper link focus indicators"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For advisory information that doesn't require immediate attention",
                    "For status updates within a specific container or section",
                    "For non-critical feedback messages",
                    "When information should persist (not dismissible)"
                ],
                "when_not_to_use": [
                    "For critical errors (use alerts instead)",
                    "For information requiring immediate attention (use alerts)",
                    "For dismissible notifications (use toast or alerts)",
                    "For page-level messages (use page-level alerts)"
                ],
                "best_practices": [
                    "Use appropriate theme (light/dark) for context",
                    "Choose correct type (info/success/warning/error)",
                    "Keep messages concise and actionable",
                    "Include icons to reinforce message type",
                    "Use links for actionable items within notifications",
                    "Ensure sufficient color contrast",
                    "Place within relevant container scope"
                ],
                "common_mistakes": [
                    "Using for critical errors that need alerts",
                    "Making notifications dismissible (they're not)",
                    "Using wrong theme for background context",
                    "Missing icons for message type",
                    "Too verbose or unclear messaging"
                ]
            },
            "code_examples": [
                {
                    "title": "Informational Scoped Notification (Dark Theme)",
                    "code": "<div class=\"slds-scoped-notification slds-media slds-media_center slds-theme_info\" role=\"status\">\n  <div class=\"slds-media__figure\">\n    <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#info\"></use>\n    </svg>\n  </div>\n  <div class=\"slds-media__body\">\n    <p>This is an informational notification.</p>\n  </div>\n</div>\n",
                    "description": "Informational scoped notification with dark theme (default)"
                },
                {
                    "title": "Success Scoped Notification",
                    "code": "<div class=\"slds-scoped-notification slds-media slds-media_center slds-theme_success\" role=\"status\">\n  <div class=\"slds-media__figure\">\n    <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#success\"></use>\n    </svg>\n  </div>\n  <div class=\"slds-media__body\">\n    <p>Your changes have been saved successfully.</p>\n  </div>\n</div>\n",
                    "description": "Success scoped notification"
                },
                {
                    "title": "Light Theme Scoped Notification",
                    "code": "<div class=\"slds-scoped-notification slds-scoped-notification_light slds-media slds-media_center\" role=\"status\">\n  <div class=\"slds-media__figure\">\n    <svg class=\"slds-icon slds-icon_small slds-icon-text-default\" aria-hidden=\"true\">\n      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#info\"></use>\n    </svg>\n  </div>\n  <div class=\"slds-media__body\">\n    <p>This is a light theme notification. <a href=\"#\">Learn more</a></p>\n  </div>\n</div>\n",
                    "description": "Light theme scoped notification with link"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "scoped-notifications.css",
                    "media.css",
                    "icons.css"
                ],
                "javascript": [],
                "icons": [
                    "utility:info",
                    "utility:success",
                    "utility:warning",
                    "utility:error"
                ],
                "other_components": [
                    "media",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Alert",
                    "relationship": "alternative",
                    "description": "For critical or dismissible messages"
                },
                {
                    "name": "Toast",
                    "relationship": "alternative",
                    "description": "For dismissible temporary notifications"
                },
                {
                    "name": "Notifications",
                    "relationship": "similar",
                    "description": "General notification component"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/scoped-notifications/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/scoped-notifications/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-01-15",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Uses role='status' for accessibility."
            }
        },
        {
            "name": "Scoped Tabs",
            "description": "A tabbed interface that provides scoped navigation within a specific context or container, allowing users to switch between related content areas.",
            "category": "Navigation",
            "slds_classes": {
                "root": "",
                "elements": [],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active tab state",
                        "trigger": "Applied to the currently selected tab"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focused tab state",
                        "trigger": "Applied when tab receives keyboard focus"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard scoped tabs with horizontal navigation",
                    "classes": [],
                    "usage_context": "Default implementation for scoped content switching",
                    "differences": "Horizontal tab navigation with scoped styling"
                }
            ],
            "lightning_component": {
                "name": "lightning-tabset",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset",
                "mapping_notes": "Maps to lightning-tabset with variant='scoped' - provides scoped tab functionality"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus tab navigation",
                    "Arrow keys to navigate between tabs",
                    "Enter/Space to activate tabs",
                    "Tab to move to tab panel content"
                ],
                "screen_reader": [
                    "Tab list structure announced",
                    "Active tab clearly identified",
                    "Tab panel content associated with tab"
                ],
                "aria_attributes": [
                    "role='tablist' for tab navigation container",
                    "role='tab' for individual tab buttons",
                    "role='tabpanel' for content areas",
                    "aria-selected for active tab state",
                    "aria-controls linking tabs to panels",
                    "aria-labelledby linking panels to tabs"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For scoped content organization within a container",
                    "When content areas are related but distinct",
                    "To provide contextual navigation within a section",
                    "For secondary navigation within a page"
                ],
                "when_not_to_use": [
                    "For primary page navigation (use regular tabs)",
                    "When content areas are unrelated",
                    "For single content areas"
                ],
                "best_practices": [
                    "Keep tab labels concise and descriptive",
                    "Limit number of tabs to avoid overflow",
                    "Ensure tab content is related and contextual",
                    "Provide clear visual indication of active tab",
                    "Handle overflow gracefully with scrolling or menus"
                ],
                "common_mistakes": [
                    "Using too many tabs causing overflow issues",
                    "Making tab labels unclear or ambiguous",
                    "Not providing clear active state indication",
                    "Using scoped tabs for unrelated content"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Scoped Tabs",
                    "description": "Scoped tabs with overflow handling for many tabs",
                    "code": "<div class=\"\">\n      <div class=\"\" role=\"tablist\">\n        <button class=\"slds-is-active\" role=\"tab\" aria-selected=\"true\">\n          Active Tab\n        </button>\n        <button class=\"\" role=\"tab\" aria-selected=\"false\">\n          Tab Two\n        </button>\n        <button class=\"\" role=\"tab\" aria-selected=\"false\">\n          Tab Three\n        </button>\n        <button class=\"\" role=\"tab\" aria-selected=\"false\">\n          Tab Four\n        </button>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "scoped-tabs.css",
                    "tabs.css"
                ],
                "javascript": [
                    "scoped-tabs.js"
                ],
                "icons": [],
                "other_components": [
                    "tabs"
                ]
            },
            "related_components": [
                {
                    "name": "Tabs",
                    "relationship": "variant",
                    "description": "Base tabs component that scoped tabs extends"
                },
                {
                    "name": "Vertical Navigation",
                    "relationship": "alternative",
                    "description": "Alternative navigation pattern for content switching"
                },
                {
                    "name": "Path",
                    "relationship": "similar",
                    "description": "Similar navigation concept for different contexts"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/scoped-tabs/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Select",
            "description": "A form control that presents users with a dropdown list of predefined options, allowing selection of one option from the list.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-select",
                "elements": [
                    {
                        "class": "slds-select_container",
                        "description": "Container wrapper for select element",
                        "purpose": "Provides styling wrapper for the select control"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling",
                        "trigger": "When select validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When select is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard select dropdown",
                    "classes": [
                        "slds-select"
                    ],
                    "usage_context": "Default select implementation for option selection",
                    "differences": "Standard dropdown with predefined options"
                }
            ],
            "lightning_component": {
                "name": "lightning-select",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-select",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS select blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the select",
                    "Arrow keys to navigate options",
                    "Enter/Space to open dropdown",
                    "First letter to jump to matching options"
                ],
                "screen_reader": [
                    "Select purpose and current value announced",
                    "Option list and current selection communicated",
                    "Required state indicated when applicable"
                ],
                "aria_attributes": [
                    "aria-describedby for help text and error messages",
                    "aria-invalid when validation fails",
                    "aria-required for required selects",
                    "aria-label when no visible label present"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For selecting one option from a predefined list",
                    "When you have 4-15 options to choose from",
                    "For standard form inputs requiring selection",
                    "When options are well-known and don't require search"
                ],
                "when_not_to_use": [
                    "For more than 15 options (use combobox instead)",
                    "When users need to search or filter (use combobox)",
                    "For multiple selections (use checkbox group)",
                    "For binary choices (use radio buttons or toggle)"
                ],
                "best_practices": [
                    "Use clear, descriptive option labels",
                    "Order options logically (alphabetical, frequency, importance)",
                    "Provide a default selection when appropriate",
                    "Keep option lists manageable in size",
                    "Use proper form structure and labeling"
                ],
                "common_mistakes": [
                    "Too many options making selection difficult",
                    "Unclear or ambiguous option labels",
                    "Poor option ordering",
                    "Missing default selection when needed"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Select",
                    "code": "<div class=\"slds-form-element\">\n  <label class=\"slds-form-element__label\" for=\"select-01\">\n    <abbr class=\"slds-required\" title=\"required\">* </abbr>Select Label\n  </label>\n  <div class=\"slds-form-element__control\">\n    <div class=\"slds-select_container\">\n      <select class=\"slds-select\" id=\"select-01\" required>\n        <option value=\"\">Choose one...</option>\n        <option value=\"option1\">Option One</option>\n        <option value=\"option2\">Option Two</option>\n        <option value=\"option3\">Option Three</option>\n      </select>\n    </div>\n  </div>\n</div>\n",
                    "description": "Basic select with label and options"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-select-color-background",
                    "description": "Background color for select",
                    "category": "color"
                },
                {
                    "name": "--slds-c-select-color-border",
                    "description": "Border color for select",
                    "category": "color"
                },
                {
                    "name": "--slds-c-select-color-border-focus",
                    "description": "Border color for focused select",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "select.css",
                    "form-element.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Combobox",
                    "relationship": "alternative",
                    "description": "Enhanced select with search and filtering"
                },
                {
                    "name": "Picklist",
                    "relationship": "similar",
                    "description": "Alternative selection control"
                },
                {
                    "name": "Radio Group",
                    "relationship": "alternative",
                    "description": "Alternative for fewer, mutually exclusive options"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/select/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2024-12-19",
                "review_status": "complete"
            }
        },
        {
            "name": "Setup Assistant",
            "description": "A guided setup component that helps users complete onboarding or configuration tasks. Displays a list of steps with progress indicators and expandable details for each step.",
            "category": "Complex Components",
            "slds_classes": {
                "root": "slds-setup-assistant",
                "elements": [
                    {
                        "class": "slds-setup-assistant__item",
                        "description": "Individual setup item in the list",
                        "purpose": "Wraps each setup step"
                    },
                    {
                        "class": "slds-setup-assistant__step-summary",
                        "description": "Summary portion of setup step",
                        "purpose": "Displays step title and status"
                    },
                    {
                        "class": "slds-setup-assistant__step-summary-content",
                        "description": "Content area of step summary",
                        "purpose": "Contains step text and description"
                    }
                ],
                "modifiers": [],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard setup assistant with steps",
                    "classes": [
                        "slds-setup-assistant"
                    ],
                    "usage_context": "Default guided setup implementation",
                    "differences": "List of setup steps with expand/collapse"
                }
            ],
            "lightning_component": {
                "name": "",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically built with custom components and lightning-accordion"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate between steps",
                    "Enter or Space to expand/collapse steps",
                    "Arrow keys to move through steps"
                ],
                "screen_reader": [
                    "List structure announced",
                    "Step count announced",
                    "Completion status announced",
                    "Expanded/collapsed state announced"
                ],
                "aria_attributes": [
                    "role='list' on assistant container",
                    "role='listitem' on steps",
                    "aria-expanded on expandable steps",
                    "aria-label describing setup purpose",
                    "Progress indicators accessible"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For onboarding new users",
                    "For setup and configuration wizards",
                    "When guiding through multi-step processes",
                    "For progressive disclosure of setup tasks"
                ],
                "when_not_to_use": [
                    "For simple single-step processes",
                    "When steps don't have logical sequence",
                    "For navigation (use tabs or menu)",
                    "When all information should be visible at once"
                ],
                "best_practices": [
                    "Show progress clearly (steps completed/total)",
                    "Allow non-linear completion when possible",
                    "Mark completed steps visually",
                    "Provide clear next action for each step",
                    "Keep step descriptions concise",
                    "Allow users to skip optional steps"
                ],
                "common_mistakes": [
                    "Forcing linear progression when unnecessary",
                    "Unclear completion status",
                    "Too many steps overwhelming users",
                    "Missing progress indication",
                    "No way to skip optional steps"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Setup Assistant",
                    "code": "<div class=\"slds-setup-assistant\" role=\"list\" aria-label=\"Setup steps\">\n      <ul class=\"\">\n        <li class=\"slds-setup-assistant__item\" role=\"listitem\">\n          <article class=\"\">\n            <div class=\"slds-setup-assistant__step-summary\" role=\"button\" aria-expanded=\"false\" aria-controls=\"step-1-details\">\n              <div class=\"slds-media\">\n                <div class=\"slds-media__figure\">\n                  <span class=\"slds-icon_container slds-icon-utility-success\" title=\"Complete\">\n                    <svg class=\"slds-icon slds-icon_small slds-icon-text-success\" aria-hidden=\"true\">\n                      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#success\"></use>\n                    </svg>\n                    <span class=\"slds-assistive-text\">Complete</span>\n                  </span>\n                </div>\n                <div class=\"slds-media__body\">\n                  <div class=\"slds-setup-assistant__step-summary-content\">\n                    <h3 class=\"slds-setup-assistant__step-summary-title slds-text-heading_small\">\n                      Verify Your Email\n                    </h3>\n                    <p>Check your inbox and click the verification link.</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-setup-assistant__step-detail slds-hide\" id=\"step-1-details\">\n              <div class=\"slds-text-longform\">\n                <p>You've successfully verified your email address!</p>\n              </div>\n            </div>\n          </article>\n        </li>\n        <li class=\"slds-setup-assistant__item\" role=\"listitem\">\n          <article class=\"\">\n            <div class=\"slds-setup-assistant__step-summary\" role=\"button\" aria-expanded=\"true\" aria-controls=\"step-2-details\">\n              <div class=\"slds-media\">\n                <div class=\"slds-media__figure\">\n                  <span class=\"slds-icon_container slds-icon-utility-info\" title=\"In Progress\">\n                    <svg class=\"slds-icon slds-icon_small slds-icon-text-default\" aria-hidden=\"true\">\n                      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#info\"></use>\n                    </svg>\n                    <span class=\"slds-assistive-text\">In Progress</span>\n                  </span>\n                </div>\n                <div class=\"slds-media__body\">\n                  <div class=\"slds-setup-assistant__step-summary-content\">\n                    <h3 class=\"slds-setup-assistant__step-summary-title slds-text-heading_small\">\n                      Complete Your Profile\n                    </h3>\n                    <p>Add your name, photo, and contact information.</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-setup-assistant__step-detail\" id=\"step-2-details\">\n              <div class=\"slds-text-longform\">\n                <p>Complete your profile to personalize your experience.</p>\n                <button class=\"slds-button slds-button_brand slds-m-top_medium\">\n                  Edit Profile\n                </button>\n              </div>\n            </div>\n          </article>\n        </li>\n        <li class=\"slds-setup-assistant__item\" role=\"listitem\">\n          <article class=\"\">\n            <div class=\"slds-setup-assistant__step-summary\" role=\"button\" aria-expanded=\"false\" aria-controls=\"step-3-details\">\n              <div class=\"slds-media\">\n                <div class=\"slds-media__figure\">\n                  <span class=\"slds-icon_container\" title=\"Not Started\">\n                    <svg class=\"slds-icon slds-icon_small slds-icon-text-default\" aria-hidden=\"true\">\n                      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"></use>\n                    </svg>\n                    <span class=\"slds-assistive-text\">Not Started</span>\n                  </span>\n                </div>\n                <div class=\"slds-media__body\">\n                  <div class=\"slds-setup-assistant__step-summary-content\">\n                    <h3 class=\"slds-setup-assistant__step-summary-title slds-text-heading_small\">\n                      Connect Your Accounts\n                    </h3>\n                    <p>Link your social media and other accounts.</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-setup-assistant__step-detail slds-hide\" id=\"step-3-details\">\n              <div class=\"slds-text-longform\">\n                <p>Connect your accounts to import contacts and share content.</p>\n                <button class=\"slds-button slds-button_neutral slds-m-top_medium\">\n                  Connect Accounts\n                </button>\n              </div>\n            </div>\n          </article>\n        </li>\n      </ul>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "setup-assistant.css",
                    "media-object.css",
                    "icon.css"
                ],
                "javascript": [
                    "Step expand/collapse",
                    "Progress tracking",
                    "Step completion management"
                ],
                "icons": [
                    "utility:success",
                    "utility:info",
                    "utility:check"
                ],
                "other_components": [
                    "media-object",
                    "icon",
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Accordion",
                    "relationship": "similar",
                    "description": "Similar expand/collapse pattern"
                },
                {
                    "name": "Progress Indicator",
                    "relationship": "complementary",
                    "description": "Alternative progress display"
                },
                {
                    "name": "Path",
                    "relationship": "similar",
                    "description": "Alternative guided process pattern"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/setup-assistant/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Slider",
            "description": "An input control that allows users to select a numeric value from a range by dragging a handle along a track, providing visual feedback for value selection.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-slider",
                "elements": [
                    {
                        "class": "slds-slider__range",
                        "description": "The slider track element",
                        "purpose": "Visual track that shows the selectable range"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-slider_vertical",
                        "description": "Vertical slider orientation",
                        "usage": "When vertical layout is preferred or required"
                    }
                ],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling",
                        "trigger": "When slider validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When slider is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard horizontal slider",
                    "classes": [
                        "slds-slider"
                    ],
                    "usage_context": "Default slider implementation for numeric range selection",
                    "differences": "Horizontal slider with draggable handle on track"
                }
            ],
            "lightning_component": {
                "name": "lightning-slider",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-slider",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS slider blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the slider",
                    "Arrow keys to adjust value in increments",
                    "Page Up/Page Down for larger increments",
                    "Home/End to go to minimum/maximum values"
                ],
                "screen_reader": [
                    "Current value announced when changed",
                    "Range minimum and maximum communicated",
                    "Step increment information provided",
                    "Label and purpose announced"
                ],
                "aria_attributes": [
                    "role='slider' for the input element",
                    "aria-valuenow for current value",
                    "aria-valuemin for minimum value",
                    "aria-valuemax for maximum value",
                    "aria-label describing the slider purpose",
                    "aria-describedby for additional instructions"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For selecting numeric values from a continuous range",
                    "When visual feedback of value position is helpful",
                    "For settings or configuration values",
                    "When precise value selection with constraints is needed"
                ],
                "when_not_to_use": [
                    "For discrete value selection (use select or radio instead)",
                    "When exact precision is critical (use numeric input)",
                    "For very large ranges where slider becomes impractical"
                ],
                "best_practices": [
                    "Provide clear labels for minimum and maximum values",
                    "Use appropriate step increments for the use case",
                    "Show current value clearly",
                    "Ensure adequate touch target size for mobile",
                    "Provide keyboard accessibility"
                ],
                "common_mistakes": [
                    "Making slider too small for precise interaction",
                    "Using inappropriate step sizes",
                    "Not showing current value",
                    "Poor keyboard navigation implementation"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Slider",
                    "code": "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\" for=\"slider-id-01\">Slider Label</label>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-slider\">\n          <input type=\"range\" id=\"slider-id-01\" class=\"slds-slider__range\" value=\"50\" min=\"0\" max=\"100\" step=\"1\" />\n          <span class=\"slds-slider__value\" aria-hidden=\"true\">50</span>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-slider-track-color-background",
                    "description": "Background color for slider track",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "slider.css",
                    "form-element.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Input",
                    "relationship": "alternative",
                    "description": "Alternative for precise numeric input"
                },
                {
                    "name": "Progress Bar",
                    "relationship": "similar",
                    "description": "Similar visual concept for showing values"
                },
                {
                    "name": "Range Input",
                    "relationship": "variant",
                    "description": "Dual-handle slider for range selection"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/slider/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Spinners",
            "description": "Loading indicators that show progress for operations that take time to complete, providing visual feedback that the system is working.",
            "category": "Feedback",
            "slds_classes": {
                "root": "slds-spinner",
                "elements": [
                    {
                        "class": "slds-spinner__dot-a",
                        "description": "First spinner dot element",
                        "purpose": "Part of the animated spinner visual"
                    },
                    {
                        "class": "slds-spinner__dot-b",
                        "description": "Second spinner dot element",
                        "purpose": "Part of the animated spinner visual"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-spinner_xx-small",
                        "description": "Extra extra small spinner size",
                        "usage": "Very compact spinner for small components"
                    },
                    {
                        "class": "slds-spinner_x-small",
                        "description": "Extra small spinner size",
                        "usage": "Small spinner for compact interfaces"
                    },
                    {
                        "class": "slds-spinner_small",
                        "description": "Small spinner size",
                        "usage": "Standard small spinner"
                    },
                    {
                        "class": "slds-spinner_medium",
                        "description": "Medium spinner size (default)",
                        "usage": "Default spinner size for most use cases"
                    },
                    {
                        "class": "slds-spinner_large",
                        "description": "Large spinner size",
                        "usage": "Prominent spinner for main loading states"
                    },
                    {
                        "class": "slds-spinner_delayed",
                        "description": "Delayed spinner appearance",
                        "usage": "Spinner that appears after a delay to avoid flashing"
                    },
                    {
                        "class": "slds-spinner_inline",
                        "description": "Inline spinner variant",
                        "usage": "Spinner that flows with text content"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard loading spinner",
                    "classes": [
                        "slds-spinner"
                    ],
                    "usage_context": "Default loading indicator for operations",
                    "differences": "Animated circular spinner with rotating dots"
                },
                {
                    "name": "Inline",
                    "description": "Spinner that flows with text content",
                    "classes": [
                        "slds-spinner",
                        "slds-spinner_inline"
                    ],
                    "usage_context": "Loading indicator within text or inline elements",
                    "differences": "Smaller spinner designed to work with text flow"
                }
            ],
            "lightning_component": {
                "name": "lightning-spinner",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS spinner blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "No keyboard interaction required (display-only)"
                ],
                "screen_reader": [
                    "Loading state announced through aria-live regions",
                    "Alternative text provided for spinner meaning",
                    "Loading completion communicated when appropriate"
                ],
                "aria_attributes": [
                    "aria-hidden='false' to ensure spinner is announced",
                    "aria-live='polite' or 'assertive' for loading announcements",
                    "aria-label describing the loading operation",
                    "role='status' for loading state communication"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "During data loading operations",
                    "For form submissions or saves",
                    "When content is being generated or processed",
                    "During asynchronous operations that take noticeable time"
                ],
                "when_not_to_use": [
                    "For operations that complete instantly",
                    "When a progress bar would be more appropriate",
                    "For decoration (spinners should indicate actual loading)"
                ],
                "best_practices": [
                    "Use appropriate size for the context",
                    "Provide alternative text describing what's loading",
                    "Consider delayed appearance for very fast operations",
                    "Remove spinner when loading completes",
                    "Position spinner appropriately for the loading context"
                ],
                "common_mistakes": [
                    "Using spinners for operations that complete instantly",
                    "Not providing accessible text for the loading state",
                    "Poor positioning that interferes with content",
                    "Not removing spinner when loading completes"
                ]
            },
            "code_examples": [
                {
                    "title": "Medium Spinner",
                    "code": "<div role=\"status\" class=\"slds-spinner slds-spinner_medium\">\n      <span class=\"slds-assistive-text\">Loading...</span>\n      <div class=\"slds-spinner__dot-a\"></div>\n      <div class=\"slds-spinner__dot-b\"></div>\n      </div>\n"
                },
                {
                    "title": "Small Inline Spinner",
                    "code": "<div class=\"slds-text-body_regular\">\n      Loading data <div role=\"status\" class=\"slds-spinner slds-spinner_xx-small slds-spinner_inline\">\n        <span class=\"slds-assistive-text\">Loading</span>\n        <div class=\"slds-spinner__dot-a\"></div>\n        <div class=\"slds-spinner__dot-b\"></div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Large Loading Spinner",
                    "code": "<div role=\"status\" class=\"slds-spinner slds-spinner_large\">\n      <span class=\"slds-assistive-text\">Loading page content...</span>\n      <div class=\"slds-spinner__dot-a\"></div>\n      <div class=\"slds-spinner__dot-b\"></div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "spinner.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "assistive-text"
                ]
            },
            "related_components": [
                {
                    "name": "Progress Bar",
                    "relationship": "alternative",
                    "description": "Alternative loading indicator showing progress percentage"
                },
                {
                    "name": "Progress Ring",
                    "relationship": "alternative",
                    "description": "Alternative circular progress indicator"
                },
                {
                    "name": "Illustration",
                    "relationship": "similar",
                    "description": "Can be combined with illustrations for empty states"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/spinners/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Split View",
            "description": "A layout component that divides the interface into two or more resizable panes, allowing users to view and interact with multiple content areas simultaneously.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-split-view",
                "elements": [
                    {
                        "class": "slds-split-view_container",
                        "description": "Overall container for split view layout",
                        "purpose": "Provides structural container for split panes"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Open pane state",
                        "trigger": "Applied when a pane is expanded/visible"
                    },
                    {
                        "class": "slds-is-closed",
                        "description": "Closed pane state",
                        "trigger": "Applied when a pane is collapsed/hidden"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard split view with two panes",
                    "classes": [
                        "slds-split-view"
                    ],
                    "usage_context": "Default implementation for dual-pane layouts",
                    "differences": "Horizontal split with resizable divider"
                },
                {
                    "name": "Vertical",
                    "description": "Vertical split view layout",
                    "classes": [
                        "slds-split-view"
                    ],
                    "usage_context": "When vertical splitting is preferred",
                    "differences": "Vertical split with top/bottom panes"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented using lightning-layout or custom components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation between panes",
                    "Arrow keys for resizing when splitter is focused",
                    "Enter/Space to toggle pane visibility",
                    "Escape to reset to default sizes"
                ],
                "screen_reader": [
                    "Split view structure announced",
                    "Pane labels and content described",
                    "Resize functionality communicated"
                ],
                "aria_attributes": [
                    "role='main' for primary content pane",
                    "role='complementary' for secondary pane",
                    "aria-label describing each pane's purpose",
                    "aria-expanded for collapsible panes",
                    "aria-controls for splitter interactions"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For master-detail interfaces",
                    "When users need to view multiple content areas simultaneously",
                    "For comparing or relating content between panes",
                    "In data-heavy applications requiring context switching"
                ],
                "when_not_to_use": [
                    "On small screens where space is limited",
                    "When content areas are unrelated",
                    "For simple single-focus interfaces"
                ],
                "best_practices": [
                    "Provide clear visual separation between panes",
                    "Make splitters obvious and interactive",
                    "Handle responsive behavior gracefully",
                    "Preserve pane sizes across sessions when appropriate",
                    "Provide keyboard navigation for accessibility"
                ],
                "common_mistakes": [
                    "Making splitters too thin or hard to interact with",
                    "Not handling mobile/responsive layouts properly",
                    "Failing to provide keyboard navigation",
                    "Not preserving user's preferred pane sizes"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Split View",
                    "description": "Split view with collapsible left pane",
                    "code": "<div class=\"slds-split-view\">\n      <div class=\"slds-split-view_container\">\n        <div class=\"slds-is-closed\" role=\"complementary\">\n          <button class=\"slds-button slds-button_icon\" aria-expanded=\"false\" aria-controls=\"split-view-list\">\n            <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#chevronright\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Expand list view</span>\n          </button>\n        </div>\n        <div class=\"\" role=\"main\">\n          <div class=\"slds-panel slds-panel_docked\">\n            <div class=\"slds-panel__body\">\n              <p>Full width detail content</p>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "split-view.css",
                    "panel.css",
                    "grid.css"
                ],
                "javascript": [
                    "split-view.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "panel",
                    "grid",
                    "button"
                ]
            },
            "related_components": [
                {
                    "name": "Layout",
                    "relationship": "similar",
                    "description": "Similar layout structuring concept"
                },
                {
                    "name": "Panel",
                    "relationship": "depends-on",
                    "description": "Uses panels for pane content containers"
                },
                {
                    "name": "Grid",
                    "relationship": "alternative",
                    "description": "Alternative layout approach for structured content"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/split-view/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Summary Detail",
            "description": "A layout pattern that displays a condensed summary view with an expandable detail section, allowing users to quickly scan information and dive deeper when needed.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-summary-detail",
                "elements": [
                    {
                        "class": "slds-summary-detail__content",
                        "description": "Container for the summary content",
                        "purpose": "Holds the condensed summary information"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Open detail state",
                        "trigger": "Applied when detail section is expanded"
                    },
                    {
                        "class": "slds-is-closed",
                        "description": "Closed detail state",
                        "trigger": "Applied when detail section is collapsed"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard summary detail with expandable content",
                    "classes": [
                        "slds-summary-detail"
                    ],
                    "usage_context": "Default implementation for summary/detail patterns",
                    "differences": "Collapsible detail section with summary always visible"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - can be implemented using lightning-accordion or custom components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus expand/collapse button",
                    "Enter/Space to toggle detail visibility",
                    "Tab navigation through detail content when expanded"
                ],
                "screen_reader": [
                    "Summary content always announced",
                    "Expand/collapse state clearly communicated",
                    "Detail content announced when expanded"
                ],
                "aria_attributes": [
                    "aria-expanded on toggle button",
                    "aria-controls linking button to detail content",
                    "aria-labelledby for detail section",
                    "role='button' for interactive elements"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For progressive disclosure of information",
                    "When space is limited but detail is important",
                    "To reduce cognitive load with scannable summaries",
                    "For optional detailed information"
                ],
                "when_not_to_use": [
                    "When all information is equally important",
                    "For critical information that shouldn't be hidden",
                    "In contexts where expansion isn't expected"
                ],
                "best_practices": [
                    "Make summaries meaningful and self-contained",
                    "Provide clear expand/collapse indicators",
                    "Ensure smooth transitions between states",
                    "Keep summary content concise but informative",
                    "Use consistent expand/collapse patterns"
                ],
                "common_mistakes": [
                    "Making summaries too vague or incomplete",
                    "Hiding critical information in details",
                    "Poor visual indicators for expand/collapse state",
                    "Inconsistent interaction patterns"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Summary Detail",
                    "description": "Summary detail in collapsed state",
                    "code": "<div class=\"slds-summary-detail slds-is-closed\">\n      <div class=\"\">\n        <h3>Contact Information</h3>\n      </div>\n      <div class=\"slds-summary-detail__content\">\n        <p>John Smith - Primary Contact</p>\n        <button class=\"slds-button slds-button_neutral\" aria-expanded=\"false\" aria-controls=\"summary-detail-02\">\n          <svg class=\"slds-button__icon slds-button__icon_left\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#chevronright\"></use>\n          </svg>\n          Show Details\n        </button>\n      </div>\n      <div id=\"summary-detail-02\" class=\"slds-hide\">\n        <p>Detailed contact information would appear here when expanded.</p>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "summary-detail.css",
                    "grid.css",
                    "button.css"
                ],
                "javascript": [
                    "summary-detail.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "grid"
                ]
            },
            "related_components": [
                {
                    "name": "Accordion",
                    "relationship": "similar",
                    "description": "Similar expandable content pattern"
                },
                {
                    "name": "Expandable Section",
                    "relationship": "similar",
                    "description": "Similar progressive disclosure concept"
                },
                {
                    "name": "Cards",
                    "relationship": "container",
                    "description": "Often used within card containers"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/summary-detail/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Tabs",
            "description": "A navigation component that organizes content into multiple panels, allowing users to switch between different views while maintaining context.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-tabs_default",
                "elements": [
                    {
                        "class": "slds-tabs_default__nav",
                        "description": "Navigation container for tab headers",
                        "purpose": "Contains the clickable tab headers"
                    },
                    {
                        "class": "slds-tabs_default__item",
                        "description": "Individual tab header item",
                        "purpose": "Wrapper for each tab button"
                    },
                    {
                        "class": "slds-tabs_default__link",
                        "description": "Tab header link/button",
                        "purpose": "Clickable element to activate tab"
                    },
                    {
                        "class": "slds-tabs_default__content",
                        "description": "Content panel for active tab",
                        "purpose": "Contains the content for the selected tab"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-tabs_scoped",
                        "description": "Scoped tabs variant",
                        "usage": "For contained, card-like tab interface"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active tab state",
                        "trigger": "Currently selected and visible tab"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focus state for tab",
                        "trigger": "When tab has keyboard focus"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Default",
                    "description": "Standard horizontal tabs",
                    "classes": [
                        "slds-tabs_default"
                    ],
                    "usage_context": "Default tab implementation for content organization",
                    "differences": "Horizontal tab headers with underline styling"
                },
                {
                    "name": "Scoped",
                    "description": "Tabs with contained, card-like appearance",
                    "classes": [
                        "slds-tabs_scoped"
                    ],
                    "usage_context": "When tabs need visual containment",
                    "differences": "Card-style background with contained appearance"
                }
            ],
            "lightning_component": {
                "name": "lightning-tabset",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS tabs blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the tab list",
                    "Arrow keys to navigate between tab headers",
                    "Enter/Space to activate selected tab",
                    "Tab to move focus into active tab content"
                ],
                "screen_reader": [
                    "Tab list structure announced",
                    "Current tab and total count communicated",
                    "Tab panel content associated with headers"
                ],
                "aria_attributes": [
                    "role='tablist' for tab navigation container",
                    "role='tab' for individual tab headers",
                    "role='tabpanel' for content areas",
                    "aria-selected for active tab",
                    "aria-controls linking tabs to panels",
                    "aria-labelledby linking panels to tabs"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "To organize related content into logical groups",
                    "When users need to switch between different views",
                    "For content that doesn't need to be viewed simultaneously",
                    "To reduce visual complexity and conserve space"
                ],
                "when_not_to_use": [
                    "When users need to see multiple sections at once",
                    "For sequential processes (use progress indicator instead)",
                    "When you have only one or two content sections",
                    "For navigation between unrelated pages"
                ],
                "best_practices": [
                    "Use clear, descriptive tab labels",
                    "Limit number of tabs to avoid overcrowding",
                    "Order tabs logically by importance or workflow",
                    "Ensure tab content is substantial enough to warrant separation",
                    "Provide visual indication of active tab"
                ],
                "common_mistakes": [
                    "Too many tabs causing overcrowding",
                    "Unclear or ambiguous tab labels",
                    "Using tabs for navigation between unrelated content",
                    "Poor mobile responsiveness"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Tabset",
                    "code": "<div class=\"slds-tabs_default\">\n      <ul class=\"slds-tabs_default__nav\" role=\"tablist\">\n        <li class=\"slds-tabs_default__item slds-is-active\" title=\"Item One\" role=\"presentation\">\n          <a class=\"slds-tabs_default__link\" href=\"#tab-default-1\" role=\"tab\" tabindex=\"0\" aria-selected=\"true\" aria-controls=\"tab-default-1\" id=\"tab-default-1__item\">Item One</a>\n        </li>\n        <li class=\"slds-tabs_default__item\" title=\"Item Two\" role=\"presentation\">\n          <a class=\"slds-tabs_default__link\" href=\"#tab-default-2\" role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" aria-controls=\"tab-default-2\" id=\"tab-default-2__item\">Item Two</a>\n        </li>\n        <li class=\"slds-tabs_default__item\" title=\"Item Three\" role=\"presentation\">\n          <a class=\"slds-tabs_default__link\" href=\"#tab-default-3\" role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" aria-controls=\"tab-default-3\" id=\"tab-default-3__item\">Item Three</a>\n        </li>\n      </ul>\n      <div id=\"tab-default-1\" class=\"slds-tabs_default__content slds-show\" role=\"tabpanel\" aria-labelledby=\"tab-default-1__item\">\n        <h2>Item One Content</h2>\n        <p>Content for the first tab goes here...</p>\n      </div>\n      <div id=\"tab-default-2\" class=\"slds-tabs_default__content slds-hide\" role=\"tabpanel\" aria-labelledby=\"tab-default-2__item\">\n        <h2>Item Two Content</h2>\n        <p>Content for the second tab goes here...</p>\n      </div>\n      <div id=\"tab-default-3\" class=\"slds-tabs_default__content slds-hide\" role=\"tabpanel\" aria-labelledby=\"tab-default-3__item\">\n        <h2>Item Three Content</h2>\n        <p>Content for the third tab goes here...</p>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "tabs.css"
                ],
                "javascript": [
                    "tabs.js"
                ],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Vertical Navigation",
                    "relationship": "alternative",
                    "description": "Alternative navigation for hierarchical content"
                },
                {
                    "name": "Accordion",
                    "relationship": "alternative",
                    "description": "Alternative for collapsible content sections"
                },
                {
                    "name": "Path",
                    "relationship": "similar",
                    "description": "Similar multi-step navigation pattern"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/tabs/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Textarea",
            "description": "A multi-line text input control that allows users to enter longer text content with automatic line wrapping and resize capabilities.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-textarea",
                "elements": [],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-has-error",
                        "description": "Error state styling",
                        "trigger": "When textarea validation fails"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state styling",
                        "trigger": "When textarea is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard multi-line textarea",
                    "classes": [
                        "slds-textarea"
                    ],
                    "usage_context": "Default textarea implementation for multi-line text input",
                    "differences": "Multi-line text input with resizable height"
                }
            ],
            "lightning_component": {
                "name": "lightning-textarea",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-textarea",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS textarea blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the textarea",
                    "Standard text editing keyboard shortcuts",
                    "Enter for new lines within the textarea",
                    "Scroll navigation for long content"
                ],
                "screen_reader": [
                    "Label text announced with the textarea",
                    "Character and line limits communicated",
                    "Error messages associated and announced",
                    "Current content length when relevant"
                ],
                "aria_attributes": [
                    "aria-describedby for help text and error messages",
                    "aria-invalid when validation fails",
                    "aria-required for required textareas",
                    "aria-label when no visible label present"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For multi-line text input (comments, descriptions, notes)",
                    "When users need to enter paragraphs of text",
                    "For content where line breaks are important",
                    "When single-line input is insufficient"
                ],
                "when_not_to_use": [
                    "For single-line text (use input instead)",
                    "For rich text editing (use rich text editor)",
                    "For selecting from options (use select or combobox)"
                ],
                "best_practices": [
                    "Set appropriate initial size for expected content",
                    "Allow resizing when users might need more space",
                    "Provide character limits when appropriate",
                    "Use placeholder text to guide input",
                    "Show character count for length-limited content"
                ],
                "common_mistakes": [
                    "Making textarea too small for expected content",
                    "Not allowing resize when users need more space",
                    "Poor validation feedback for character limits",
                    "Missing or unclear labels"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Textarea",
                    "code": "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\" for=\"textarea-id-01\">\n        <abbr class=\"slds-required\" title=\"required\">* </abbr>Textarea Label\n      </label>\n      <div class=\"slds-form-element__control\">\n        <textarea id=\"textarea-id-01\" class=\"slds-textarea\" placeholder=\"Enter your comments...\" required></textarea>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Textarea with Error",
                    "code": "<div class=\"slds-form-element slds-has-error\">\n      <label class=\"slds-form-element__label\" for=\"textarea-error\">\n        <abbr class=\"slds-required\" title=\"required\">* </abbr>Textarea Label\n      </label>\n      <div class=\"slds-form-element__control\">\n        <textarea id=\"textarea-error\" class=\"slds-textarea\" aria-describedby=\"textarea-error-message\" required></textarea>\n      </div>\n      <div id=\"textarea-error-message\" class=\"slds-form-element__help\">This field is required</div>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-textarea-color-background",
                    "description": "Background color for textarea",
                    "category": "color"
                },
                {
                    "name": "--slds-c-textarea-color-border",
                    "description": "Border color for textarea",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "textarea.css",
                    "form-element.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": [
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Input",
                    "relationship": "alternative",
                    "description": "For single-line text input"
                },
                {
                    "name": "Rich Text Editor",
                    "relationship": "alternative",
                    "description": "Enhanced textarea with formatting capabilities"
                },
                {
                    "name": "Form Element",
                    "relationship": "container",
                    "description": "Form wrapper providing structure and validation"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/textarea/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Tiles",
            "description": "Visual components that display content in a card-like format with media elements, ideal for presenting items in grid layouts or lists.",
            "category": "Layout",
            "slds_classes": {
                "root": "slds-tile",
                "elements": [
                    {
                        "class": "slds-tile__detail",
                        "description": "Main content area of the tile",
                        "purpose": "Contains title, description, and metadata"
                    },
                    {
                        "class": "slds-tile__meta",
                        "description": "Metadata container",
                        "purpose": "Additional information about the tile content"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-tile_board",
                        "description": "Board-style tile for kanban layouts",
                        "usage": "Tiles used in board or kanban interfaces"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected tile state",
                        "trigger": "When tile is currently selected"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focus state for interactive tiles",
                        "trigger": "When tile has keyboard focus"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard tile with media and content",
                    "classes": [
                        "slds-tile"
                    ],
                    "usage_context": "Default tile implementation for content display",
                    "differences": "Media object pattern with visual element and content"
                }
            ],
            "lightning_component": {
                "name": "lightning-tile",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-tile",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS tile blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus interactive tiles",
                    "Enter/Space to activate tile actions",
                    "Arrow keys for grid navigation when appropriate"
                ],
                "screen_reader": [
                    "Tile content and purpose announced",
                    "Media elements described appropriately",
                    "Selection states communicated",
                    "Associated actions clearly identified"
                ],
                "aria_attributes": [
                    "aria-labelledby for tile titles",
                    "aria-describedby for tile metadata",
                    "role='button' or 'link' for interactive tiles",
                    "aria-selected for selectable tiles"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For displaying collections of related content",
                    "In grid layouts showing multiple items",
                    "For content previews or summaries",
                    "When visual hierarchy with media is beneficial"
                ],
                "when_not_to_use": [
                    "For simple text lists (use list components)",
                    "When media elements are not relevant",
                    "For complex interactive content (use cards instead)"
                ],
                "best_practices": [
                    "Use consistent tile sizing within collections",
                    "Provide meaningful titles and descriptions",
                    "Choose appropriate media elements",
                    "Maintain good visual hierarchy",
                    "Support keyboard navigation for interactive tiles"
                ],
                "common_mistakes": [
                    "Inconsistent tile sizes in the same collection",
                    "Poor media element choices",
                    "Unclear or missing tile labels",
                    "Overloading tiles with too much information"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Tile",
                    "code": "<div class=\"slds-tile\">\n      <div class=\"\">\n        <span class=\"slds-icon_container slds-icon-standard-account\">\n          <svg class=\"slds-icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#account\"></use>\n          </svg>\n        </span>\n      </div>\n      <div class=\"slds-tile__detail\">\n        <div class=\"\">\n          <a href=\"#\" title=\"Acme Corporation\">Acme Corporation</a>\n        </div>\n        <div class=\"slds-tile__meta\">\n          <span class=\"slds-text-body_small\">Customer • San Francisco</span>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "tile.css",
                    "media-objects.css"
                ],
                "javascript": [],
                "icons": [
                    "standard-sprite.svg",
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "media-objects",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Cards",
                    "relationship": "similar",
                    "description": "Similar container concept with more structure"
                },
                {
                    "name": "Media Objects",
                    "relationship": "depends-on",
                    "description": "Based on media object layout pattern"
                },
                {
                    "name": "Avatar",
                    "relationship": "depends-on",
                    "description": "Often used as media element in tiles"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/tiles/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Timepicker",
            "description": "Input controls that allow users to select time values through a dropdown interface with hours, minutes, and optional AM/PM selection.",
            "category": "Input",
            "slds_classes": {
                "root": "",
                "elements": [],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected time state",
                        "trigger": "Currently selected time option"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard time selection dropdown",
                    "classes": [],
                    "usage_context": "Default timepicker for time value selection",
                    "differences": "Dropdown list with predefined time options"
                }
            ],
            "lightning_component": {
                "name": "lightning-input (type='time')",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input",
                "mapping_notes": "Mapped through lightning-input with type='time' which provides native time picker"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus timepicker input",
                    "Arrow keys to navigate time options",
                    "Enter/Space to select time",
                    "Type to filter time options"
                ],
                "screen_reader": [
                    "Current time value announced",
                    "Time options list communicated",
                    "Selection changes announced",
                    "Time format clearly communicated"
                ],
                "aria_attributes": [
                    "role='listbox' for time options container",
                    "role='option' for individual time slots",
                    "aria-selected for chosen time",
                    "aria-label for time selection purpose",
                    "aria-expanded for dropdown state"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For time selection in forms",
                    "When specific time precision is needed",
                    "For scheduling or appointment interfaces",
                    "When time constraints or ranges apply"
                ],
                "when_not_to_use": [
                    "For approximate times (use text input)",
                    "When time precision is not important",
                    "For duration selection (use different controls)"
                ],
                "best_practices": [
                    "Use appropriate time increments (15min, 30min, etc.)",
                    "Provide clear time format indication",
                    "Support both keyboard and mouse interaction",
                    "Handle time zone considerations appropriately",
                    "Show current selection clearly"
                ],
                "common_mistakes": [
                    "Using inappropriate time increments",
                    "Poor time format handling",
                    "Not considering time zone implications",
                    "Unclear selection feedback"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Timepicker",
                    "code": "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\" for=\"timepicker-id\">\n        Time\n      </label>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-combobox_container\">\n          <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n            <div class=\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\">\n              <input type=\"text\" class=\"slds-input slds-combobox__input\" value=\"9:00 AM\" readonly />\n              <span class=\"slds-icon_container slds-icon-utility-clock slds-input__icon slds-input__icon_right\">\n                <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#clock\"></use>\n                </svg>\n              </span>\n            </div>\n            <div class=\"slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid\" role=\"listbox\">\n              <ul class=\"slds-listbox slds-listbox_vertical\">\n                <li role=\"presentation\" class=\"\">\n                  <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\" role=\"option\" aria-selected=\"true\">\n                    <span class=\"slds-media__body\">9:00 AM</span>\n                  </div>\n                </li>\n                <li role=\"presentation\" class=\"\">\n                  <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\" role=\"option\">\n                    <span class=\"slds-media__body\">9:15 AM</span>\n                  </div>\n                </li>\n                <li role=\"presentation\" class=\"\">\n                  <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\" role=\"option\">\n                    <span class=\"slds-media__body\">9:30 AM</span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "timepicker.css",
                    "combobox.css",
                    "listbox.css"
                ],
                "javascript": [
                    "timepicker.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "combobox",
                    "listbox",
                    "input",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Datepickers",
                    "relationship": "similar",
                    "description": "Complementary component for date selection"
                },
                {
                    "name": "Datetime Picker",
                    "relationship": "parent",
                    "description": "Combined date and time selection component"
                },
                {
                    "name": "Input",
                    "relationship": "alternative",
                    "description": "Alternative for manual time entry"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/timepicker/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Toast",
            "description": "Temporary notification messages that appear briefly to provide feedback about user actions or system events, then automatically dismiss.",
            "category": "Feedback",
            "slds_classes": {
                "root": "",
                "elements": [
                    {
                        "class": "slds-notify_container",
                        "description": "Container for toast notifications",
                        "purpose": "Wraps and positions toast messages"
                    },
                    {
                        "class": "slds-notify__content",
                        "description": "Content area of the toast",
                        "purpose": "Contains the toast message and actions"
                    },
                    {
                        "class": "slds-notify__close",
                        "description": "Close button for dismissible toasts",
                        "purpose": "Allows manual dismissal of the toast"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-notify_toast",
                        "description": "Toast notification styling",
                        "usage": "Standard toast appearance"
                    },
                    {
                        "class": "slds-theme_success",
                        "description": "Success toast variant",
                        "usage": "For successful actions or positive feedback"
                    },
                    {
                        "class": "slds-theme_warning",
                        "description": "Warning toast variant",
                        "usage": "For warnings or caution messages"
                    },
                    {
                        "class": "slds-theme_error",
                        "description": "Error toast variant",
                        "usage": "For error messages or failed actions"
                    },
                    {
                        "class": "slds-theme_info",
                        "description": "Info toast variant",
                        "usage": "For informational messages"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard toast notification",
                    "classes": [
                        "slds-notify_toast"
                    ],
                    "usage_context": "Default toast implementation for temporary feedback",
                    "differences": "Basic toast with message content and optional close button"
                },
                {
                    "name": "Success",
                    "description": "Success feedback toast",
                    "classes": [
                        "slds-notify_toast",
                        "slds-theme_success"
                    ],
                    "usage_context": "Positive feedback for successful actions",
                    "differences": "Green styling indicating successful completion"
                },
                {
                    "name": "Warning",
                    "description": "Warning toast notification",
                    "classes": [
                        "slds-notify_toast",
                        "slds-theme_warning"
                    ],
                    "usage_context": "Caution or warning messages",
                    "differences": "Yellow/orange styling for warnings"
                },
                {
                    "name": "Error",
                    "description": "Error toast notification",
                    "classes": [
                        "slds-notify_toast",
                        "slds-theme_error"
                    ],
                    "usage_context": "Error feedback for failed actions",
                    "differences": "Red styling indicating errors or failures"
                }
            ],
            "lightning_component": {
                "name": "lightning-toast",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-toast",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS toast blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus close button if present",
                    "Escape to dismiss toast when focused",
                    "No additional keyboard interactions required"
                ],
                "screen_reader": [
                    "Toast content announced immediately when displayed",
                    "Importance level conveyed through appropriate ARIA roles",
                    "Close action clearly identified when available"
                ],
                "aria_attributes": [
                    "role='alert' for error toasts",
                    "role='status' for informational toasts",
                    "aria-live='assertive' for urgent messages",
                    "aria-live='polite' for non-urgent updates",
                    "aria-label for close buttons"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For feedback on user actions (save, delete, etc.)",
                    "To confirm successful operations",
                    "For non-critical error messages",
                    "To provide brief status updates"
                ],
                "when_not_to_use": [
                    "For critical errors requiring immediate action",
                    "For complex information that needs user study",
                    "For permanent status information",
                    "When users need to interact with the message extensively"
                ],
                "best_practices": [
                    "Keep messages concise and actionable",
                    "Use appropriate toast type for the message context",
                    "Set reasonable auto-dismiss timing",
                    "Position toasts consistently",
                    "Avoid showing multiple toasts simultaneously"
                ],
                "common_mistakes": [
                    "Making toast messages too long or complex",
                    "Using wrong toast type for the message severity",
                    "Poor timing for auto-dismissal",
                    "Overwhelming users with too many toasts"
                ]
            },
            "code_examples": [
                {
                    "title": "Success Toast",
                    "code": "<div class=\"slds-notify_container slds-is-relative\">\n      <div class=\"slds-notify_toast slds-theme_success\" role=\"alert\">\n        <span class=\"slds-assistive-text\">Success</span>\n        <span class=\"slds-icon_container slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top\">\n          <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#success\"></use>\n          </svg>\n        </span>\n        <div class=\"slds-notify__content\">\n          <h2 class=\"slds-text-heading_small\">Account created successfully!</h2>\n        </div>\n        <div class=\"slds-notify__close\">\n          <button class=\"slds-button slds-button_icon slds-button_icon-inverse\" title=\"Close\">\n            <svg class=\"slds-button__icon slds-button__icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Close</span>\n          </button>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Error Toast",
                    "code": "<div class=\"slds-notify_container slds-is-relative\">\n      <div class=\"slds-notify_toast slds-theme_error\" role=\"alert\">\n        <span class=\"slds-assistive-text\">Error</span>\n        <span class=\"slds-icon_container slds-icon-utility-error slds-m-right_small slds-no-flex slds-align-top\">\n          <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n          </svg>\n        </span>\n        <div class=\"slds-notify__content\">\n          <h2 class=\"slds-text-heading_small\">Unable to save changes. Please try again.</h2>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-toast-color-background",
                    "description": "Background color for default toasts",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "toast.css",
                    "notify.css",
                    "themes.css"
                ],
                "javascript": [
                    "toast.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button-icon",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Alert",
                    "relationship": "alternative",
                    "description": "Alternative for persistent system-wide messages"
                },
                {
                    "name": "Notifications",
                    "relationship": "similar",
                    "description": "Similar feedback mechanism with different positioning"
                },
                {
                    "name": "Prompt",
                    "relationship": "alternative",
                    "description": "Modal dialogs for critical messages requiring action"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/toast/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Tooltips",
            "description": "Small overlay elements that provide brief, contextual information about UI elements when users hover or focus on them.",
            "category": "Overlay",
            "slds_classes": {
                "root": "slds-tooltip",
                "elements": [
                    {
                        "class": "slds-tooltip__body",
                        "description": "Content area of the tooltip",
                        "purpose": "Contains the tooltip text or information"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-nubbin_top",
                        "description": "Top-pointing nubbin",
                        "usage": "When tooltip appears below the trigger"
                    },
                    {
                        "class": "slds-nubbin_bottom",
                        "description": "Bottom-pointing nubbin",
                        "usage": "When tooltip appears above the trigger"
                    },
                    {
                        "class": "slds-nubbin_left",
                        "description": "Left-pointing nubbin",
                        "usage": "When tooltip appears to the right of trigger"
                    },
                    {
                        "class": "slds-nubbin_right",
                        "description": "Right-pointing nubbin",
                        "usage": "When tooltip appears to the left of trigger"
                    }
                ],
                "states": []
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard tooltip with informational content",
                    "classes": [
                        "slds-tooltip"
                    ],
                    "usage_context": "Default tooltip for contextual help or information",
                    "differences": "Small overlay with brief informational text"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component - typically implemented through title attributes or custom components"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tooltip appears on focus of trigger element",
                    "Tooltip disappears when focus leaves trigger",
                    "No additional keyboard interactions required"
                ],
                "screen_reader": [
                    "Tooltip content announced when trigger receives focus",
                    "Alternative text provided through aria-describedby",
                    "Brief, informational content appropriately announced"
                ],
                "aria_attributes": [
                    "aria-describedby linking trigger to tooltip",
                    "role='tooltip' for tooltip semantic",
                    "id attribute for tooltip reference"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For brief explanations of UI elements",
                    "To provide additional context without cluttering interface",
                    "For icon-only buttons or controls",
                    "When space constraints limit inline help text"
                ],
                "when_not_to_use": [
                    "For critical information users must see",
                    "For complex content or instructions",
                    "On mobile devices where hover is unavailable",
                    "For actionable content (use popovers instead)"
                ],
                "best_practices": [
                    "Keep tooltip text brief and informative",
                    "Position tooltips to avoid blocking important content",
                    "Use consistent timing for tooltip appearance",
                    "Ensure tooltips are discoverable via keyboard",
                    "Avoid tooltips on tooltips"
                ],
                "common_mistakes": [
                    "Making tooltip text too long or complex",
                    "Using tooltips for critical information",
                    "Poor positioning that blocks content",
                    "Not providing keyboard access to tooltip content"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Tooltip",
                    "code": "<div class=\"slds-tooltip slds-nubbin_bottom\" role=\"tooltip\" id=\"help-tooltip\">\n      <div class=\"slds-tooltip__body\">This is helpful information about the element.</div>\n      </div>\n"
                }
            ],
            "styling_hooks": [
                {
                    "name": "--slds-c-tooltip-color-background",
                    "description": "Background color for tooltips",
                    "category": "color"
                },
                {
                    "name": "--slds-c-tooltip-text-color",
                    "description": "Text color for tooltips",
                    "category": "color"
                }
            ],
            "dependencies": {
                "css_files": [
                    "tooltip.css",
                    "nubbins.css"
                ],
                "javascript": [
                    "tooltip.js"
                ],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Popover",
                    "relationship": "similar",
                    "description": "Similar overlay for more complex content"
                },
                {
                    "name": "Help Text",
                    "relationship": "alternative",
                    "description": "Alternative for persistent contextual help"
                },
                {
                    "name": "Icons",
                    "relationship": "depends-on",
                    "description": "Often used to provide tooltips for icon meanings"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/tooltips/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Tree Grid",
            "description": "A data table component that combines hierarchical tree structure with tabular data display, allowing expansion and collapse of nested data rows.",
            "category": "Data",
            "slds_classes": {
                "root": "slds-tree_container",
                "elements": [
                    {
                        "class": "slds-tree__item",
                        "description": "Individual tree grid row",
                        "purpose": "Represents a single data item with potential children"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-expanded",
                        "description": "Expanded tree node state",
                        "trigger": "When tree node children are visible"
                    },
                    {
                        "class": "slds-is-collapsed",
                        "description": "Collapsed tree node state",
                        "trigger": "When tree node children are hidden"
                    },
                    {
                        "class": "slds-is-selected",
                        "description": "Selected tree node state",
                        "trigger": "When tree node is selected"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard tree grid with hierarchical data",
                    "classes": [
                        "slds-tree_container"
                    ],
                    "usage_context": "Default tree grid for hierarchical tabular data",
                    "differences": "Data table with expandable/collapsible hierarchical rows"
                }
            ],
            "lightning_component": {
                "name": "lightning-tree-grid",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-tree-grid",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS tree grid blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through table cells and controls",
                    "Arrow keys for cell and row navigation",
                    "Enter/Space to toggle expansion",
                    "Right arrow to expand collapsed nodes",
                    "Left arrow to collapse expanded nodes"
                ],
                "screen_reader": [
                    "Table structure with row and column headers announced",
                    "Hierarchical relationships communicated",
                    "Expansion state changes announced",
                    "Selection changes communicated"
                ],
                "aria_attributes": [
                    "role='treegrid' for tree grid container",
                    "role='row' for table rows",
                    "role='gridcell' for individual cells",
                    "aria-expanded for expandable rows",
                    "aria-selected for selectable rows",
                    "aria-level for hierarchy depth"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For hierarchical data that needs tabular presentation",
                    "When users need to see relationships and data together",
                    "For nested data structures with multiple attributes",
                    "When expansion/collapse functionality improves usability"
                ],
                "when_not_to_use": [
                    "For flat data (use regular data table instead)",
                    "When hierarchy is not meaningful to users",
                    "For simple tree navigation (use tree component)"
                ],
                "best_practices": [
                    "Use clear visual indicators for hierarchy levels",
                    "Provide consistent expand/collapse behavior",
                    "Show loading states for dynamically loaded children",
                    "Maintain good column alignment across hierarchy levels",
                    "Support keyboard navigation throughout"
                ],
                "common_mistakes": [
                    "Poor visual hierarchy indication",
                    "Inconsistent column alignment in nested rows",
                    "Missing keyboard navigation support",
                    "Unclear expansion/collapse controls"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Tree Grid",
                    "code": "<div class=\"slds-tree_container\">\n      <table class=\"\" role=\"treegrid\" aria-label=\"Hierarchical data\">\n        <thead>\n          <tr>\n            <th scope=\"col\">Name</th>\n            <th scope=\"col\">Type</th>\n            <th scope=\"col\">Size</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr role=\"row\" aria-level=\"1\" aria-expanded=\"true\" tabindex=\"0\">\n            <td role=\"gridcell\" class=\"\">\n              <button class=\"slds-button slds-button_icon slds-button_icon-x-small\">\n                <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#chevronright\"></use>\n                </svg>\n              </button>\n              Documents\n            </td>\n            <td role=\"gridcell\">Folder</td>\n            <td role=\"gridcell\">--</td>\n          </tr>\n          <tr role=\"row\" aria-level=\"2\" tabindex=\"0\">\n            <td role=\"gridcell\" style=\"padding-left: 2rem;\">\n              Report.pdf\n            </td>\n            <td role=\"gridcell\">PDF</td>\n            <td role=\"gridcell\">1.2 MB</td>\n          </tr>\n        </tbody>\n      </table>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "tree-grid.css",
                    "tree.css",
                    "table.css"
                ],
                "javascript": [
                    "tree-grid.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "tree",
                    "data-tables",
                    "button-icon"
                ]
            },
            "related_components": [
                {
                    "name": "Data Tables",
                    "relationship": "parent",
                    "description": "Base table functionality with tree hierarchy added"
                },
                {
                    "name": "Tree",
                    "relationship": "similar",
                    "description": "Similar hierarchical structure without tabular data"
                },
                {
                    "name": "Accordion",
                    "relationship": "similar",
                    "description": "Similar expand/collapse concept for content sections"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/tree-grid/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Trees",
            "description": "A hierarchical navigation component that displays data in a tree structure with expandable and collapsible nodes, ideal for representing nested relationships.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-tree",
                "elements": [
                    {
                        "class": "slds-tree__item",
                        "description": "Individual tree node wrapper",
                        "purpose": "Contains a single tree item and its children"
                    },
                    {
                        "class": "slds-tree__item-label",
                        "description": "Label content for tree item",
                        "purpose": "Contains the text or content for the tree node"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-expanded",
                        "description": "Expanded tree node state",
                        "trigger": "When node children are visible"
                    },
                    {
                        "class": "slds-is-collapsed",
                        "description": "Collapsed tree node state",
                        "trigger": "When node children are hidden"
                    },
                    {
                        "class": "slds-is-selected",
                        "description": "Selected tree node state",
                        "trigger": "When node is currently selected"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard tree with expandable nodes",
                    "classes": [
                        "slds-tree"
                    ],
                    "usage_context": "Default tree implementation for hierarchical data",
                    "differences": "Hierarchical structure with expand/collapse functionality"
                }
            ],
            "lightning_component": {
                "name": "lightning-tree",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-tree",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS tree blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus the tree",
                    "Arrow keys to navigate between nodes",
                    "Enter/Space to select nodes",
                    "Right arrow to expand collapsed nodes",
                    "Left arrow to collapse expanded nodes"
                ],
                "screen_reader": [
                    "Tree structure and hierarchy announced",
                    "Node states (expanded/collapsed) communicated",
                    "Selection changes announced",
                    "Node relationships described"
                ],
                "aria_attributes": [
                    "role='tree' for tree container",
                    "role='treeitem' for individual nodes",
                    "aria-expanded for expandable nodes",
                    "aria-selected for selectable nodes",
                    "aria-level for node hierarchy depth",
                    "aria-setsize and aria-posinset for node position"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For hierarchical data with parent-child relationships",
                    "When users need to navigate nested structures",
                    "For file system or folder-like interfaces",
                    "To show organizational hierarchies"
                ],
                "when_not_to_use": [
                    "For flat lists (use regular lists instead)",
                    "When hierarchy is not meaningful to users",
                    "For simple navigation (use regular navigation components)"
                ],
                "best_practices": [
                    "Use clear visual indicators for expand/collapse states",
                    "Provide meaningful node labels",
                    "Show loading states for dynamically loaded children",
                    "Allow keyboard navigation throughout the tree",
                    "Indicate selection clearly"
                ],
                "common_mistakes": [
                    "Poor visual hierarchy indication",
                    "Inconsistent expand/collapse behavior",
                    "Missing keyboard navigation support",
                    "Unclear node selection feedback"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Tree Structure",
                    "code": "<div class=\"slds-tree_container\">\n      <ul role=\"tree\" class=\"slds-tree\">\n        <li role=\"treeitem\" aria-level=\"1\" aria-expanded=\"true\" aria-selected=\"false\" tabindex=\"0\">\n          <div class=\"slds-tree__item\">\n            <button class=\"slds-button slds-button_icon slds-button_icon-x-small slds-m-right_x-small\" aria-hidden=\"true\" tabindex=\"-1\">\n              <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#chevronright\"></use>\n              </svg>\n            </button>\n            <span class=\"slds-tree__item-label\" title=\"Western Sales Director\">Western Sales Director</span>\n          </div>\n          <ul role=\"group\" class=\"\">\n            <li role=\"treeitem\" aria-level=\"2\" aria-selected=\"false\" tabindex=\"0\">\n              <div class=\"slds-tree__item\">\n                <span class=\"slds-tree__item-label\" title=\"Western Sales Manager\">Western Sales Manager</span>\n              </div>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "tree.css",
                    "button.css"
                ],
                "javascript": [
                    "tree.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button-icon",
                    "icons"
                ]
            },
            "related_components": [
                {
                    "name": "Tree Grid",
                    "relationship": "variant",
                    "description": "Tree structure combined with data table functionality"
                },
                {
                    "name": "Vertical Navigation",
                    "relationship": "similar",
                    "description": "Alternative navigation for hierarchical content"
                },
                {
                    "name": "Accordion",
                    "relationship": "similar",
                    "description": "Alternative for collapsible hierarchical content"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/trees/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Trial Bar",
            "description": "A persistent notification banner that informs users about trial status, subscription expiration, or upgrade opportunities, typically displayed at the top of the interface.",
            "category": "Feedback",
            "slds_classes": {
                "root": "slds-trial-header",
                "elements": [],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Visible trial bar state",
                        "trigger": "Applied when trial bar is displayed"
                    },
                    {
                        "class": "slds-is-closed",
                        "description": "Hidden trial bar state",
                        "trigger": "Applied when trial bar is dismissed"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard trial notification bar",
                    "classes": [
                        "slds-trial-header"
                    ],
                    "usage_context": "Default implementation for trial notifications",
                    "differences": "Basic informational styling for trial status"
                },
                {
                    "name": "Warning",
                    "description": "Warning trial bar for expiring trials",
                    "classes": [
                        "slds-trial-header"
                    ],
                    "usage_context": "When trial is expiring soon",
                    "differences": "Warning styling with urgency indicators"
                },
                {
                    "name": "Expired",
                    "description": "Expired trial notification",
                    "classes": [
                        "slds-trial-header"
                    ],
                    "usage_context": "When trial has expired",
                    "differences": "Error styling for expired trial state"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented using custom components or lightning-notification"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation to action buttons",
                    "Enter/Space to activate actions",
                    "Escape to dismiss if dismissible"
                ],
                "screen_reader": [
                    "Trial status and urgency announced",
                    "Action options clearly described",
                    "Dismissal capability communicated"
                ],
                "aria_attributes": [
                    "role='banner' for trial notification",
                    "aria-label describing trial status",
                    "aria-live for dynamic updates",
                    "aria-hidden when dismissed"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For trial period notifications",
                    "When subscription status needs attention",
                    "For upgrade or renewal prompts",
                    "To communicate time-sensitive offers"
                ],
                "when_not_to_use": [
                    "For general system notifications (use toast)",
                    "For error messages (use alert)",
                    "For one-time announcements"
                ],
                "best_practices": [
                    "Keep message concise and actionable",
                    "Use appropriate urgency styling",
                    "Provide clear call-to-action",
                    "Allow dismissal when appropriate",
                    "Update content based on trial status"
                ],
                "common_mistakes": [
                    "Overly aggressive or persistent notifications",
                    "Unclear trial status or next steps",
                    "Missing dismissal options",
                    "Poor visual hierarchy"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Trial Bar",
                    "description": "Expired trial notification with limited access message",
                    "code": "<div class=\"slds-trial-header slds-is-open\" role=\"banner\" aria-label=\"Trial expired notification\">\n      <div class=\"\">\n        <div class=\"\">\n          <span class=\"\">\n            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n            </svg>\n          </span>\n          <span class=\"slds-text-body_regular\">\n            <strong>Your trial has expired.</strong>\\ \n            You now have limited access. Subscribe to restore full functionality.\n          </span>\n        </div>\n        <div class=\"\">\n          <button class=\"slds-button slds-button_brand slds-button_small\">\n            Subscribe Now\n          </button>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "trial-header.css",
                    "button.css",
                    "notification.css"
                ],
                "javascript": [
                    "trial-header.js"
                ],
                "icons": [
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "notification"
                ]
            },
            "related_components": [
                {
                    "name": "Toast",
                    "relationship": "alternative",
                    "description": "Alternative for temporary notifications"
                },
                {
                    "name": "Alert",
                    "relationship": "similar",
                    "description": "Similar notification concept"
                },
                {
                    "name": "Global Header",
                    "relationship": "container",
                    "description": "Often positioned near global header"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/trial-bar/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Vertical Navigation",
            "description": "A navigation component that displays menu items in a vertical list, ideal for sidebar navigation and hierarchical menu structures.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-nav-vertical",
                "elements": [
                    {
                        "class": "slds-nav-vertical__section",
                        "description": "Section container for grouped navigation items",
                        "purpose": "Groups related navigation items with optional header"
                    },
                    {
                        "class": "slds-nav-vertical__title",
                        "description": "Section title for navigation groups",
                        "purpose": "Provides heading for navigation sections"
                    },
                    {
                        "class": "slds-nav-vertical__action",
                        "description": "Individual navigation item",
                        "purpose": "Clickable navigation link or button"
                    },
                    {
                        "class": "slds-nav-vertical__item",
                        "description": "Navigation item wrapper",
                        "purpose": "Contains navigation action and provides structure"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-nav-vertical_compact",
                        "description": "Compact vertical navigation",
                        "usage": "Reduced spacing for dense layouts"
                    },
                    {
                        "class": "slds-nav-vertical_shade",
                        "description": "Shaded background navigation",
                        "usage": "Enhanced visual separation with background"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active navigation item state",
                        "trigger": "Currently selected navigation item"
                    },
                    {
                        "class": "slds-has-focus",
                        "description": "Focus state for navigation items",
                        "trigger": "When navigation item has keyboard focus"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard vertical navigation list",
                    "classes": [
                        "slds-nav-vertical"
                    ],
                    "usage_context": "Default vertical navigation for sidebars and menus",
                    "differences": "Vertical list of navigation items with optional grouping"
                }
            ],
            "lightning_component": {
                "name": "lightning-vertical-navigation",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-vertical-navigation",
                "mapping_notes": "Direct mapping - Lightning component implements SLDS vertical navigation blueprint"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to focus navigation items",
                    "Enter/Space to activate navigation items",
                    "Arrow keys to navigate between items",
                    "Home/End to go to first/last items"
                ],
                "screen_reader": [
                    "Navigation structure announced as list",
                    "Section headings provide navigation context",
                    "Current page or selection clearly identified",
                    "Navigation purpose communicated"
                ],
                "aria_attributes": [
                    "role='navigation' for navigation container",
                    "aria-label describing navigation purpose",
                    "aria-current='page' for current page links",
                    "role='list' for navigation item containers",
                    "role='listitem' for navigation items"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For sidebar navigation in applications",
                    "To display hierarchical menu structures",
                    "When vertical space is available",
                    "For persistent navigation that doesn't change frequently"
                ],
                "when_not_to_use": [
                    "For horizontal navigation (use tabs or horizontal nav)",
                    "When space is extremely limited",
                    "For temporary or contextual actions (use menus instead)"
                ],
                "best_practices": [
                    "Use clear, descriptive navigation labels",
                    "Group related navigation items logically",
                    "Indicate current page or section clearly",
                    "Maintain consistent navigation structure",
                    "Provide visual hierarchy with appropriate spacing"
                ],
                "common_mistakes": [
                    "Poor grouping of navigation items",
                    "Unclear or inconsistent labeling",
                    "Not indicating current location",
                    "Overloading with too many navigation options"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Vertical Navigation",
                    "code": "<nav class=\"slds-nav-vertical\" aria-label=\"Main navigation\">\n      <div class=\"slds-nav-vertical__section\">\n        <h2 class=\"slds-nav-vertical__title\">Section One</h2>\n        <ul>\n          <li class=\"slds-nav-vertical__item slds-is-active\">\n            <a href=\"#\" class=\"slds-nav-vertical__action\" aria-current=\"page\">\n              Current Page\n            </a>\n          </li>\n          <li class=\"slds-nav-vertical__item\">\n            <a href=\"#\" class=\"slds-nav-vertical__action\">\n              Navigation Item\n            </a>\n          </li>\n          <li class=\"slds-nav-vertical__item\">\n            <a href=\"#\" class=\"slds-nav-vertical__action\">\n              Another Item\n            </a>\n          </li>\n        </ul>\n      </div>\n      </nav>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "nav-vertical.css"
                ],
                "javascript": [],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Tabs",
                    "relationship": "alternative",
                    "description": "Alternative horizontal navigation for content switching"
                },
                {
                    "name": "Trees",
                    "relationship": "similar",
                    "description": "Similar hierarchical navigation with nesting"
                },
                {
                    "name": "Global Navigation",
                    "relationship": "similar",
                    "description": "Works together for complete navigation system"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/vertical-navigation/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Vertical Tabs",
            "description": "Vertical tabs provide a navigation pattern where tab items are arranged vertically, typically on the left side of the content area. They allow users to switch between different views or sections of content.",
            "category": "Navigation",
            "slds_classes": {
                "root": "slds-vertical-tabs",
                "elements": [
                    {
                        "class": "slds-vertical-tabs__nav",
                        "description": "Navigation container for vertical tabs",
                        "purpose": "Contains the list of tab items"
                    },
                    {
                        "class": "slds-vertical-tabs__nav-item",
                        "description": "Individual tab navigation item",
                        "purpose": "Container for each tab button/link"
                    },
                    {
                        "class": "slds-vertical-tabs__link",
                        "description": "Tab link or button element",
                        "purpose": "Clickable element that activates a tab panel"
                    },
                    {
                        "class": "slds-vertical-tabs__content",
                        "description": "Container for tab panel content",
                        "purpose": "Holds the content associated with each tab"
                    }
                ],
                "modifiers": [],
                "states": [
                    {
                        "class": "slds-is-active",
                        "description": "Active state for the current tab",
                        "trigger": "When a tab is selected and its panel is visible"
                    },
                    {
                        "class": "slds-is-disabled",
                        "description": "Disabled state for a tab",
                        "trigger": "When a tab is not interactive"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard vertical tabs navigation",
                    "classes": [
                        "slds-vertical-tabs"
                    ],
                    "usage_context": "Default vertical tabs implementation",
                    "differences": "Vertical navigation with tab panels"
                }
            ],
            "lightning_component": {
                "name": "lightning-tabset",
                "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset",
                "mapping_notes": "Lightning tabset can be configured for vertical orientation"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab to navigate to tab list",
                    "Arrow keys (Up/Down) to navigate between tabs",
                    "Enter or Space to activate a tab",
                    "Home/End to jump to first/last tab"
                ],
                "screen_reader": [
                    "Tab list role announced",
                    "Active tab state announced",
                    "Tab panel content associated and announced",
                    "Disabled tab state announced"
                ],
                "aria_attributes": [
                    "role='tablist' on navigation container",
                    "role='tab' on tab links",
                    "role='tabpanel' on content panels",
                    "aria-selected on active tab (true/false)",
                    "aria-controls linking tab to panel",
                    "aria-labelledby linking panel to tab",
                    "aria-disabled on disabled tabs",
                    "tabindex='0' on active tab, '-1' on others"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "When you have multiple content sections to organize",
                    "For settings pages or configuration interfaces",
                    "When horizontal space is limited but vertical space is available",
                    "For side navigation patterns",
                    "When content sections are related but distinct"
                ],
                "when_not_to_use": [
                    "When horizontal tabs work better for the layout",
                    "For primary navigation (use global navigation)",
                    "When only 2-3 sections exist (consider accordion)",
                    "In very narrow viewports"
                ],
                "best_practices": [
                    "Keep tab labels short and descriptive",
                    "Provide clear visual indication of active tab",
                    "Ensure adequate spacing between tabs",
                    "Support keyboard navigation fully",
                    "Maintain tab state during navigation",
                    "Use icons to enhance tab meaning when helpful"
                ],
                "common_mistakes": [
                    "Not implementing proper ARIA tab patterns",
                    "Missing keyboard navigation",
                    "Inadequate visual feedback for active state",
                    "Too many tabs making navigation difficult",
                    "Not maintaining tab state"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Vertical Tabs",
                    "code": "<div class=\"slds-vertical-tabs\">\n      <ul class=\"slds-vertical-tabs__nav\" role=\"tablist\">\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link\" href=\"#\" role=\"tab\" aria-selected=\"true\" aria-controls=\"tab-panel-1\" tabindex=\"0\">\n            Tab One\n          </a>\n        </li>\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link\" href=\"#\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-panel-2\" tabindex=\"-1\">\n            Tab Two\n          </a>\n        </li>\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link\" href=\"#\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-panel-3\" tabindex=\"-1\">\n            Tab Three\n          </a>\n        </li>\n      </ul>\n      <div class=\"slds-vertical-tabs__content\">\n        <div id=\"tab-panel-1\" class=\"\" role=\"tabpanel\" aria-labelledby=\"tab-1\">\n          <p>Content for Tab One</p>\n        </div>\n        <div id=\"tab-panel-2\" class=\"\" role=\"tabpanel\" aria-labelledby=\"tab-2\" hidden>\n          <p>Content for Tab Two</p>\n        </div>\n        <div id=\"tab-panel-3\" class=\"\" role=\"tabpanel\" aria-labelledby=\"tab-3\" hidden>\n          <p>Content for Tab Three</p>\n        </div>\n      </div>\n      </div>\n"
                },
                {
                    "title": "Vertical Tabs with Active State",
                    "code": "<div class=\"slds-vertical-tabs\">\n      <ul class=\"slds-vertical-tabs__nav\" role=\"tablist\">\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link slds-is-active\" href=\"#\" role=\"tab\" aria-selected=\"true\" aria-controls=\"active-panel\" tabindex=\"0\">\n            Active Tab\n          </a>\n        </li>\n        <li class=\"slds-vertical-tabs__nav-item\" role=\"presentation\">\n          <a class=\"slds-vertical-tabs__link\" href=\"#\" role=\"tab\" aria-selected=\"false\" aria-controls=\"inactive-panel\" tabindex=\"-1\">\n            Inactive Tab\n          </a>\n        </li>\n      </ul>\n      <div class=\"slds-vertical-tabs__content\">\n        <div id=\"active-panel\" class=\"\" role=\"tabpanel\" aria-labelledby=\"active-tab\">\n          <p>This is the active tab content</p>\n        </div>\n        <div id=\"inactive-panel\" class=\"\" role=\"tabpanel\" aria-labelledby=\"inactive-tab\" hidden>\n          <p>This tab is inactive</p>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "styling_hooks": [],
            "dependencies": {
                "css_files": [
                    "vertical-tabs.css"
                ],
                "javascript": [
                    "Tab activation and panel switching",
                    "Keyboard navigation",
                    "ARIA state management",
                    "Focus management"
                ],
                "icons": [],
                "other_components": []
            },
            "related_components": [
                {
                    "name": "Tabs",
                    "relationship": "alternative",
                    "description": "Horizontal tabs navigation"
                },
                {
                    "name": "Scoped Tabs",
                    "relationship": "similar",
                    "description": "Scoped horizontal tabs"
                },
                {
                    "name": "Vertical Navigation",
                    "relationship": "similar",
                    "description": "Vertical navigation menu"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/vertical-tabs/",
                "design_guidelines": "https://v1.lightningdesignsystem.com/components/vertical-tabs/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "author": "SLDS Documentation Team",
                "slds_version": "2.27.2",
                "review_status": "complete",
                "source": "official-slds",
                "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Visual Picker",
            "description": "A selection interface that presents options as visual cards or tiles, allowing users to choose from alternatives using images, icons, and descriptive text rather than traditional form controls.",
            "category": "Input",
            "slds_classes": {
                "root": "slds-visual-picker",
                "elements": [
                    {
                        "class": "slds-visual-picker__figure",
                        "description": "Container for visual content (icon, image)",
                        "purpose": "Holds the primary visual representation"
                    },
                    {
                        "class": "slds-visual-picker__body",
                        "description": "Container for text content",
                        "purpose": "Contains title, description, and other text"
                    },
                    {
                        "class": "slds-visual-picker__text",
                        "description": "Primary text/title for the option",
                        "purpose": "Main label or title for the visual option"
                    },
                    {
                        "class": "slds-visual-picker__icon",
                        "description": "Icon within the visual picker",
                        "purpose": "Visual icon representation"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-visual-picker_medium",
                        "description": "Medium-sized visual picker",
                        "usage": "Standard size for most use cases"
                    },
                    {
                        "class": "slds-visual-picker_large",
                        "description": "Large-sized visual picker",
                        "usage": "When more visual prominence is needed"
                    },
                    {
                        "class": "slds-visual-picker_small",
                        "description": "Small-sized visual picker",
                        "usage": "For compact layouts or secondary options"
                    },
                    {
                        "class": "slds-visual-picker_vertical",
                        "description": "Vertical layout orientation",
                        "usage": "When vertical stacking is preferred"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-selected",
                        "description": "Selected visual picker state",
                        "trigger": "Applied when option is selected"
                    },
                    {
                        "class": "slds-has-error",
                        "description": "Error state for visual picker",
                        "trigger": "Applied when validation fails"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard visual picker with icon and text",
                    "classes": [
                        "slds-visual-picker"
                    ],
                    "usage_context": "Default implementation for visual selection",
                    "differences": "Card-like interface with visual and text content"
                },
                {
                    "name": "Coverable Content",
                    "description": "Visual picker with coverable content area",
                    "classes": [
                        "slds-visual-picker"
                    ],
                    "usage_context": "When content should be covered by selection state",
                    "differences": "Selection state covers the entire content area"
                },
                {
                    "name": "Non-coverable Content",
                    "description": "Visual picker with always-visible content",
                    "classes": [
                        "slds-visual-picker"
                    ],
                    "usage_context": "When content should remain visible when selected",
                    "differences": "Content remains visible in all states"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - can be implemented using lightning-radio-group or lightning-checkbox-group with custom styling"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation between visual picker options",
                    "Space to select/deselect options",
                    "Arrow keys for radio group navigation",
                    "Enter to activate selections"
                ],
                "screen_reader": [
                    "Option content and state announced",
                    "Selection changes communicated",
                    "Group structure and labels conveyed"
                ],
                "aria_attributes": [
                    "role='radio' or 'checkbox' for input elements",
                    "role='radiogroup' or 'group' for containers",
                    "aria-checked for selection state",
                    "aria-labelledby for option labeling",
                    "aria-describedby for additional descriptions"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For visually-driven selection scenarios",
                    "When options benefit from visual representation",
                    "For product selection or configuration",
                    "When traditional form controls feel inadequate"
                ],
                "when_not_to_use": [
                    "For simple text-only options (use radio/checkbox)",
                    "When visual content is not meaningful",
                    "In data-heavy or technical contexts"
                ],
                "best_practices": [
                    "Use clear, meaningful visual representations",
                    "Provide descriptive text alongside visuals",
                    "Ensure adequate contrast for selection states",
                    "Make the entire card clickable",
                    "Group related options logically"
                ],
                "common_mistakes": [
                    "Using unclear or confusing visuals",
                    "Making selection areas too small",
                    "Poor contrast in selection states",
                    "Inconsistent visual picker sizes"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Visual Picker Radio Group",
                    "description": "Compact visual picker options for space-constrained layouts",
                    "code": "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\">Choose color</legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-grid slds-wrap slds-grid_pull-padded\">\n          <div class=\"slds-p-around_x-small\">\n            <div class=\"slds-visual-picker slds-visual-picker_small\">\n              <input type=\"radio\" id=\"color-red\" value=\"red\" name=\"color\" />\n              <label for=\"color-red\">\n                <span class=\"slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center\">\n                  <span class=\"slds-visual-picker__icon\" style=\"background-color: #e74c3c; width: 2rem; height: 2rem; border-radius: 50%;\"></span>\n                </span>\n                <span class=\"slds-visual-picker__body\">\n                  <span class=\"slds-visual-picker__text\">Red</span>\n                </span>\n              </label>\n            </div>\n          </div>\n          <div class=\"slds-p-around_x-small\">\n            <div class=\"slds-visual-picker slds-visual-picker_small\">\n              <input type=\"radio\" id=\"color-blue\" value=\"blue\" name=\"color\" />\n              <label for=\"color-blue\">\n                <span class=\"slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center\">\n                  <span class=\"slds-visual-picker__icon\" style=\"background-color: #3498db; width: 2rem; height: 2rem; border-radius: 50%;\"></span>\n                </span>\n                <span class=\"slds-visual-picker__body\">\n                  <span class=\"slds-visual-picker__text\">Blue</span>\n                </span>\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      </fieldset>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "visual-picker.css",
                    "form-element.css",
                    "radio.css",
                    "checkbox.css"
                ],
                "javascript": [
                    "visual-picker.js"
                ],
                "icons": [
                    "standard-sprite.svg",
                    "utility-sprite.svg"
                ],
                "other_components": [
                    "radio",
                    "checkbox",
                    "form-element"
                ]
            },
            "related_components": [
                {
                    "name": "Radio Group",
                    "relationship": "alternative",
                    "description": "Alternative for single selection scenarios"
                },
                {
                    "name": "Checkbox Group",
                    "relationship": "alternative",
                    "description": "Alternative for multiple selection scenarios"
                },
                {
                    "name": "Cards",
                    "relationship": "similar",
                    "description": "Similar card-based interface concept"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/visual-picker/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        },
        {
            "name": "Welcome Mat",
            "description": "An introductory overlay that provides onboarding guidance, feature highlights, or welcome messaging for new users, typically displayed as a full-screen or prominent modal experience.",
            "category": "Overlay",
            "slds_classes": {
                "root": "slds-welcome-mat",
                "elements": [
                    {
                        "class": "slds-welcome-mat__content",
                        "description": "Content area for welcome messaging",
                        "purpose": "Contains the primary welcome content and messaging"
                    },
                    {
                        "class": "slds-welcome-mat__tile",
                        "description": "Individual content tile within welcome mat",
                        "purpose": "Represents a single feature or benefit highlight"
                    },
                    {
                        "class": "slds-welcome-mat__tile-figure",
                        "description": "Visual area within a welcome mat tile",
                        "purpose": "Contains icon or image for individual tiles"
                    },
                    {
                        "class": "slds-welcome-mat__tile-body",
                        "description": "Text content area within a tile",
                        "purpose": "Contains title and description for tiles"
                    }
                ],
                "modifiers": [
                    {
                        "class": "slds-welcome-mat_splash",
                        "description": "Full-screen splash style welcome mat",
                        "usage": "For prominent full-screen welcome experiences"
                    }
                ],
                "states": [
                    {
                        "class": "slds-is-open",
                        "description": "Visible welcome mat state",
                        "trigger": "Applied when welcome mat is displayed"
                    },
                    {
                        "class": "slds-is-closed",
                        "description": "Hidden welcome mat state",
                        "trigger": "Applied when welcome mat is dismissed"
                    }
                ]
            },
            "variants": [
                {
                    "name": "Base",
                    "description": "Standard welcome mat with content and actions",
                    "classes": [
                        "slds-welcome-mat"
                    ],
                    "usage_context": "Default implementation for welcome experiences",
                    "differences": "Basic welcome mat with flexible content layout"
                },
                {
                    "name": "Splash",
                    "description": "Full-screen splash welcome mat",
                    "classes": [
                        "slds-welcome-mat",
                        "slds-welcome-mat_splash"
                    ],
                    "usage_context": "For prominent first-time user experiences",
                    "differences": "Full-screen overlay with prominent welcome content"
                },
                {
                    "name": "Modal",
                    "description": "Modal-style welcome mat",
                    "classes": [
                        "slds-welcome-mat"
                    ],
                    "usage_context": "For focused welcome messaging in modal format",
                    "differences": "Centered modal with welcome content"
                }
            ],
            "lightning_component": {
                "name": "No direct component",
                "url": "https://developer.salesforce.com/docs/component-library/overview/components",
                "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented using custom components or lightning-modal with welcome content"
            },
            "accessibility": {
                "keyboard_support": [
                    "Tab navigation through welcome mat content",
                    "Enter/Space to activate action buttons",
                    "Escape to close if dismissible",
                    "Focus management for modal behavior"
                ],
                "screen_reader": [
                    "Welcome mat purpose and content announced",
                    "Navigation and action options described",
                    "Progress through welcome flow communicated"
                ],
                "aria_attributes": [
                    "role='dialog' for modal welcome mats",
                    "aria-modal='true' for overlay behavior",
                    "aria-labelledby for welcome mat title",
                    "aria-describedby for welcome content",
                    "aria-live for dynamic content updates"
                ]
            },
            "usage_guidelines": {
                "when_to_use": [
                    "For first-time user onboarding",
                    "When introducing new features",
                    "For welcome messaging and orientation",
                    "To highlight key benefits or capabilities"
                ],
                "when_not_to_use": [
                    "For returning user experiences",
                    "When users are familiar with the interface",
                    "For critical workflow interruptions"
                ],
                "best_practices": [
                    "Keep welcome content concise and valuable",
                    "Provide clear next steps or actions",
                    "Allow easy dismissal or skipping",
                    "Use progressive disclosure for complex onboarding",
                    "Test with real users for effectiveness"
                ],
                "common_mistakes": [
                    "Overwhelming users with too much information",
                    "Blocking critical functionality",
                    "Poor mobile experience",
                    "Not allowing users to skip or dismiss"
                ]
            },
            "code_examples": [
                {
                    "title": "Basic Welcome Mat",
                    "description": "Full-screen splash style welcome experience",
                    "code": "<div class=\"slds-welcome-mat slds-welcome-mat_splash slds-is-open\">\n      <div class=\"\">\n        <div class=\"slds-welcome-mat__content slds-text-align_center\">\n          <div class=\"slds-m-bottom_large\">\n            <img src=\"/assets/images/splash-hero.svg\" alt=\"Platform illustration\" style=\"max-width: 300px;\" />\n          </div>\n          <div class=\"slds-m-bottom_large\">\n            <h1 class=\"slds-text-heading_large\">Welcome to Your New Workspace</h1>\n            <p class=\"slds-text-body_regular slds-m-top_medium\">\n              Everything you need to manage your projects, collaborate with your team, and achieve your goals.\n            </p>\n          </div>\n          <div class=\"\">\n            <button class=\"slds-button slds-button_brand slds-button_stretch\">\n              Start Your Journey\n            </button>\n            <button class=\"slds-button slds-button_neutral slds-m-top_small\">\n              I'll explore on my own\n            </button>\n          </div>\n        </div>\n      </div>\n      </div>\n"
                }
            ],
            "dependencies": {
                "css_files": [
                    "welcome-mat.css",
                    "modal.css",
                    "button.css",
                    "grid.css"
                ],
                "javascript": [
                    "welcome-mat.js"
                ],
                "icons": [
                    "utility-sprite.svg",
                    "standard-sprite.svg"
                ],
                "other_components": [
                    "button",
                    "modal",
                    "grid"
                ]
            },
            "related_components": [
                {
                    "name": "Modal",
                    "relationship": "similar",
                    "description": "Similar overlay concept for different purposes"
                },
                {
                    "name": "Walkthrough",
                    "relationship": "similar",
                    "description": "Similar onboarding concept"
                },
                {
                    "name": "Toast",
                    "relationship": "alternative",
                    "description": "Alternative for brief welcome messages"
                }
            ],
            "references": {
                "official_docs": "https://v1.lightningdesignsystem.com/components/welcome-mat/"
            },
            "metadata": {
                "version": "1.0.0",
                "last_updated": "2025-11-12",
                "review_status": "complete",
                "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
            }
        }
    ],
    "availableCategories": [
        "Actions",
        "Input",
        "Layout",
        "Navigation",
        "Display",
        "Data",
        "Feedback",
        "Overlay",
        "Complex Components"
    ],
    "totalCount": 85
}