design-systems-slds-apply

어떤 스킬인가요?

Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between Lightning Base Components and SLDS Blueprints, applying styling hooks for theming, using utility classes for layout and spacing, or selecting icons. Triggers include \"build a modal\", \"create a form\", \"data table\", \"SLDS styling\", \"style with hooks\", \"add an icon\".

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

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">
            <section class="slds-accordion__list-item">
              <div class="slds-accordion__summary" id="accordion-summary-01">
                <h3 class="slds-accordion__summary-heading">
                  <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="accordion-content-01" aria-expanded="true">
                    <span class="slds-accordion__summary-content">Accordion summary</span>
                  </button>
                </h3>
              </div>
              <div class="slds-accordion__content slds-is-open" id="accordion-content-01">
                <p>Accordion content</p>
              </div>
            </section>
            </div>
  - title: "Multi-Section Accordion"
    description: "Complete accordion with multiple expandable sections"
    code: |
      <div class="slds-accordion">
            <section class="slds-accordion__section slds-is-open">
              <div class="slds-accordion__summary">
                <h3 class="slds-accordion__summary-heading">
                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="accordion-details-01" aria-expanded="true">
                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                    </svg>
                    <span class="slds-accordion__summary-content">
                      Getting Started
                    </span>
                  </button>
                </h3>
              </div>
              <div class="slds-accordion__content" id="accordion-details-01">
                <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>
                <ul class="slds-list_dotted">
                  <li>Create your account</li>
                  <li>Complete your profile</li>
                  <li>Explore the dashboard</li>
                  <li>Take the guided tour</li>
                </ul>
              </div>
            </section>
            <section class="slds-accordion__section slds-is-closed">
              <div class="slds-accordion__summary">
                <h3 class="slds-accordion__summary-heading">
                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="accordion-details-02" aria-expanded="false">
                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                    </svg>
                    <span class="slds-accordion__summary-content">
                      Advanced Features
                    </span>
                  </button>
                </h3>
              </div>
              <div class="slds-accordion__content slds-hide" id="accordion-details-02">
                <p>Learn about our advanced features and how to use them effectively in your workflow.</p>
              </div>
            </section>
            <section class="slds-accordion__section slds-is-open">
              <div class="slds-accordion__summary">
                <h3 class="slds-accordion__summary-heading">
                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="accordion-details-03" aria-expanded="true">
                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                    </svg>
                    <span class="slds-accordion__summary-content">
                      Account Settings
                    </span>
                  </button>
                </h3>
              </div>
              <div class="slds-accordion__content" id="accordion-details-03">
                <div class="slds-grid slds-wrap">
                  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
                    <h4 class="slds-text-heading_small slds-m-bottom_small">Profile Information</h4>
                    <ul class="slds-list_vertical">
                      <li class="slds-list__item">Update your name and contact details</li>
                      <li class="slds-list__item">Change your profile picture</li>
                      <li class="slds-list__item">Manage privacy settings</li>
                    </ul>
                  </div>
                  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
                    <h4 class="slds-text-heading_small slds-m-bottom_small">Security</h4>
                    <ul class="slds-list_vertical">
                      <li class="slds-list__item">Change your password</li>
                      <li class="slds-list__item">Enable two-factor authentication</li>
                      <li class="slds-list__item">Review login activity</li>
                    </ul>
                  </div>
                </div>
              </div>
            </section>
            </div>
  - title: "FAQ Accordion"
    description: "Accordion optimized for frequently asked questions"
    code: |
      <div class="slds-accordion">
            <section class="slds-accordion__section slds-is-closed">
              <div class="slds-accordion__summary">
                <h3 class="slds-accordion__summary-heading">
                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="faq-01" aria-expanded="false">
                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                    </svg>
                    <span class="slds-accordion__summary-content">
                      How do I reset my password?
                    </span>
                  </button>
                </h3>
              </div>
              <div class="slds-accordion__content slds-hide" id="faq-01">
                <p>To reset your password:</p>
                <ol class="slds-list_ordered">
                  <li>Click the "Forgot Password" link on the login page</li>
                  <li>Enter your email address</li>
                  <li>Check your email for reset instructions</li>
                  <li>Follow the link and create a new password</li>
                </ol>
              </div>
            </section>
            <section class="slds-accordion__section slds-is-closed">
              <div class="slds-accordion__summary">
                <h3 class="slds-accordion__summary-heading">
                  <button class="slds-accordion__summary-action slds-button slds-button_reset" aria-controls="faq-02" aria-expanded="false">
                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                    </svg>
                    <span class="slds-accordion__summary-content">
                      Where can I find my billing information?
                    </span>
                  </button>
                </h3>
              </div>
              <div class="slds-accordion__content slds-hide" id="faq-02">
                <p>Your billing information can be found in the Account Settings section under "Billing & Payments". From there you can:</p>
                <ul class="slds-list_dotted">
                  <li>View current charges</li>
                  <li>Download invoices</li>
                  <li>Update payment methods</li>
                  <li>Change billing addresses</li>
                </ul>
              </div>
            </section>
            </div>
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>
  - title: "Lightest Badge"
    description: "Subtle badge for counts or low-emphasis status"
    code: |
      <span class="slds-badge slds-badge_lightest">99+</span>
  - title: "Inverse Badge"
    description: "Badge for use on dark backgrounds"
    code: |
      <span class="slds-badge slds-badge_inverse">Active</span>
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">
            <button class="slds-button slds-button_neutral">Cancel</button>
            <button class="slds-button slds-button_brand">Save</button>
            </div>
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">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
            </svg>
            </button>
  - title: "Bordered Icon Button"
    code: |
      <button class="slds-button slds-button_icon slds-button_icon-border" aria-label="Edit" title="Edit">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
            </svg>
            <span class="slds-assistive-text">Edit</span>
            </button>
  - title: "Filled Bordered Icon Button"
    code: |
      <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-label="Search" title="Search">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
            </svg>
            <span class="slds-assistive-text">Search</span>
            </button>
  - title: "Brand Icon Button"
    code: |
      <button class="slds-button slds-button_icon slds-button_icon-brand" aria-label="Add" title="Add">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
            </svg>
            <span class="slds-assistive-text">Add</span>
            </button>
  - title: "Inverse Icon Button"
    code: |
      <div class="slds-box" style="background: #16325c; padding: 1rem;">
            <button class="slds-button slds-button_icon slds-button_icon-inverse" aria-label="Close" title="Close">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
              </svg>
              <span class="slds-assistive-text">Close</span>
            </button>
            </div>
  - title: "Icon Button with Hint"
    code: |
      <div class="slds-hint-parent">
            <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-label="Help" title="Help">
              <svg class="slds-button__icon slds-button__icon_hint" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#help"></use>
              </svg>
              <span class="slds-assistive-text">Help</span>
            </button>
            </div>
  - title: "Size Variants"
    code: |
      <div class="slds-grid slds-grid_vertical-align-center slds-gutters_small">
            <div class="slds-col">
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-xx-small" aria-label="Extra Extra Small">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
                </svg>
              </button>
            </div>
            <div class="slds-col">
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" aria-label="Extra Small">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
                </svg>
              </button>
            </div>
            <div class="slds-col">
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" aria-label="Small">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
                </svg>
              </button>
            </div>
            <div class="slds-col">
              <button class="slds-button slds-button_icon slds-button_icon-border" aria-label="Medium (default)">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
                </svg>
              </button>
            </div>
            <div class="slds-col">
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-large" aria-label="Large">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
                </svg>
              </button>
            </div>
            </div>
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">
            <div class="slds-card__header slds-grid">
              <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__body">
                  <h2 class="slds-card__header-title">
                    <a href="#" class="slds-card__header-link slds-truncate" title="Accounts">
                      <span>Accounts (1)</span>
                    </a>
                  </h2>
                </div>
              </header>
            </div>
            <div class="slds-card__body slds-card__body_inner">
              <p>Card body content goes here...</p>
            </div>
            <footer class="slds-card__footer">
              <a href="#">View All</a>
            </footer>
            </article>
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">
            <div class="slds-carousel__stage">
              <div class="slds-carousel__panels">
                <div id="panel-01" class="slds-carousel__panel slds-is-active" role="tabpanel" aria-labelledby="indicator-01">
                  <a href="#" class="slds-carousel__panel-action slds-text-link_reset">
                    <div class="slds-align_absolute-center">
                      <h2 class="slds-text-heading_large">Panel 1 Content</h2>
                    </div>
                  </a>
                </div>
                <div id="panel-02" class="slds-carousel__panel" role="tabpanel" aria-labelledby="indicator-02">
                  <a href="#" class="slds-carousel__panel-action slds-text-link_reset">
                    <div class="slds-align_absolute-center">
                      <h2 class="slds-text-heading_large">Panel 2 Content</h2>
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <ul class="slds-carousel__indicators" role="tablist">
              <li class="slds-carousel__indicator" role="presentation">
                <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">
                  <span class="slds-assistive-text">Panel 1</span>
                </a>
              </li>
              <li class="slds-carousel__indicator" role="presentation">
                <a id="indicator-02" class="slds-carousel__indicator-action" href="#panel-02" role="tab" aria-controls="panel-02" aria-selected="false" tabindex="-1">
                  <span class="slds-assistive-text">Panel 2</span>
                </a>
              </li>
            </ul>
            </div>
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">
        <legend class="slds-form-element__legend slds-form-element__label">
          Scheduled Day(s)
        </legend>
        <div class="slds-form-element__control">
          <div class="slds-checkbox_button-group">
            <span class="slds-button slds-checkbox_button">
              <input type="checkbox" name="checkbox" id="checkbox-monday" value="monday" />
              <label class="slds-checkbox_button__label" for="checkbox-monday">
                <span class="slds-checkbox_faux">Monday</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input type="checkbox" name="checkbox" id="checkbox-tuesday" value="tuesday" />
              <label class="slds-checkbox_button__label" for="checkbox-tuesday">
                <span class="slds-checkbox_faux">Tuesday</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input type="checkbox" name="checkbox" id="checkbox-wednesday" value="wednesday" />
              <label class="slds-checkbox_button__label" for="checkbox-wednesday">
                <span class="slds-checkbox_faux">Wednesday</span>
              </label>
            </span>
          </div>
        </div>
      </fieldset>
    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">
        <legend class="slds-form-element__legend slds-form-element__label">
          Select at least one option
        </legend>
        <div class="slds-form-element__control">
          <div class="slds-checkbox_button-group">
            <span class="slds-button slds-checkbox_button">
              <input type="checkbox" name="checkbox" id="checkbox-error-1" value="option1" aria-describedby="checkbox-error-message" />
              <label class="slds-checkbox_button__label" for="checkbox-error-1">
                <span class="slds-checkbox_faux">Option 1</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input type="checkbox" name="checkbox" id="checkbox-error-2" value="option2" />
              <label class="slds-checkbox_button__label" for="checkbox-error-2">
                <span class="slds-checkbox_faux">Option 2</span>
              </label>
            </span>
          </div>
        </div>
        <div id="checkbox-error-message" class="slds-form-element__help">This field is required</div>
      </fieldset>
    description: "Checkbox button group with error state and validation message"
  - title: "Disabled Checkbox Button Group"
    code: |
      <fieldset class="slds-form-element">
        <legend class="slds-form-element__legend slds-form-element__label">
          Disabled Options
        </legend>
        <div class="slds-form-element__control">
          <div class="slds-checkbox_button-group">
            <span class="slds-button slds-checkbox_button">
              <input type="checkbox" name="checkbox" id="checkbox-disabled-1" value="option1" disabled />
              <label class="slds-checkbox_button__label" for="checkbox-disabled-1">
                <span class="slds-checkbox_faux">Disabled Option 1</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input type="checkbox" name="checkbox" id="checkbox-disabled-2" value="option2" disabled checked />
              <label class="slds-checkbox_button__label" for="checkbox-disabled-2">
                <span class="slds-checkbox_faux">Disabled Option 2 (Checked)</span>
              </label>
            </span>
          </div>
        </div>
      </fieldset>
    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">
            <div class="slds-form-element__control">
              <label class="slds-checkbox_toggle slds-grid">
                <input type="checkbox" name="checkbox-toggle" id="toggle-1" />
                <span class="slds-checkbox_faux_container" aria-live="polite">
                  <span class="slds-checkbox_faux"></span>
                  <span class="slds-checkbox_off">Off</span>
                  <span class="slds-checkbox_on">On</span>
                </span>
                <span class="slds-form-element__label">Toggle this setting</span>
              </label>
            </div>
            </div>
  - title: "Checkbox Toggle Checked State"
    code: |
      <div class="slds-form-element">
            <div class="slds-form-element__control">
              <label class="slds-checkbox_toggle slds-grid">
                <input type="checkbox" name="checkbox-toggle" id="toggle-2" checked />
                <span class="slds-checkbox_faux_container" aria-live="polite">
                  <span class="slds-checkbox_faux"></span>
                  <span class="slds-checkbox_off">Off</span>
                  <span class="slds-checkbox_on">On</span>
                </span>
                <span class="slds-form-element__label">Toggle enabled</span>
              </label>
            </div>
            </div>
  - title: "Disabled Checkbox Toggle"
    code: |
      <div class="slds-form-element">
            <div class="slds-form-element__control">
              <label class="slds-checkbox_toggle slds-grid">
                <input type="checkbox" name="checkbox-toggle" id="toggle-3" disabled />
                <span class="slds-checkbox_faux_container" aria-live="polite">
                  <span class="slds-checkbox_faux"></span>
                  <span class="slds-checkbox_off">Off</span>
                  <span class="slds-checkbox_on">On</span>
                </span>
                <span class="slds-form-element__label">Disabled toggle</span>
              </label>
            </div>
            </div>
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">
        <label class="slds-form-element__label" for="counter-input-01">
          Quantity
        </label>
        <div class="slds-form-element__control">
          <div class="slds-input-has-icon slds-input-has-icon_left-right">
            <button class="slds-button slds-button_icon slds-input__button_decrement" title="Decrease" tabindex="-1">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#dash"></use>
              </svg>
              <span class="slds-assistive-text">Decrease</span>
            </button>
            <input type="number" id="counter-input-01" min="1" max="100" step="1" value="1" class="slds-input slds-input_counter" />
            <button class="slds-button slds-button_icon slds-input__button_increment" title="Increase" tabindex="-1">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
              </svg>
              <span class="slds-assistive-text">Increase</span>
            </button>
          </div>
        </div>
      </div>
  - title: "Counter with Help Text"
    description: "Counter input with additional context"
    code: |
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="counter-input-02">
          Number of Attendees
        </label>
        <div class="slds-form-element__control">
          <div class="slds-input-has-icon slds-input-has-icon_left-right">
            <button class="slds-button slds-button_icon slds-input__button_decrement" title="Decrease">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#dash"></use>
              </svg>
              <span class="slds-assistive-text">Decrease</span>
            </button>
            <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" />
            <button class="slds-button slds-button_icon slds-input__button_increment" title="Increase">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
              </svg>
              <span class="slds-assistive-text">Increase</span>
            </button>
          </div>
        </div>
        <div class="slds-form-element__help" id="help-text-02">Maximum 500 attendees</div>
      </div>
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">
            <thead>
              <tr class="slds-line-height_reset">
                <th class="slds-text-title_caps" scope="col">
                  <div class="slds-truncate" title="Name">Name</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                  <div class="slds-truncate" title="Account">Account</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                  <div class="slds-truncate" title="Close Date">Close Date</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="slds-hint-parent">
                <td data-label="Name">
                  <div class="slds-truncate" title="Acme Corp Deal">Acme Corp Deal</div>
                </td>
                <td data-label="Account">
                  <div class="slds-truncate" title="Acme Corporation">Acme Corporation</div>
                </td>
                <td data-label="Close Date">
                  <div class="slds-truncate" title="12/31/2024">12/31/2024</div>
                </td>
              </tr>
            </tbody>
            </table>
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">
        <button class="slds-button slds-button_neutral">Cancel</button>
        <button class="slds-button slds-button_brand">Save</button>
      </div>
    description: "Simple docked footer with Save and Cancel buttons"
  - title: "Docked Footer with Multiple Actions"
    code: |
      <div class="slds-docked-form-footer">
        <div class="slds-grid slds-grid_align-spread slds-wrap">
          <div class="slds-col slds-no-flex">
            <button class="slds-button slds-button_neutral">Cancel</button>
          </div>
          <div class="slds-col slds-no-flex">
            <div class="slds-button-group" role="group">
              <button class="slds-button slds-button_neutral">Save Draft</button>
              <button class="slds-button slds-button_brand">Save &amp; Submit</button>
            </div>
          </div>
        </div>
      </div>
    description: "Docked footer with multiple action options"
  - title: "Docked Footer in Form Context"
    code: |
      <div class="slds-card">
        <div class="slds-card__header slds-grid">
          <header class="slds-media slds-media_center slds-has-flexi-truncate">
            <div class="slds-media__body">
              <h2 class="slds-card__header-title">
                <span>Edit Contact</span>
              </h2>
            </div>
          </header>
        </div>
        <div class="slds-card__body slds-card__body_inner" style="padding-bottom: 5rem;">
          <form>
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="input-01">
                <abbr class="slds-required" title="required">* </abbr>First Name
              </label>
              <div class="slds-form-element__control">
                <input type="text" id="input-01" class="slds-input" required />
              </div>
            </div>
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="input-02">
                <abbr class="slds-required" title="required">* </abbr>Last Name
              </label>
              <div class="slds-form-element__control">
                <input type="text" id="input-02" class="slds-input" required />
              </div>
            </div>
            <!-- More form fields... -->
          </form>
        </div>
      </div>
      <div class="slds-docked-form-footer">
        <button class="slds-button slds-button_neutral" type="button">Cancel</button>
        <button class="slds-button slds-button_brand" type="submit">Save</button>
      </div>
    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">
        <div class="slds-form-element__label slds-form-element__legend" id="dueling-picklist-label">
          Select Options
        </div>
        <div class="slds-form-element__control">
          <div class="slds-dueling-list">
            <div class="slds-dueling-list__column">
              <span class="slds-form-element__label">Available</span>
              <div class="slds-dueling-list__options" role="listbox" aria-multiselectable="true" aria-labelledby="available-label">
                <div role="option" aria-selected="false" tabindex="0">Option 1</div>
                <div role="option" aria-selected="false" tabindex="-1">Option 2</div>
                <div role="option" aria-selected="false" tabindex="-1">Option 3</div>
              </div>
            </div>
            <div class="slds-dueling-list__column">
              <button class="slds-button slds-button_neutral">Move Right</button>
              <button class="slds-button slds-button_neutral">Move Left</button>
            </div>
            <div class="slds-dueling-list__column">
              <span class="slds-form-element__label">Selected</span>
              <div class="slds-dueling-list__options" role="listbox" aria-multiselectable="true" aria-labelledby="selected-label">
                <div role="option" aria-selected="false" tabindex="0">Option 4</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    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">
        <div class="slds-form-element__label slds-form-element__legend" id="responsive-picklist-label">
          Select Options
        </div>
        <div class="slds-form-element__control">
          <div class="slds-dueling-list">
            <div class="slds-dueling-list__column slds-dueling-list__column_responsive">
              <span class="slds-form-element__label">Available</span>
              <div class="slds-dueling-list__options" role="listbox" aria-multiselectable="true">
                <div role="option" aria-selected="false" tabindex="0">Option 1</div>
                <div role="option" aria-selected="false" tabindex="-1">Option 2</div>
              </div>
            </div>
            <div class="slds-dueling-list__column">
              <button class="slds-button slds-button_neutral">Move Right</button>
              <button class="slds-button slds-button_neutral">Move Left</button>
            </div>
            <div class="slds-dueling-list__column slds-dueling-list__column_responsive">
              <span class="slds-form-element__label">Selected</span>
              <div class="slds-dueling-list__options" role="listbox" aria-multiselectable="true">
                <div role="option" aria-selected="false" tabindex="0">Option 3</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    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">
            <h3 class="slds-section__title">
              <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action">
                <svg class="slds-section__title-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                </svg>
                <span class="slds-truncate" title="Section Title">Section Title</span>
              </button>
            </h3>
            <div aria-hidden="false" class="slds-section__content" id="expando-unique-id">
              <p>This is the expandable content area. It can contain any type of content including text, forms, lists, or other components.</p>
            </div>
            </div>
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">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#user"></use>
            </svg>
  - title: "Icon with Container"
    code: |
      <span class="slds-icon_container slds-icon-standard-account">
            <svg class="slds-icon" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
            </svg>
            </span>
  - title: "Large Warning Icon"
    code: |
      <svg class="slds-icon slds-icon_large slds-icon-text-warning" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
            </svg>
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">
        <svg class="slds-illustration__svg" viewBox="0 0 468 194" aria-hidden="true">
          <g class="slds-illustration__stroke-primary">
            <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"/>
          </g>
          <g class="slds-illustration__fill-secondary">
            <path d="M234 180.5l-22.7-11.9 4.3 25.2 18.4-13.3z"/>
          </g>
        </svg>
        <h3 class="slds-illustration__header">No Items Found</h3>
        <p class="slds-text-body_regular">Start by creating your first item.</p>
      </div>
    description: "Small illustration for empty state with header and description"
  - title: "Large Illustration with Action"
    code: |
      <div class="slds-illustration slds-illustration_large">
        <svg class="slds-illustration__svg" viewBox="0 0 600 400" aria-hidden="true">
          <g class="slds-illustration__stroke-primary">
            <rect x="100" y="100" width="400" height="200" rx="8"/>
          </g>
          <g class="slds-illustration__fill-secondary">
            <circle cx="300" cy="200" r="50"/>
          </g>
        </svg>
        <h3 class="slds-illustration__header">Welcome to Your Dashboard</h3>
        <p class="slds-text-body_regular">Get started by adding your first widget.</p>
        <button class="slds-button slds-button_brand">Add Widget</button>
      </div>
    description: "Large illustration with header, description, and action button"
  - title: "Illustration with No Data State"
    code: |
      <div class="slds-illustration slds-illustration_small">
        <svg class="slds-illustration__svg" viewBox="0 0 300 200" aria-hidden="true">
          <g class="slds-illustration__fill-primary">
            <path d="M150 50 L250 150 L50 150 Z"/>
          </g>
          <g class="slds-illustration__stroke-secondary">
            <line x1="150" y1="70" x2="150" y2="130" stroke-width="3"/>
            <line x1="130" y1="150" x2="170" y2="150" stroke-width="3"/>
          </g>
        </svg>
        <div class="slds-text-longform">
          <h3 class="slds-illustration__header slds-text-heading_medium">
            No Records to Display
          </h3>
          <p class="slds-text-body_regular">
            When you have records, they'll appear here.
          </p>
        </div>
      </div>
    description: "Illustration communicating no data available"
  - title: "Error State Illustration"
    code: |
      <div class="slds-illustration slds-illustration_small">
        <svg class="slds-illustration__svg" viewBox="0 0 300 200" role="img" aria-labelledby="error-title">
          <title id="error-title">Error occurred</title>
          <g class="slds-illustration__stroke-primary">
            <circle cx="150" cy="100" r="40" fill="none" stroke-width="3"/>
            <line x1="130" y1="80" x2="170" y2="120" stroke-width="3"/>
            <line x1="170" y1="80" x2="130" y2="120" stroke-width="3"/>
          </g>
        </svg>
        <h3 class="slds-illustration__header">Something Went Wrong</h3>
        <p class="slds-text-body_regular">
          We couldn't complete your request. Please try again.
        </p>
        <button class="slds-button slds-button_neutral">Try Again</button>
      </div>
    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">
        <label class="slds-form-element__label" for="text-input-id-1">
          <abbr class="slds-required" title="required">* </abbr>Text Input Label
        </label>
        <div class="slds-form-element__control">
          <input type="text" id="text-input-id-1" class="slds-input" placeholder="Enter text..." required />
        </div>
      </div>
    description: "Basic text input with label"
  - title: "Input with Error"
    code: |
      <div class="slds-form-element slds-has-error">
        <label class="slds-form-element__label" for="text-input-error">
          <abbr class="slds-required" title="required">* </abbr>Text Input Label
        </label>
        <div class="slds-form-element__control">
          <input type="text" id="text-input-error" class="slds-input" aria-describedby="text-input-error-message" required />
        </div>
        <div id="text-input-error-message" class="slds-form-element__help">This field is required</div>
      </div>
    description: "Input with error state and validation message"
  - title: "Number Input"
    code: |
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="number-input-id">Number Input Label</label>
        <div class="slds-form-element__control">
          <input type="number" id="number-input-id" class="slds-input" placeholder="Enter number..." />
        </div>
      </div>
    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">
            <div class="slds-modal__container">
              <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                  <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
                  </svg>
                  <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal Header</h2>
              </header>
              <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
                <p>Modal body content goes here...</p>
              </div>
              <footer class="slds-modal__footer">
                <button class="slds-button slds-button_neutral">Cancel</button>
                <button class="slds-button slds-button_brand">Save</button>
              </footer>
            </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
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">
            <div class="slds-path__track">
              <div class="slds-grid slds-path__scroller-container">
                <div class="slds-path__scroller" role="application">
                  <div class="slds-path__scroller_inner">
                    <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
                      <li class="slds-path__item slds-is-complete" role="presentation">
                        <a aria-selected="false" class="slds-path__link" href="#" role="option" tabindex="-1">
                          <span class="slds-path__stage">
                            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg>
                          </span>
                          <span class="slds-path__title">Contacted</span>
                        </a>
                      </li>
                      <li class="slds-path__item slds-is-current" role="presentation">
                        <a aria-selected="true" class="slds-path__link" href="#" role="option" tabindex="0">
                          <span class="slds-path__stage">
                            <span class="slds-assistive-text">Current Stage:</span>
                          </span>
                          <span class="slds-path__title">Open</span>
                        </a>
                      </li>
                      <li class="slds-path__item slds-is-incomplete" role="presentation">
                        <a aria-selected="false" class="slds-path__link" href="#" role="option" tabindex="-1">
                          <span class="slds-path__stage">
                            <span class="slds-assistive-text">Stage Complete</span>
                          </span>
                          <span class="slds-path__title">Unqualified</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            </div>
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">
            <a href="#" class="slds-pill__action" title="Full pill label verbiage mirrored here">
              <span class="slds-pill__label">Pill Label</span>
            </a>
            <button class="slds-button slds-button_icon slds-button_icon-bare slds-pill__remove" title="Remove">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
              </svg>
              <span class="slds-assistive-text">Remove</span>
            </button>
            </span>
  - title: "Pill with Icon"
    code: |
      <span class="slds-pill">
            <span class="slds-pill__icon_container">
              <span class="slds-icon_container slds-icon-standard-account">
                <svg class="slds-icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
              </span>
            </span>
            <a href="#" class="slds-pill__action" title="Account: Acme Corporation">
              <span class="slds-pill__label">Acme Corporation</span>
            </a>
            <button class="slds-button slds-button_icon slds-button_icon-bare slds-pill__remove" title="Remove">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
              </svg>
              <span class="slds-assistive-text">Remove</span>
            </button>
            </span>
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">
            <div class="slds-popover__body">
              <p>This is helpful contextual information about the element.</p>
            </div>
            </div>
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%">
            <span class="slds-progress-bar__value" style="width: 25%;">
              <span class="slds-assistive-text">Progress: 25%</span>
            </span>
            </div>
  - 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%">
            <span class="slds-progress-bar__value" style="width: 75%;">
              <span class="slds-assistive-text">Upload progress: 75%</span>
            </span>
            </div>
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">
        <label for="publisher-textarea" class="slds-assistive-text">Write a post</label>
        <textarea id="publisher-textarea" class="slds-publisher__input slds-textarea" placeholder="What's on your mind?"></textarea>
        <div class="slds-publisher__actions slds-grid slds-grid_align-spread">
          <ul class="slds-grid">
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" title="Attach a file">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#attach"></use>
                </svg>
                <span class="slds-assistive-text">Attach a file</span>
              </button>
            </li>
          </ul>
          <button class="slds-button slds-button_brand">Post</button>
        </div>
      </div>
    description: "Basic publisher with text input and post button"
  - title: "Publisher with Formatting Options"
    code: |
      <div class="slds-publisher slds-is-active">
        <label for="rich-publisher-textarea" class="slds-assistive-text">Write a post</label>
        <textarea id="rich-publisher-textarea" class="slds-publisher__input slds-textarea" placeholder="Share your thoughts..."></textarea>
        <div class="slds-publisher__actions slds-grid slds-grid_align-spread">
          <ul class="slds-grid slds-grid_vertical-align-center">
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" title="Bold">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold"></use>
                </svg>
                <span class="slds-assistive-text">Bold</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" title="Italic">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#italic"></use>
                </svg>
                <span class="slds-assistive-text">Italic</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" title="Link">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#link"></use>
                </svg>
                <span class="slds-assistive-text">Insert link</span>
              </button>
            </li>
          </ul>
          <div class="slds-grid">
            <button class="slds-button slds-button_neutral slds-m-right_x-small">Cancel</button>
            <button class="slds-button slds-button_brand">Publish</button>
          </div>
        </div>
      </div>
    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">
        <legend class="slds-form-element__legend slds-form-element__label">
          Select an Option
        </legend>
        <div class="slds-form-element__control">
          <div class="slds-radio_button-group">
            <span class="slds-button slds-radio_button">
              <input type="radio" name="radio-group" id="radio-1" value="option1" />
              <label class="slds-radio_button__label" for="radio-1">
                <span class="slds-radio_faux">Option 1</span>
              </label>
            </span>
            <span class="slds-button slds-radio_button">
              <input type="radio" name="radio-group" id="radio-2" value="option2" />
              <label class="slds-radio_button__label" for="radio-2">
                <span class="slds-radio_faux">Option 2</span>
              </label>
            </span>
            <span class="slds-button slds-radio_button">
              <input type="radio" name="radio-group" id="radio-3" value="option3" />
              <label class="slds-radio_button__label" for="radio-3">
                <span class="slds-radio_faux">Option 3</span>
              </label>
            </span>
          </div>
        </div>
      </fieldset>
    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">
        <legend class="slds-form-element__legend slds-form-element__label">
          <abbr class="slds-required" title="required">*</abbr> Select an Option
        </legend>
        <div class="slds-form-element__control">
          <div class="slds-radio_button-group">
            <span class="slds-button slds-radio_button">
              <input type="radio" name="radio-error" id="radio-error-1" value="option1" aria-describedby="radio-error-message" />
              <label class="slds-radio_button__label" for="radio-error-1">
                <span class="slds-radio_faux">Option 1</span>
              </label>
            </span>
            <span class="slds-button slds-radio_button">
              <input type="radio" name="radio-error" id="radio-error-2" value="option2" />
              <label class="slds-radio_button__label" for="radio-error-2">
                <span class="slds-radio_faux">Option 2</span>
              </label>
            </span>
          </div>
        </div>
        <div id="radio-error-message" class="slds-form-element__help">This field is required</div>
      </fieldset>
    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">
        <div class="slds-media__figure">
          <svg class="slds-icon slds-icon_small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
          </svg>
        </div>
        <div class="slds-media__body">
          <p>This is an informational notification.</p>
        </div>
      </div>
    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">
        <div class="slds-media__figure">
          <svg class="slds-icon slds-icon_small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
          </svg>
        </div>
        <div class="slds-media__body">
          <p>Your changes have been saved successfully.</p>
        </div>
      </div>
    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">
        <div class="slds-media__figure">
          <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
          </svg>
        </div>
        <div class="slds-media__body">
          <p>This is a light theme notification. <a href="#">Learn more</a></p>
        </div>
      </div>
    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">
        <label class="slds-form-element__label" for="select-01">
          <abbr class="slds-required" title="required">* </abbr>Select Label
        </label>
        <div class="slds-form-element__control">
          <div class="slds-select_container">
            <select class="slds-select" id="select-01" required>
              <option value="">Choose one...</option>
              <option value="option1">Option One</option>
              <option value="option2">Option Two</option>
              <option value="option3">Option Three</option>
            </select>
          </div>
        </div>
      </div>
    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">
            <label class="slds-form-element__label" for="slider-id-01">Slider Label</label>
            <div class="slds-form-element__control">
              <div class="slds-slider">
                <input type="range" id="slider-id-01" class="slds-slider__range" value="50" min="0" max="100" step="1" />
                <span class="slds-slider__value" aria-hidden="true">50</span>
              </div>
            </div>
            </div>
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">
            <span class="slds-assistive-text">Loading...</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
            </div>
  - title: "Small Inline Spinner"
    code: |
      <div class="slds-text-body_regular">
            Loading data <div role="status" class="slds-spinner slds-spinner_xx-small slds-spinner_inline">
              <span class="slds-assistive-text">Loading</span>
              <div class="slds-spinner__dot-a"></div>
              <div class="slds-spinner__dot-b"></div>
            </div>
            </div>
  - title: "Large Loading Spinner"
    code: |
      <div role="status" class="slds-spinner slds-spinner_large">
            <span class="slds-assistive-text">Loading page content...</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
            </div>
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">
            <ul class="slds-tabs_default__nav" role="tablist">
              <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation">
                <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>
              </li>
              <li class="slds-tabs_default__item" title="Item Two" role="presentation">
                <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>
              </li>
              <li class="slds-tabs_default__item" title="Item Three" role="presentation">
                <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>
              </li>
            </ul>
            <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
              <h2>Item One Content</h2>
              <p>Content for the first tab goes here...</p>
            </div>
            <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
              <h2>Item Two Content</h2>
              <p>Content for the second tab goes here...</p>
            </div>
            <div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
              <h2>Item Three Content</h2>
              <p>Content for the third tab goes here...</p>
            </div>
            </div>
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">
            <label class="slds-form-element__label" for="textarea-id-01">
              <abbr class="slds-required" title="required">* </abbr>Textarea Label
            </label>
            <div class="slds-form-element__control">
              <textarea id="textarea-id-01" class="slds-textarea" placeholder="Enter your comments..." required></textarea>
            </div>
            </div>
  - title: "Textarea with Error"
    code: |
      <div class="slds-form-element slds-has-error">
            <label class="slds-form-element__label" for="textarea-error">
              <abbr class="slds-required" title="required">* </abbr>Textarea Label
            </label>
            <div class="slds-form-element__control">
              <textarea id="textarea-error" class="slds-textarea" aria-describedby="textarea-error-message" required></textarea>
            </div>
            <div id="textarea-error-message" class="slds-form-element__help">This field is required</div>
            </div>
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">
            <div class="slds-tooltip__body">This is helpful information about the element.</div>
            </div>
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">
            <div class="slds-nav-vertical__section">
              <h2 class="slds-nav-vertical__title">Section One</h2>
              <ul>
                <li class="slds-nav-vertical__item slds-is-active">
                  <a href="#" class="slds-nav-vertical__action" aria-current="page">
                    Current Page
                  </a>
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#" class="slds-nav-vertical__action">
                    Navigation Item
                  </a>
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#" class="slds-nav-vertical__action">
                    Another Item
                  </a>
                </li>
              </ul>
            </div>
            </nav>
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.'

{
  "version": "2.1.0",
  "generated_at": "2026-02-26T04:40:06.059079+00:00",
  "source": "globalStylingHooks.metadata.json + slds-plus-feb25.css",
  "total_hooks": 523,
  "global": {
    "namespace": "slds",
    "scope": "global",
    "default_properties": [
      "background-color",
      "color",
      "border-color",
      "fill"
    ]
  },
  "categories": {
    "color": 325,
    "duration": 8,
    "font": 57,
    "fontFamily": 3,
    "radius": 6,
    "ratio": 5,
    "shadow": 44,
    "sizing": 27,
    "spacing": 48
  },
  "hooks": [
    {
      "token": "--slds-g-color-accent-1",
      "category": "color",
      "external": true,
      "description": "Emphasis color for large text and icon fills.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#066afe"
    },
    {
      "token": "--slds-g-color-accent-2",
      "category": "color",
      "external": true,
      "description": "Emphasis color for text, links, and icon color fills. Hover state color for interactive elements.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#0250d9",
      "value_dark": "#7cb1fe"
    },
    {
      "token": "--slds-g-color-accent-3",
      "category": "color",
      "external": true,
      "description": "Emphasis color for text, links, and icon alternative colors. Hover state color for interactive elements.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#022ac0",
      "value_dark": "#a8cbff"
    },
    {
      "token": "--slds-g-color-accent-container-1",
      "category": "color",
      "external": true,
      "description": "Background fill for containers that emphasize branded component and interactive elements such as Brand buttons. Always pair with on-accent-1.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#066afe"
    },
    {
      "token": "--slds-g-color-accent-container-2",
      "category": "color",
      "external": true,
      "description": "Background fill on hover state for containers that emphasize branded component and interactive elements such as Brand buttons. Always pair with on-accent-2.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#0250d9",
      "value_dark": "#d6e6ff"
    },
    {
      "token": "--slds-g-color-accent-container-3",
      "category": "color",
      "external": true,
      "description": "Alternative background fill on hover state for containers that emphasize branded component and interactive elements such as Brand buttons. Always pair with on-accent-3.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#022ac0",
      "value_dark": "#a8cbff"
    },
    {
      "token": "--slds-g-color-border-1",
      "category": "color",
      "external": true,
      "description": "Borders for decorative components or divider lines between content.",
      "properties": [
        "border-color"
      ],
      "value": "#c9c9c9",
      "value_dark": "#444"
    },
    {
      "token": "--slds-g-color-border-2",
      "category": "color",
      "external": true,
      "description": "Border for functional or interactive components.",
      "properties": [
        "border-color"
      ],
      "value": "#5c5c5c",
      "value_dark": "#757575"
    },
    {
      "token": "--slds-g-color-border-accent-1",
      "category": "color",
      "external": true,
      "description": "Border color for branded containers.",
      "properties": [
        "border-color"
      ],
      "value": "#066afe"
    },
    {
      "token": "--slds-g-color-border-accent-2",
      "category": "color",
      "external": true,
      "description": "Border color for branded containers.",
      "properties": [
        "border-color"
      ],
      "value": "#0250d9",
      "value_dark": "#7cb1fe"
    },
    {
      "token": "--slds-g-color-border-accent-3",
      "category": "color",
      "external": true,
      "description": "Hover border color for branded containers.",
      "properties": [
        "border-color"
      ],
      "value": "#022ac0",
      "value_dark": "#a8cbff"
    },
    {
      "token": "--slds-g-color-border-disabled-1",
      "category": "color",
      "external": true,
      "description": "Border color for disabled containers (border-2 becomes border-disabled-1 for disabled states).",
      "properties": [
        "border-color"
      ],
      "value": "#757575"
    },
    {
      "token": "--slds-g-color-border-disabled-2",
      "category": "color",
      "external": true,
      "description": "Border color for disabled UI elements. This is one step darker than disabled-border-1.",
      "properties": [
        "border-color"
      ],
      "value": "#5c5c5c",
      "value_dark": "#939393"
    },
    {
      "token": "--slds-g-color-border-error-1",
      "category": "color",
      "external": true,
      "description": "Border color for error containers such as destructive buttons.",
      "properties": [
        "border-color"
      ],
      "value": "#b60554",
      "value_dark": "#fe8aa7"
    },
    {
      "token": "--slds-g-color-border-error-2",
      "category": "color",
      "external": true,
      "description": "Hover border color for error containers such as destructive buttons.",
      "properties": [
        "border-color"
      ],
      "value": "#8a033e",
      "value_dark": "#fdb6c5"
    },
    {
      "token": "--slds-g-color-border-inverse-1",
      "category": "color",
      "external": true,
      "description": "Border for functional or interactive components on dark backgrounds.",
      "properties": [
        "border-color"
      ],
      "value": "#f3f3f3",
      "value_dark": "#181818"
    },
    {
      "token": "--slds-g-color-border-inverse-2",
      "category": "color",
      "external": true,
      "description": "Borders for decorative components or divider lines between content on dark backgrounds.",
      "properties": [
        "border-color"
      ],
      "value": "#032d60",
      "value_dark": "#aacbff"
    },
    {
      "token": "--slds-g-color-border-success-1",
      "category": "color",
      "external": true,
      "description": "Step 1 in the Border Success scale for colors that define the borders of success containers.",
      "properties": [
        "border-color"
      ],
      "value": "#056764",
      "value_dark": "#06a59a"
    },
    {
      "token": "--slds-g-color-border-success-2",
      "category": "color",
      "external": true,
      "description": "Step 2 in the Border Success scale for colors that define the borders of success containers.",
      "properties": [
        "border-color"
      ],
      "value": "#024d4c",
      "value_dark": "#01c3b3"
    },
    {
      "token": "--slds-g-color-border-warning-1",
      "category": "color",
      "external": true,
      "description": "Step 1 in the Border Warning scale for colors that define the borders of warning containers.",
      "properties": [
        "border-color"
      ],
      "value": "#dd7a01",
      "value_dark": "#e4a201"
    },
    {
      "token": "--slds-g-color-brand-base-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001642",
      "value_dark": "#d6e6ff"
    },
    {
      "token": "--slds-g-color-brand-base-100",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#000"
    },
    {
      "token": "--slds-g-color-brand-base-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001e5b",
      "value_dark": "#c2daff"
    },
    {
      "token": "--slds-g-color-brand-base-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#002775",
      "value_dark": "#a8cbff"
    },
    {
      "token": "--slds-g-color-brand-base-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#022ac0",
      "value_dark": "#7cb1fe"
    },
    {
      "token": "--slds-g-color-brand-base-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0250d9",
      "value_dark": "#4992fe"
    },
    {
      "token": "--slds-g-color-brand-base-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#066afe"
    },
    {
      "token": "--slds-g-color-brand-base-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4992fe",
      "value_dark": "#0250d9"
    },
    {
      "token": "--slds-g-color-brand-base-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#5f9ffe",
      "value_dark": "#003ecd"
    },
    {
      "token": "--slds-g-color-brand-base-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#7cb1fe",
      "value_dark": "#022ac0"
    },
    {
      "token": "--slds-g-color-brand-base-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#a8cbff",
      "value_dark": "#002775"
    },
    {
      "token": "--slds-g-color-brand-base-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d6e6ff",
      "value_dark": "#001642"
    },
    {
      "token": "--slds-g-color-brand-base-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#edf4ff",
      "value_dark": "#000314"
    },
    {
      "token": "--slds-g-color-disabled-1",
      "category": "color",
      "external": true,
      "description": "Fill color fo text and icons in disabled components or with disabled content.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#757575"
    },
    {
      "token": "--slds-g-color-disabled-2",
      "category": "color",
      "external": true,
      "description": "Color denoting disabled UI elements. This is one step darker than disabled-1.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#5c5c5c",
      "value_dark": "#939393"
    },
    {
      "token": "--slds-g-color-disabled-container-1",
      "category": "color",
      "external": true,
      "description": "Disabled container background fill for white components. Always pair with on-disabled-1.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#e5e5e5",
      "value_dark": "#2e2e2e"
    },
    {
      "token": "--slds-g-color-disabled-container-2",
      "category": "color",
      "external": true,
      "description": "Disabled container background fill for grey components. Always pair with on-disabled-2.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#c9c9c9",
      "value_dark": "#444"
    },
    {
      "token": "--slds-g-color-error-1",
      "category": "color",
      "external": true,
      "description": "Fill color for text and icons displaying an error.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#b60554",
      "value_dark": "#fe8aa7"
    },
    {
      "token": "--slds-g-color-error-base-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#370114",
      "value_dark": "#fddde3"
    },
    {
      "token": "--slds-g-color-error-base-100",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#000"
    },
    {
      "token": "--slds-g-color-error-base-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4b0620",
      "value_dark": "#fec8d4"
    },
    {
      "token": "--slds-g-color-error-base-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#61022a",
      "value_dark": "#fdb6c5"
    },
    {
      "token": "--slds-g-color-error-base-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#8a033e",
      "value_dark": "#fe8aa7"
    },
    {
      "token": "--slds-g-color-error-base-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#b60554",
      "value_dark": "#ff538a"
    },
    {
      "token": "--slds-g-color-error-base-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e3066a"
    },
    {
      "token": "--slds-g-color-error-base-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ff538a",
      "value_dark": "#b60554"
    },
    {
      "token": "--slds-g-color-error-base-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe7298",
      "value_dark": "#a00449"
    },
    {
      "token": "--slds-g-color-error-base-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe8aa7",
      "value_dark": "#8a033e"
    },
    {
      "token": "--slds-g-color-error-base-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fdb6c5",
      "value_dark": "#61022a"
    },
    {
      "token": "--slds-g-color-error-base-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fddde3",
      "value_dark": "#370114"
    },
    {
      "token": "--slds-g-color-error-base-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fef0f3",
      "value_dark": "#0f0003"
    },
    {
      "token": "--slds-g-color-error-container-1",
      "category": "color",
      "external": true,
      "description": "Container background fill for error components such as toast or alerts. Always pair with on-error-1.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#fddde3",
      "value_dark": "#8a033e"
    },
    {
      "token": "--slds-g-color-error-container-2",
      "category": "color",
      "external": true,
      "description": "Container background fill for error components such as destructive buttons. Always pair with on-error-2.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#fdb6c5",
      "value_dark": "#b60554"
    },
    {
      "token": "--slds-g-color-info-1",
      "category": "color",
      "external": true,
      "description": "Step 1 in the Info scale for colors that define the info colors.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#0b5cab",
      "value_dark": "#78b0fd"
    },
    {
      "token": "--slds-g-color-info-base-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001639",
      "value_dark": "#d8e6fe"
    },
    {
      "token": "--slds-g-color-info-base-100",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#000"
    },
    {
      "token": "--slds-g-color-info-base-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#03234d",
      "value_dark": "#c2d8ff"
    },
    {
      "token": "--slds-g-color-info-base-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#032d60",
      "value_dark": "#aacbff"
    },
    {
      "token": "--slds-g-color-info-base-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#014486",
      "value_dark": "#78b0fd"
    },
    {
      "token": "--slds-g-color-info-base-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0b5cab",
      "value_dark": "#1b96ff"
    },
    {
      "token": "--slds-g-color-info-base-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0176d3"
    },
    {
      "token": "--slds-g-color-info-base-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#1b96ff",
      "value_dark": "#0b5cab"
    },
    {
      "token": "--slds-g-color-info-base-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#57a3fd",
      "value_dark": "#044f98"
    },
    {
      "token": "--slds-g-color-info-base-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#78b0fd",
      "value_dark": "#014486"
    },
    {
      "token": "--slds-g-color-info-base-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#aacbff",
      "value_dark": "#032d60"
    },
    {
      "token": "--slds-g-color-info-base-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d8e6fe",
      "value_dark": "#001639"
    },
    {
      "token": "--slds-g-color-info-base-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#eef4ff",
      "value_dark": "#000310"
    },
    {
      "token": "--slds-g-color-info-container-1",
      "category": "color",
      "external": true,
      "description": "Step 1 in the Info Container scale for colors that define the info containers.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#d8e6fe",
      "value_dark": "#014486"
    },
    {
      "token": "--slds-g-color-neutral-base-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#181818",
      "value_dark": "#e5e5e5"
    },
    {
      "token": "--slds-g-color-neutral-base-100",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#000"
    },
    {
      "token": "--slds-g-color-neutral-base-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#242424",
      "value_dark": "#d7d7d7"
    },
    {
      "token": "--slds-g-color-neutral-base-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#2e2e2e",
      "value_dark": "#c9c9c9"
    },
    {
      "token": "--slds-g-color-neutral-base-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#444",
      "value_dark": "#aeaeae"
    },
    {
      "token": "--slds-g-color-neutral-base-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#5c5c5c",
      "value_dark": "#939393"
    },
    {
      "token": "--slds-g-color-neutral-base-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#757575"
    },
    {
      "token": "--slds-g-color-neutral-base-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#939393",
      "value_dark": "#5c5c5c"
    },
    {
      "token": "--slds-g-color-neutral-base-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#a0a0a0",
      "value_dark": "#515151"
    },
    {
      "token": "--slds-g-color-neutral-base-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#aeaeae",
      "value_dark": "#444"
    },
    {
      "token": "--slds-g-color-neutral-base-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#c9c9c9",
      "value_dark": "#2e2e2e"
    },
    {
      "token": "--slds-g-color-neutral-base-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e5e5e5",
      "value_dark": "#181818"
    },
    {
      "token": "--slds-g-color-neutral-base-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f3f3f3",
      "value_dark": "#020202"
    },
    {
      "token": "--slds-g-color-on-accent-1",
      "category": "color",
      "external": true,
      "description": "Text and icon fill color displayed on branded containers. Always pair with on-accent-container-1.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#fff"
    },
    {
      "token": "--slds-g-color-on-accent-2",
      "category": "color",
      "external": true,
      "description": "Text and icon fill color displayed on branded containers. Always pair with on-accent-container-2.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#0250d9"
    },
    {
      "token": "--slds-g-color-on-accent-3",
      "category": "color",
      "external": true,
      "description": "Text and icon fill color displayed on branded containers. Always pair with on-accent-container-3.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#022ac0"
    },
    {
      "token": "--slds-g-color-on-disabled-1",
      "category": "color",
      "external": true,
      "description": "Fill color for text and icons displayed within disabled-container-1 (netural-100). Always pair with disabled-container-1.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#757575"
    },
    {
      "token": "--slds-g-color-on-disabled-2",
      "category": "color",
      "external": true,
      "description": "Fill color for text and icons displayed within disabled-container-2 (neutral-80). Always pair with disabled-container-2.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#757575",
      "value_dark": "#939393"
    },
    {
      "token": "--slds-g-color-on-error-1",
      "category": "color",
      "external": true,
      "description": "Fill color for text and icons displayed within an error container. Always pair with error-container-1.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#b60554",
      "value_dark": "#fddde3"
    },
    {
      "token": "--slds-g-color-on-error-2",
      "category": "color",
      "external": true,
      "description": "Fill color for text and icons displayed within an error container. Always pair with error-container-2.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#8a033e",
      "value_dark": "#fef0f3"
    },
    {
      "token": "--slds-g-color-on-info-1",
      "category": "color",
      "external": true,
      "description": "Step 1 in the On Info scale for colors that define the on info colors.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#0b5cab",
      "value_dark": "#d8e6fe"
    },
    {
      "token": "--slds-g-color-on-success-1",
      "category": "color",
      "external": true,
      "description": "Step 1 in the On Success scale for colors that define the on success colors.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#056764",
      "value_dark": "#acf3e4"
    },
    {
      "token": "--slds-g-color-on-success-2",
      "category": "color",
      "external": true,
      "description": "Step 2 in the On Success scale for colors that define the on success colors.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#023434",
      "value_dark": "#04e1cb"
    },
    {
      "token": "--slds-g-color-on-surface-1",
      "category": "color",
      "external": true,
      "description": "Lightest text and icon fill. Used for body text, placeholder text, field labels, sub-headings, and taglines.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#5c5c5c",
      "value_dark": "#aeaeae"
    },
    {
      "token": "--slds-g-color-on-surface-2",
      "category": "color",
      "external": true,
      "description": "Darker text and icon fills used for secondary and tertiary headings, dark body copy, and filled input fields.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#2e2e2e",
      "value_dark": "#e5e5e5"
    },
    {
      "token": "--slds-g-color-on-surface-3",
      "category": "color",
      "external": true,
      "description": "Darkest text and icon fill used for title and pages or components.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#03234d",
      "value_dark": "#d8e6fe"
    },
    {
      "token": "--slds-g-color-on-surface-inverse-1",
      "category": "color",
      "external": true,
      "description": "Lightest text and icon fill on dark backgrounds. Always pair with surface-inverse-1 or surface-container-inverse-1.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#181818"
    },
    {
      "token": "--slds-g-color-on-surface-inverse-2",
      "category": "color",
      "external": true,
      "description": "Darker text and icon fill on dark backgrounds (50 to 100). Always pair with surface-inverse-2 or surface-container-inverse-2.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#a8cbff",
      "value_dark": "#002775"
    },
    {
      "token": "--slds-g-color-on-warning-1",
      "category": "color",
      "external": true,
      "description": "Step 1 in the On Warning scale.",
      "properties": [
        "color",
        "fill"
      ],
      "value": "#8c4b02",
      "value_dark": "#f9e3b6"
    },
    {
      "token": "--slds-g-color-palette-blue-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001639",
      "value_dark": "#d8e6fe"
    },
    {
      "token": "--slds-g-color-palette-blue-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#03234d",
      "value_dark": "#c2d8ff"
    },
    {
      "token": "--slds-g-color-palette-blue-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#032d60",
      "value_dark": "#aacbff"
    },
    {
      "token": "--slds-g-color-palette-blue-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#014486",
      "value_dark": "#78b0fd"
    },
    {
      "token": "--slds-g-color-palette-blue-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0b5cab",
      "value_dark": "#1b96ff"
    },
    {
      "token": "--slds-g-color-palette-blue-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0176d3"
    },
    {
      "token": "--slds-g-color-palette-blue-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#1b96ff",
      "value_dark": "#0b5cab"
    },
    {
      "token": "--slds-g-color-palette-blue-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#57a3fd",
      "value_dark": "#044f98"
    },
    {
      "token": "--slds-g-color-palette-blue-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#78b0fd",
      "value_dark": "#014486"
    },
    {
      "token": "--slds-g-color-palette-blue-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#aacbff",
      "value_dark": "#032d60"
    },
    {
      "token": "--slds-g-color-palette-blue-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d8e6fe",
      "value_dark": "#001639"
    },
    {
      "token": "--slds-g-color-palette-blue-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#eef4ff",
      "value_dark": "#000310"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001a28",
      "value_dark": "#cfe9fe"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0a2636",
      "value_dark": "#aeddfe"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#023248",
      "value_dark": "#90d0fe"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#084968",
      "value_dark": "#1ab9ff"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#05628a",
      "value_dark": "#0d9dda"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#107cad"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0d9dda",
      "value_dark": "#05628a"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#08abed",
      "value_dark": "#075579"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#1ab9ff",
      "value_dark": "#084968"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#90d0fe",
      "value_dark": "#023248"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#cfe9fe",
      "value_dark": "#001a28"
    },
    {
      "token": "--slds-g-color-palette-cloud-blue-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#eaf5fe",
      "value_dark": "#000409"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001642",
      "value_dark": "#d6e6ff"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001e5b",
      "value_dark": "#c2daff"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#002775",
      "value_dark": "#a8cbff"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#022ac0",
      "value_dark": "#7cb1fe"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0250d9",
      "value_dark": "#4992fe"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#066afe"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4992fe",
      "value_dark": "#0250d9"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#5f9ffe",
      "value_dark": "#003ecd"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#7cb1fe",
      "value_dark": "#022ac0"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#a8cbff",
      "value_dark": "#002775"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d6e6ff",
      "value_dark": "#001642"
    },
    {
      "token": "--slds-g-color-palette-electric-blue-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#edf4ff",
      "value_dark": "#000314"
    },
    {
      "token": "--slds-g-color-palette-green-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#071b12",
      "value_dark": "#cdefc4"
    },
    {
      "token": "--slds-g-color-palette-green-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0c2912",
      "value_dark": "#aee4a9"
    },
    {
      "token": "--slds-g-color-palette-green-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#143b25",
      "value_dark": "#91db8b"
    },
    {
      "token": "--slds-g-color-palette-green-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#194e31",
      "value_dark": "#45c65a"
    },
    {
      "token": "--slds-g-color-palette-green-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#396547",
      "value_dark": "#3ba755"
    },
    {
      "token": "--slds-g-color-palette-green-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#2e844a"
    },
    {
      "token": "--slds-g-color-palette-green-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#3ba755",
      "value_dark": "#396547"
    },
    {
      "token": "--slds-g-color-palette-green-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#41b658",
      "value_dark": "#1e5c39"
    },
    {
      "token": "--slds-g-color-palette-green-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#45c65a",
      "value_dark": "#194e31"
    },
    {
      "token": "--slds-g-color-palette-green-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#91db8b",
      "value_dark": "#143b25"
    },
    {
      "token": "--slds-g-color-palette-green-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#cdefc4",
      "value_dark": "#071b12"
    },
    {
      "token": "--slds-g-color-palette-green-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ebf7e6",
      "value_dark": "#010502"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#281202",
      "value_dark": "#ffded5"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#421604",
      "value_dark": "#feccbd"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4a2413",
      "value_dark": "#feb9a5"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#7e2600",
      "value_dark": "#ff906e"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#aa3001",
      "value_dark": "#ff5d2d"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d83a00"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ff5d2d",
      "value_dark": "#aa3001"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ff784f",
      "value_dark": "#942b00"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ff906e",
      "value_dark": "#7e2600"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#feb9a5",
      "value_dark": "#4a2413"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ffded5",
      "value_dark": "#281202"
    },
    {
      "token": "--slds-g-color-palette-hot-orange-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fef1ed",
      "value_dark": "#090200"
    },
    {
      "token": "--slds-g-color-palette-indigo-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#17094e",
      "value_dark": "#e0e5f8"
    },
    {
      "token": "--slds-g-color-palette-indigo-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#1f0974",
      "value_dark": "#cfd4f7"
    },
    {
      "token": "--slds-g-color-palette-indigo-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#270c92",
      "value_dark": "#bec7f6"
    },
    {
      "token": "--slds-g-color-palette-indigo-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#2f2cb7",
      "value_dark": "#9ea9f1"
    },
    {
      "token": "--slds-g-color-palette-indigo-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#3a49da",
      "value_dark": "#7f8ced"
    },
    {
      "token": "--slds-g-color-palette-indigo-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#5867e8"
    },
    {
      "token": "--slds-g-color-palette-indigo-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#7f8ced",
      "value_dark": "#3a49da"
    },
    {
      "token": "--slds-g-color-palette-indigo-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#8e9bef",
      "value_dark": "#343bc8"
    },
    {
      "token": "--slds-g-color-palette-indigo-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#9ea9f1",
      "value_dark": "#2f2cb7"
    },
    {
      "token": "--slds-g-color-palette-indigo-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#bec7f6",
      "value_dark": "#270c92"
    },
    {
      "token": "--slds-g-color-palette-indigo-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e0e5f8",
      "value_dark": "#17094e"
    },
    {
      "token": "--slds-g-color-palette-indigo-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f1f3fb",
      "value_dark": "#060116"
    },
    {
      "token": "--slds-g-color-palette-neutral-0",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#000",
      "value_dark": "#fff"
    },
    {
      "token": "--slds-g-color-palette-neutral-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#181818",
      "value_dark": "#e5e5e5"
    },
    {
      "token": "--slds-g-color-palette-neutral-100",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#000"
    },
    {
      "token": "--slds-g-color-palette-neutral-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#242424",
      "value_dark": "#d7d7d7"
    },
    {
      "token": "--slds-g-color-palette-neutral-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#2e2e2e",
      "value_dark": "#c9c9c9"
    },
    {
      "token": "--slds-g-color-palette-neutral-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#444",
      "value_dark": "#aeaeae"
    },
    {
      "token": "--slds-g-color-palette-neutral-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#5c5c5c",
      "value_dark": "#939393"
    },
    {
      "token": "--slds-g-color-palette-neutral-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#757575"
    },
    {
      "token": "--slds-g-color-palette-neutral-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#939393",
      "value_dark": "#5c5c5c"
    },
    {
      "token": "--slds-g-color-palette-neutral-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#a0a0a0",
      "value_dark": "#515151"
    },
    {
      "token": "--slds-g-color-palette-neutral-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#aeaeae",
      "value_dark": "#444"
    },
    {
      "token": "--slds-g-color-palette-neutral-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#c9c9c9",
      "value_dark": "#2e2e2e"
    },
    {
      "token": "--slds-g-color-palette-neutral-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e5e5e5",
      "value_dark": "#181818"
    },
    {
      "token": "--slds-g-color-palette-neutral-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f3f3f3",
      "value_dark": "#020202"
    },
    {
      "token": "--slds-g-color-palette-orange-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#201600",
      "value_dark": "#fedfd0"
    },
    {
      "token": "--slds-g-color-palette-orange-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#2e2204",
      "value_dark": "#ffccad"
    },
    {
      "token": "--slds-g-color-palette-orange-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#3e2b02",
      "value_dark": "#ffba90"
    },
    {
      "token": "--slds-g-color-palette-orange-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#5f3e02",
      "value_dark": "#fe9339"
    },
    {
      "token": "--slds-g-color-palette-orange-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#825101",
      "value_dark": "#dd7a01"
    },
    {
      "token": "--slds-g-color-palette-orange-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#a96404"
    },
    {
      "token": "--slds-g-color-palette-orange-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#dd7a01",
      "value_dark": "#825101"
    },
    {
      "token": "--slds-g-color-palette-orange-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f38303",
      "value_dark": "#704801"
    },
    {
      "token": "--slds-g-color-palette-orange-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe9339",
      "value_dark": "#5f3e02"
    },
    {
      "token": "--slds-g-color-palette-orange-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ffba90",
      "value_dark": "#3e2b02"
    },
    {
      "token": "--slds-g-color-palette-orange-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fedfd0",
      "value_dark": "#201600"
    },
    {
      "token": "--slds-g-color-palette-orange-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff1ea",
      "value_dark": "#060300"
    },
    {
      "token": "--slds-g-color-palette-pink-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#370114",
      "value_dark": "#fddde3"
    },
    {
      "token": "--slds-g-color-palette-pink-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4b0620",
      "value_dark": "#fec8d4"
    },
    {
      "token": "--slds-g-color-palette-pink-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#61022a",
      "value_dark": "#fdb6c5"
    },
    {
      "token": "--slds-g-color-palette-pink-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#8a033e",
      "value_dark": "#fe8aa7"
    },
    {
      "token": "--slds-g-color-palette-pink-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#b60554",
      "value_dark": "#ff538a"
    },
    {
      "token": "--slds-g-color-palette-pink-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e3066a"
    },
    {
      "token": "--slds-g-color-palette-pink-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ff538a",
      "value_dark": "#b60554"
    },
    {
      "token": "--slds-g-color-palette-pink-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe7298",
      "value_dark": "#a00449"
    },
    {
      "token": "--slds-g-color-palette-pink-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe8aa7",
      "value_dark": "#8a033e"
    },
    {
      "token": "--slds-g-color-palette-pink-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fdb6c5",
      "value_dark": "#61022a"
    },
    {
      "token": "--slds-g-color-palette-pink-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fddde3",
      "value_dark": "#370114"
    },
    {
      "token": "--slds-g-color-palette-pink-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fef0f3",
      "value_dark": "#0f0003"
    },
    {
      "token": "--slds-g-color-palette-purple-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#240643",
      "value_dark": "#ece1f9"
    },
    {
      "token": "--slds-g-color-palette-purple-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#300b60",
      "value_dark": "#e2d0f6"
    },
    {
      "token": "--slds-g-color-palette-purple-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#401075",
      "value_dark": "#d7bff2"
    },
    {
      "token": "--slds-g-color-palette-purple-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#5a1ba9",
      "value_dark": "#c29ef1"
    },
    {
      "token": "--slds-g-color-palette-purple-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#7526e3",
      "value_dark": "#ad7bee"
    },
    {
      "token": "--slds-g-color-palette-purple-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#9050e9"
    },
    {
      "token": "--slds-g-color-palette-purple-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ad7bee",
      "value_dark": "#7526e3"
    },
    {
      "token": "--slds-g-color-palette-purple-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#b78def",
      "value_dark": "#681dc9"
    },
    {
      "token": "--slds-g-color-palette-purple-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#c29ef1",
      "value_dark": "#5a1ba9"
    },
    {
      "token": "--slds-g-color-palette-purple-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d7bff2",
      "value_dark": "#401075"
    },
    {
      "token": "--slds-g-color-palette-purple-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ece1f9",
      "value_dark": "#240643"
    },
    {
      "token": "--slds-g-color-palette-purple-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f6f2fb",
      "value_dark": "#070114"
    },
    {
      "token": "--slds-g-color-palette-red-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#300c01",
      "value_dark": "#feded8"
    },
    {
      "token": "--slds-g-color-palette-red-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4a0c04",
      "value_dark": "#ffc4b7"
    },
    {
      "token": "--slds-g-color-palette-red-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#640103",
      "value_dark": "#feb8ab"
    },
    {
      "token": "--slds-g-color-palette-red-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#8e030f",
      "value_dark": "#fe8f7d"
    },
    {
      "token": "--slds-g-color-palette-red-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ba0517",
      "value_dark": "#fe5c4c"
    },
    {
      "token": "--slds-g-color-palette-red-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ea001e"
    },
    {
      "token": "--slds-g-color-palette-red-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe5c4c",
      "value_dark": "#ba0517"
    },
    {
      "token": "--slds-g-color-palette-red-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe7765",
      "value_dark": "#a40413"
    },
    {
      "token": "--slds-g-color-palette-red-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fe8f7d",
      "value_dark": "#8e030f"
    },
    {
      "token": "--slds-g-color-palette-red-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#feb8ab",
      "value_dark": "#640103"
    },
    {
      "token": "--slds-g-color-palette-red-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#feded8",
      "value_dark": "#300c01"
    },
    {
      "token": "--slds-g-color-palette-red-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fef1ee",
      "value_dark": "#0c0200"
    },
    {
      "token": "--slds-g-color-palette-teal-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#071b12",
      "value_dark": "#acf3e4"
    },
    {
      "token": "--slds-g-color-palette-teal-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#072825",
      "value_dark": "#76ead9"
    },
    {
      "token": "--slds-g-color-palette-teal-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#023434",
      "value_dark": "#04e1cb"
    },
    {
      "token": "--slds-g-color-palette-teal-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#024d4c",
      "value_dark": "#01c3b3"
    },
    {
      "token": "--slds-g-color-palette-teal-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#056764",
      "value_dark": "#06a59a"
    },
    {
      "token": "--slds-g-color-palette-teal-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0b827c"
    },
    {
      "token": "--slds-g-color-palette-teal-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#06a59a",
      "value_dark": "#056764"
    },
    {
      "token": "--slds-g-color-palette-teal-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#03b4a7",
      "value_dark": "#035a58"
    },
    {
      "token": "--slds-g-color-palette-teal-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#01c3b3",
      "value_dark": "#024d4c"
    },
    {
      "token": "--slds-g-color-palette-teal-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#04e1cb",
      "value_dark": "#023434"
    },
    {
      "token": "--slds-g-color-palette-teal-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#acf3e4",
      "value_dark": "#071b12"
    },
    {
      "token": "--slds-g-color-palette-teal-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#def9f3",
      "value_dark": "#010502"
    },
    {
      "token": "--slds-g-color-palette-violet-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#2e0039",
      "value_dark": "#f2defe"
    },
    {
      "token": "--slds-g-color-palette-violet-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#3d0157",
      "value_dark": "#eccdfe"
    },
    {
      "token": "--slds-g-color-palette-violet-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#580276",
      "value_dark": "#e5b9fe"
    },
    {
      "token": "--slds-g-color-palette-violet-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#730394",
      "value_dark": "#d892fe"
    },
    {
      "token": "--slds-g-color-palette-violet-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#9602c7",
      "value_dark": "#cb65ff"
    },
    {
      "token": "--slds-g-color-palette-violet-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ba01ff"
    },
    {
      "token": "--slds-g-color-palette-violet-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#cb65ff",
      "value_dark": "#9602c7"
    },
    {
      "token": "--slds-g-color-palette-violet-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d17dfe",
      "value_dark": "#8402ad"
    },
    {
      "token": "--slds-g-color-palette-violet-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d892fe",
      "value_dark": "#730394"
    },
    {
      "token": "--slds-g-color-palette-violet-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e5b9fe",
      "value_dark": "#580276"
    },
    {
      "token": "--slds-g-color-palette-violet-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f2defe",
      "value_dark": "#2e0039"
    },
    {
      "token": "--slds-g-color-palette-violet-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f9f0ff",
      "value_dark": "#060300"
    },
    {
      "token": "--slds-g-color-palette-yellow-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#281202",
      "value_dark": "#f9e3b6"
    },
    {
      "token": "--slds-g-color-palette-yellow-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#371e03",
      "value_dark": "#f8d462"
    },
    {
      "token": "--slds-g-color-palette-yellow-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4f2100",
      "value_dark": "#fcc003"
    },
    {
      "token": "--slds-g-color-palette-yellow-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#6f3400",
      "value_dark": "#e4a201"
    },
    {
      "token": "--slds-g-color-palette-yellow-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#8c4b02",
      "value_dark": "#ca8501"
    },
    {
      "token": "--slds-g-color-palette-yellow-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#a96504"
    },
    {
      "token": "--slds-g-color-palette-yellow-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ca8501",
      "value_dark": "#8c4b02"
    },
    {
      "token": "--slds-g-color-palette-yellow-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#da9401",
      "value_dark": "#824308"
    },
    {
      "token": "--slds-g-color-palette-yellow-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e4a201",
      "value_dark": "#6f3400"
    },
    {
      "token": "--slds-g-color-palette-yellow-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fcc003",
      "value_dark": "#4f2100"
    },
    {
      "token": "--slds-g-color-palette-yellow-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f9e3b6",
      "value_dark": "#281202"
    },
    {
      "token": "--slds-g-color-palette-yellow-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fbf3e0",
      "value_dark": "#090200"
    },
    {
      "token": "--slds-g-color-success-1",
      "category": "color",
      "external": true,
      "description": "Color Success 1.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#056764",
      "value_dark": "#01c3b3"
    },
    {
      "token": "--slds-g-color-success-base-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#071b12",
      "value_dark": "#acf3e4"
    },
    {
      "token": "--slds-g-color-success-base-100",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#000"
    },
    {
      "token": "--slds-g-color-success-base-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#072825",
      "value_dark": "#76ead9"
    },
    {
      "token": "--slds-g-color-success-base-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#023434",
      "value_dark": "#04e1cb"
    },
    {
      "token": "--slds-g-color-success-base-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#024d4c",
      "value_dark": "#01c3b3"
    },
    {
      "token": "--slds-g-color-success-base-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#056764",
      "value_dark": "#06a59a"
    },
    {
      "token": "--slds-g-color-success-base-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0b827c"
    },
    {
      "token": "--slds-g-color-success-base-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#06a59a",
      "value_dark": "#056764"
    },
    {
      "token": "--slds-g-color-success-base-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#03b4a7",
      "value_dark": "#035a58"
    },
    {
      "token": "--slds-g-color-success-base-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#01c3b3",
      "value_dark": "#024d4c"
    },
    {
      "token": "--slds-g-color-success-base-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#04e1cb",
      "value_dark": "#023434"
    },
    {
      "token": "--slds-g-color-success-base-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#acf3e4",
      "value_dark": "#071b12"
    },
    {
      "token": "--slds-g-color-success-base-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#def9f3",
      "value_dark": "#010502"
    },
    {
      "token": "--slds-g-color-success-container-1",
      "category": "color",
      "external": true,
      "description": "Color Success Container 1.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#acf3e4",
      "value_dark": "#024d4c"
    },
    {
      "token": "--slds-g-color-success-container-2",
      "category": "color",
      "external": true,
      "description": "Color Success Container 2.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#04e1cb",
      "value_dark": "#056764"
    },
    {
      "token": "--slds-g-color-surface-1",
      "category": "color",
      "external": true,
      "description": "Color surface used for page backgrounds.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#fff",
      "value_dark": "#242424"
    },
    {
      "token": "--slds-g-color-surface-2",
      "category": "color",
      "external": true,
      "description": "Color surface used for darker page backgrounds.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#f3f3f3",
      "value_dark": "#181818"
    },
    {
      "token": "--slds-g-color-surface-3",
      "category": "color",
      "external": true,
      "description": "Color surface used for containers.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#f3f3f3",
      "value_dark": "#2e2e2e"
    },
    {
      "token": "--slds-g-color-surface-container-1",
      "category": "color",
      "external": true,
      "description": "Default container background fill for components such as cards and modals.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#fff",
      "value_dark": "#242424"
    },
    {
      "token": "--slds-g-color-surface-container-2",
      "category": "color",
      "external": true,
      "description": "Darker color for container background fill for components.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#f3f3f3",
      "value_dark": "#181818"
    },
    {
      "token": "--slds-g-color-surface-container-3",
      "category": "color",
      "external": true,
      "description": "Darkest color for container background fill for components.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#e5e5e5",
      "value_dark": "#2e2e2e"
    },
    {
      "token": "--slds-g-color-surface-container-inverse-1",
      "category": "color",
      "external": true,
      "description": "Inverse color container background fill for components. Always pair with on-surface-inverse-1.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#032d60",
      "value_dark": "#aacbff"
    },
    {
      "token": "--slds-g-color-surface-container-inverse-2",
      "category": "color",
      "external": true,
      "description": "Inverse darker color container background fill for components. Always pair with on-surface-inverse-2.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#03234d",
      "value_dark": "#78b0fd"
    },
    {
      "token": "--slds-g-color-surface-inverse-1",
      "category": "color",
      "external": true,
      "description": "Inverse page background. Always pair with on-surface-inverse-1.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#032d60",
      "value_dark": "#aacbff"
    },
    {
      "token": "--slds-g-color-surface-inverse-2",
      "category": "color",
      "external": true,
      "description": "Darker inverse page background. Always pair with on-surface-inverse-2.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#03234d",
      "value_dark": "#d8e6fe"
    },
    {
      "token": "--slds-g-color-warning-1",
      "category": "color",
      "external": true,
      "description": "Color Warning 1.",
      "properties": [
        "background",
        "background-color",
        "fill",
        "color"
      ],
      "value": "#8c4b02",
      "value_dark": "#e4a201"
    },
    {
      "token": "--slds-g-color-warning-base-10",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#281202",
      "value_dark": "#f9e3b6"
    },
    {
      "token": "--slds-g-color-warning-base-100",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fff",
      "value_dark": "#000"
    },
    {
      "token": "--slds-g-color-warning-base-15",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#371e03",
      "value_dark": "#f8d462"
    },
    {
      "token": "--slds-g-color-warning-base-20",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#4f2100",
      "value_dark": "#fcc003"
    },
    {
      "token": "--slds-g-color-warning-base-30",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#6f3400",
      "value_dark": "#e4a201"
    },
    {
      "token": "--slds-g-color-warning-base-40",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#8c4b02",
      "value_dark": "#ca8501"
    },
    {
      "token": "--slds-g-color-warning-base-50",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#a96504"
    },
    {
      "token": "--slds-g-color-warning-base-60",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ca8501",
      "value_dark": "#8c4b02"
    },
    {
      "token": "--slds-g-color-warning-base-65",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#da9401",
      "value_dark": "#824308"
    },
    {
      "token": "--slds-g-color-warning-base-70",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#e4a201",
      "value_dark": "#6f3400"
    },
    {
      "token": "--slds-g-color-warning-base-80",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fcc003",
      "value_dark": "#4f2100"
    },
    {
      "token": "--slds-g-color-warning-base-90",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f9e3b6",
      "value_dark": "#281202"
    },
    {
      "token": "--slds-g-color-warning-base-95",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#fbf3e0",
      "value_dark": "#090200"
    },
    {
      "token": "--slds-g-color-warning-container-1",
      "category": "color",
      "external": true,
      "description": "Color Warning Container 1.",
      "properties": [
        "background",
        "background-color"
      ],
      "value": "#f9e3b6",
      "value_dark": "#6f3400"
    },
    {
      "token": "--slds-g-font-lineheight-1",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1"
    },
    {
      "token": "--slds-g-font-lineheight-2",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.25"
    },
    {
      "token": "--slds-g-font-lineheight-3",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.375"
    },
    {
      "token": "--slds-g-font-lineheight-4",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.5"
    },
    {
      "token": "--slds-g-font-lineheight-5",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.75"
    },
    {
      "token": "--slds-g-font-lineheight-6",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "2"
    },
    {
      "token": "--slds-g-font-lineheight-base",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.5"
    },
    {
      "token": "--slds-g-font-lineheight-var-base",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.5"
    },
    {
      "token": "--slds-g-font-scale-1",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.875rem"
    },
    {
      "token": "--slds-g-font-scale-10",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-font-scale-2",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1rem"
    },
    {
      "token": "--slds-g-font-scale-3",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1.25rem"
    },
    {
      "token": "--slds-g-font-scale-4",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1.5rem"
    },
    {
      "token": "--slds-g-font-scale-5",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1.75rem"
    },
    {
      "token": "--slds-g-font-scale-6",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "2rem"
    },
    {
      "token": "--slds-g-font-scale-7",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "2.5rem"
    },
    {
      "token": "--slds-g-font-scale-8",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-font-scale-9",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-font-scale-neg-1",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-font-scale-neg-2",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.625rem"
    },
    {
      "token": "--slds-g-font-scale-neg-3",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.625rem"
    },
    {
      "token": "--slds-g-font-scale-neg-4",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.625rem"
    },
    {
      "token": "--slds-g-font-scale-ratio",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1.15"
    },
    {
      "token": "--slds-g-font-scale-var-1",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.875rem"
    },
    {
      "token": "--slds-g-font-scale-var-10",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-font-scale-var-2",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1rem"
    },
    {
      "token": "--slds-g-font-scale-var-3",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1.25rem"
    },
    {
      "token": "--slds-g-font-scale-var-4",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1.5rem"
    },
    {
      "token": "--slds-g-font-scale-var-5",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "1.75rem"
    },
    {
      "token": "--slds-g-font-scale-var-6",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "2rem"
    },
    {
      "token": "--slds-g-font-scale-var-7",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "2.5rem"
    },
    {
      "token": "--slds-g-font-scale-var-8",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-font-scale-var-9",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-font-scale-var-neg-1",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-font-scale-var-neg-2",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.625rem"
    },
    {
      "token": "--slds-g-font-scale-var-neg-3",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.625rem"
    },
    {
      "token": "--slds-g-font-scale-var-neg-4",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.625rem"
    },
    {
      "token": "--slds-g-font-size-base",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.8125rem"
    },
    {
      "token": "--slds-g-font-weight-1",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "100"
    },
    {
      "token": "--slds-g-font-weight-2",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "200"
    },
    {
      "token": "--slds-g-font-weight-3",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "300"
    },
    {
      "token": "--slds-g-font-weight-4",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "400"
    },
    {
      "token": "--slds-g-font-weight-5",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "500"
    },
    {
      "token": "--slds-g-font-weight-6",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "600"
    },
    {
      "token": "--slds-g-font-weight-7",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "700"
    },
    {
      "token": "--slds-g-font-weight-bold",
      "category": "font",
      "external": true,
      "properties": [
        "font-weight"
      ],
      "value": "bold"
    },
    {
      "token": "--slds-g-font-family",
      "category": "fontFamily",
      "external": true,
      "properties": [
        "font-family"
      ],
      "value": "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
    },
    {
      "token": "--slds-g-font-family-base",
      "category": "fontFamily",
      "external": true,
      "properties": [
        "font-family"
      ],
      "value": "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
    },
    {
      "token": "--slds-g-font-family-monospace",
      "category": "fontFamily",
      "external": true,
      "properties": [
        "font-family"
      ],
      "value": "Consolas, Menlo, Monaco, Courier, monospace"
    },
    {
      "token": "--slds-g-radius-border-1",
      "category": "radius",
      "external": true,
      "properties": [
        "border-radius"
      ],
      "value": "0.25rem"
    },
    {
      "token": "--slds-g-radius-border-2",
      "category": "radius",
      "external": true,
      "properties": [
        "border-radius"
      ],
      "value": "0.5rem"
    },
    {
      "token": "--slds-g-radius-border-3",
      "category": "radius",
      "external": true,
      "properties": [
        "border-radius"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-radius-border-4",
      "category": "radius",
      "external": true,
      "properties": [
        "border-radius"
      ],
      "value": "1.25rem"
    },
    {
      "token": "--slds-g-radius-border-circle",
      "category": "radius",
      "external": true,
      "properties": [
        "border-radius"
      ],
      "value": "100%"
    },
    {
      "token": "--slds-g-radius-border-pill",
      "category": "radius",
      "external": true,
      "properties": [
        "border-radius"
      ],
      "value": "15rem"
    },
    {
      "token": "--slds-g-ratio-landscape",
      "category": "ratio",
      "external": true,
      "properties": [
        "aspect-ratio"
      ],
      "value": "4/3"
    },
    {
      "token": "--slds-g-ratio-portrait",
      "category": "ratio",
      "external": true,
      "properties": [
        "aspect-ratio"
      ],
      "value": "3/4"
    },
    {
      "token": "--slds-g-ratio-square",
      "category": "ratio",
      "external": true,
      "properties": [
        "aspect-ratio"
      ],
      "value": "1"
    },
    {
      "token": "--slds-g-ratio-ultrawide",
      "category": "ratio",
      "external": true,
      "properties": [
        "aspect-ratio"
      ],
      "value": "18/5"
    },
    {
      "token": "--slds-g-ratio-wide",
      "category": "ratio",
      "external": true,
      "properties": [
        "aspect-ratio"
      ],
      "value": "16/9"
    },
    {
      "token": "--slds-g-shadow-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, 0px 2px 2px 0px #0000002e, 0px -1px 2px 0px #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, 0px 2px 2px 0px #0000005c, 0px -1px 2px 0px #00000033"
    },
    {
      "token": "--slds-g-shadow-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, 0px 3px 3px 0px #00000029, 0px -1px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, 0px 3px 3px 0px #00000052, 0px -1px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, 0px 5px 5px 0px #00000024, 0px -1px 2px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, 0px 5px 5px 0px #00000047, 0px -1px 2px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 0px 7px 7px 0px #0000001f, 0px -1px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 0px 7px 7px 0px #0000003d, 0px -1px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-5",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 0px 7px 7px 0px #0000001f, 0px -1px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 0px 7px 7px 0px #0000003d, 0px -1px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-6",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 0px 7px 7px 0px #0000001f, 0px -1px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 0px 7px 7px 0px #0000003d, 0px -1px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-blockend-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, 0px 2px 2px 0px #0000002e, 0px -1px 2px 0px #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, 0px 2px 2px 0px #0000005c, 0px -1px 2px 0px #00000033"
    },
    {
      "token": "--slds-g-shadow-blockend-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, 0px 3px 3px 0px #00000029, 0px -1px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, 0px 3px 3px 0px #00000052, 0px -1px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-blockend-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, 0px 5px 5px 0px #00000024, 0px -1px 2px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, 0px 5px 5px 0px #00000047, 0px -1px 2px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-blockend-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 0px 7px 7px 0px #0000001f, 0px -1px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 0px 7px 7px 0px #0000003d, 0px -1px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-blockstart-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, 0px -2px 2px 0px #0000002e, 0px 1px 2px 0px #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, 0px -2px 2px 0px #0000005c, 0px 1px 2px 0px #00000033"
    },
    {
      "token": "--slds-g-shadow-blockstart-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, 0px -3px 3px 0px #00000029, 0px 1px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, 0px -3px 3px 0px #00000052, 0px 1px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-blockstart-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, 0px -5px 5px 0px #00000024, 0px 1px 2px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, 0px -5px 5px 0px #00000047, 0px 1px 2px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-blockstart-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 0px -7px 7px 0px #0000001f, 0px 1px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 0px -7px 7px 0px #0000003d, 0px 1px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-inlineend-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, 2px 0px 2px 0px #0000002e, -1px 0 2px 0 #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, 2px 0px 2px 0px #0000005c, -1px 0 2px 0 #00000033"
    },
    {
      "token": "--slds-g-shadow-inlineend-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, 3px 0px 3px 0px #00000029, -1px 0px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, 3px 0px 3px 0px #00000052, -1px 0px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-inlineend-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, 5px 0px 5px 0px #00000024, -1px 0px 3px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, 5px 0px 5px 0px #00000047, -1px 0px 3px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-inlineend-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 7px 0px 7px 0px #0000001f, -1px 0px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 7px 0px 7px 0px #0000003d, -1px 0px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-inlinestart-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, -2px 0px 2px 0px #0000002e, 1px 0px 2px 0px #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, -2px 0px 2px 0px #0000005c, 1px 0px 2px 0px #00000033"
    },
    {
      "token": "--slds-g-shadow-inlinestart-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, -3px 0px 3px 0px #00000029, 1px 0px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, -3px 0px 3px 0px #00000052, 1px 0px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-inlinestart-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, -5px 0px 5px 0px #00000024, 1px 0px 2px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, -5px 0px 5px 0px #00000047, 1px 0px 2px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-inlinestart-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, -7px 0px 7px 0px #0000001f, 1px 0px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, -7px 0px 7px 0px #0000003d, 1px 0px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-inset-focus-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset"
    },
    {
      "token": "--slds-g-shadow-insetinverse-focus-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset, 0px 0px 0px 4px var(--slds-g-color-neutral-base-100) inset"
    },
    {
      "token": "--slds-g-shadow-inverse-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0 0 3px #f3f3f3"
    },
    {
      "token": "--slds-g-shadow-outline-focus-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 0px 2px var(--slds-g-color-brand-base-15)"
    },
    {
      "token": "--slds-g-shadow-outset-focus-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 0px 2px var(--slds-g-color-neutral-base-100), 0px 0px 0px 4px var(--slds-g-color-brand-base-15)"
    },
    {
      "token": "--slds-g-sizing-1",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "0.125rem"
    },
    {
      "token": "--slds-g-sizing-10",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-sizing-11",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "4rem"
    },
    {
      "token": "--slds-g-sizing-12",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "5rem"
    },
    {
      "token": "--slds-g-sizing-13",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "10rem"
    },
    {
      "token": "--slds-g-sizing-14",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "15rem"
    },
    {
      "token": "--slds-g-sizing-15",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "20rem"
    },
    {
      "token": "--slds-g-sizing-16",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "30rem"
    },
    {
      "token": "--slds-g-sizing-2",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "0.25rem"
    },
    {
      "token": "--slds-g-sizing-3",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "0.5rem"
    },
    {
      "token": "--slds-g-sizing-4",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-sizing-5",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "1rem"
    },
    {
      "token": "--slds-g-sizing-6",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "1.25rem"
    },
    {
      "token": "--slds-g-sizing-7",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "1.5rem"
    },
    {
      "token": "--slds-g-sizing-8",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "1.75rem"
    },
    {
      "token": "--slds-g-sizing-9",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "2rem"
    },
    {
      "token": "--slds-g-sizing-border-1",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "1px"
    },
    {
      "token": "--slds-g-sizing-border-2",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "2px"
    },
    {
      "token": "--slds-g-sizing-border-3",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "3px"
    },
    {
      "token": "--slds-g-sizing-border-4",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "4px"
    },
    {
      "token": "--slds-g-sizing-content-1",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "20ch"
    },
    {
      "token": "--slds-g-sizing-content-2",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "45ch"
    },
    {
      "token": "--slds-g-sizing-content-3",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "60ch"
    },
    {
      "token": "--slds-g-sizing-heading-1",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "20ch"
    },
    {
      "token": "--slds-g-sizing-heading-2",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "25ch"
    },
    {
      "token": "--slds-g-sizing-heading-3",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "35ch"
    },
    {
      "token": "--slds-g-spacing-1",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.25rem"
    },
    {
      "token": "--slds-g-spacing-10",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4rem"
    },
    {
      "token": "--slds-g-spacing-11",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4.5rem"
    },
    {
      "token": "--slds-g-spacing-12",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "5rem"
    },
    {
      "token": "--slds-g-spacing-2",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.5rem"
    },
    {
      "token": "--slds-g-spacing-3",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-spacing-4",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1rem"
    },
    {
      "token": "--slds-g-spacing-5",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1.5rem"
    },
    {
      "token": "--slds-g-spacing-6",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2rem"
    },
    {
      "token": "--slds-g-spacing-7",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2.5rem"
    },
    {
      "token": "--slds-g-spacing-8",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-spacing-9",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3.5rem"
    },
    {
      "token": "--slds-g-spacing-var-1",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.25rem"
    },
    {
      "token": "--slds-g-spacing-var-10",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4rem"
    },
    {
      "token": "--slds-g-spacing-var-11",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4.5rem"
    },
    {
      "token": "--slds-g-spacing-var-12",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "5rem"
    },
    {
      "token": "--slds-g-spacing-var-2",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.5rem"
    },
    {
      "token": "--slds-g-spacing-var-3",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-spacing-var-4",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1rem"
    },
    {
      "token": "--slds-g-spacing-var-5",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1.5rem"
    },
    {
      "token": "--slds-g-spacing-var-6",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2rem"
    },
    {
      "token": "--slds-g-spacing-var-7",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2.5rem"
    },
    {
      "token": "--slds-g-spacing-var-8",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-spacing-var-9",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3.5rem"
    },
    {
      "token": "--slds-g-spacing-var-block-1",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.25rem"
    },
    {
      "token": "--slds-g-spacing-var-block-10",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4rem"
    },
    {
      "token": "--slds-g-spacing-var-block-11",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4.5rem"
    },
    {
      "token": "--slds-g-spacing-var-block-12",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "5rem"
    },
    {
      "token": "--slds-g-spacing-var-block-2",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.5rem"
    },
    {
      "token": "--slds-g-spacing-var-block-3",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-spacing-var-block-4",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1rem"
    },
    {
      "token": "--slds-g-spacing-var-block-5",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1.5rem"
    },
    {
      "token": "--slds-g-spacing-var-block-6",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2rem"
    },
    {
      "token": "--slds-g-spacing-var-block-7",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2.5rem"
    },
    {
      "token": "--slds-g-spacing-var-block-8",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-spacing-var-block-9",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3.5rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-1",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.25rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-10",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-11",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "4.5rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-12",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "5rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-2",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.5rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-3",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "0.75rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-4",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-5",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "1.5rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-6",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-7",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "2.5rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-8",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3rem"
    },
    {
      "token": "--slds-g-spacing-var-inline-9",
      "category": "spacing",
      "external": true,
      "properties": [
        "padding",
        "margin",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "value": "3.5rem"
    },
    {
      "token": "--slds-g-color-accent-dark-1",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#002775"
    },
    {
      "token": "--slds-g-color-accent-dark-2",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#001642"
    },
    {
      "token": "--slds-g-color-accent-light-1",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#edf4ff"
    },
    {
      "token": "--slds-g-color-accent-light-2",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#d6e6ff"
    },
    {
      "token": "--slds-g-color-brand-base-45",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "var(--slds-r-color-brand-45)",
      "value_dark": "var(--slds-r-color-brand-55)"
    },
    {
      "token": "--slds-g-color-brand-base-55",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "var(--slds-r-color-brand-55)",
      "value_dark": "var(--slds-r-color-brand-45)"
    },
    {
      "token": "--slds-g-color-error-base-45",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ce055f",
      "value_dark": "#f42f7c"
    },
    {
      "token": "--slds-g-color-error-base-55",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#f42f7c",
      "value_dark": "#ce055f"
    },
    {
      "token": "--slds-g-color-info-base-45",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0469c1",
      "value_dark": "#0684ef"
    },
    {
      "token": "--slds-g-color-info-base-55",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#0684ef",
      "value_dark": "#0469c1"
    },
    {
      "token": "--slds-g-color-neutral-base-0",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#000",
      "value_dark": "#fff"
    },
    {
      "token": "--slds-g-color-neutral-base-45",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#696969",
      "value_dark": "#848484"
    },
    {
      "token": "--slds-g-color-neutral-base-55",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#848484",
      "value_dark": "#696969"
    },
    {
      "token": "--slds-g-color-success-base-45",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#087570",
      "value_dark": "#09948b"
    },
    {
      "token": "--slds-g-color-success-base-55",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#09948b",
      "value_dark": "#087570"
    },
    {
      "token": "--slds-g-color-warning-base-45",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#9a5803",
      "value_dark": "#ba7503"
    },
    {
      "token": "--slds-g-color-warning-base-55",
      "category": "color",
      "external": true,
      "properties": [
        "background-color",
        "color",
        "border-color",
        "fill"
      ],
      "value": "#ba7503",
      "value_dark": "#9a5803"
    },
    {
      "token": "--slds-g-duration-immediately",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "0.05s"
    },
    {
      "token": "--slds-g-duration-instantly",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "0s"
    },
    {
      "token": "--slds-g-duration-paused",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "3.2s"
    },
    {
      "token": "--slds-g-duration-promptly",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "0.2s"
    },
    {
      "token": "--slds-g-duration-quickly",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "0.1s"
    },
    {
      "token": "--slds-g-duration-slowly",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "0.4s"
    },
    {
      "token": "--slds-g-duration-toast-medium",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "9.6s"
    },
    {
      "token": "--slds-g-duration-toast-short",
      "category": "duration",
      "external": true,
      "properties": [
        "animation*",
        "transition*"
      ],
      "value": "4.8s"
    },
    {
      "token": "--slds-g-font-line-clamp",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "3"
    },
    {
      "token": "--slds-g-font-line-height-1",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1"
    },
    {
      "token": "--slds-g-font-line-height-2",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.25"
    },
    {
      "token": "--slds-g-font-line-height-3",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.375"
    },
    {
      "token": "--slds-g-font-line-height-4",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.5"
    },
    {
      "token": "--slds-g-font-line-height-5",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.75"
    },
    {
      "token": "--slds-g-font-line-height-6",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "2"
    },
    {
      "token": "--slds-g-font-line-height-base",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.5"
    },
    {
      "token": "--slds-g-font-line-height-var-base",
      "category": "font",
      "external": true,
      "properties": [
        "line-height"
      ],
      "value": "1.5"
    },
    {
      "token": "--slds-g-font-scale-base",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.8125rem"
    },
    {
      "token": "--slds-g-font-scale-var-base",
      "category": "font",
      "external": true,
      "properties": [
        "font-size"
      ],
      "value": "0.8125rem"
    },
    {
      "token": "--slds-g-shadow-block-end-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, 0px 2px 2px 0px #0000002e, 0px -1px 2px 0px #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, 0px 2px 2px 0px #0000005c, 0px -1px 2px 0px #00000033"
    },
    {
      "token": "--slds-g-shadow-block-end-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, 0px 3px 3px 0px #00000029, 0px -1px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, 0px 3px 3px 0px #00000052, 0px -1px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-block-end-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, 0px 5px 5px 0px #00000024, 0px -1px 2px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, 0px 5px 5px 0px #00000047, 0px -1px 2px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-block-end-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 0px 7px 7px 0px #0000001f, 0px -1px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 0px 7px 7px 0px #0000003d, 0px -1px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-block-start-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, 0px -2px 2px 0px #0000002e, 0px 1px 2px 0px #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, 0px -2px 2px 0px #0000005c, 0px 1px 2px 0px #00000033"
    },
    {
      "token": "--slds-g-shadow-block-start-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, 0px -3px 3px 0px #00000029, 0px 1px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, 0px -3px 3px 0px #00000052, 0px 1px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-block-start-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, 0px -5px 5px 0px #00000024, 0px 1px 2px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, 0px -5px 5px 0px #00000047, 0px 1px 2px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-block-start-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 0px -7px 7px 0px #0000001f, 0px 1px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 0px -7px 7px 0px #0000003d, 0px 1px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-inline-end-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, 2px 0px 2px 0px #0000002e, -1px 0 2px 0 #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, 2px 0px 2px 0px #0000005c, -1px 0 2px 0 #00000033"
    },
    {
      "token": "--slds-g-shadow-inline-end-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, 3px 0px 3px 0px #00000029, -1px 0px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, 3px 0px 3px 0px #00000052, -1px 0px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-inline-end-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, 5px 0px 5px 0px #00000024, -1px 0px 3px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, 5px 0px 5px 0px #00000047, -1px 0px 3px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-inline-end-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, 7px 0px 7px 0px #0000001f, -1px 0px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, 7px 0px 7px 0px #0000003d, -1px 0px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-inline-start-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 2px 0px #0000002e, -2px 0px 2px 0px #0000002e, 1px 0px 2px 0px #0000001a",
      "value_dark": "0px 0px 2px 0px #0000005c, -2px 0px 2px 0px #0000005c, 1px 0px 2px 0px #00000033"
    },
    {
      "token": "--slds-g-shadow-inline-start-2",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 5px 0px #00000029, -3px 0px 3px 0px #00000029, 1px 0px 2px 0px #00000017",
      "value_dark": "0px 0px 5px 0px #00000052, -3px 0px 3px 0px #00000052, 1px 0px 2px 0px #0000002e"
    },
    {
      "token": "--slds-g-shadow-inline-start-3",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 7px 0px #00000024, -5px 0px 5px 0px #00000024, 1px 0px 2px 0px #00000014",
      "value_dark": "0px 0px 7px 0px #00000047, -5px 0px 5px 0px #00000047, 1px 0px 2px 0px #00000029"
    },
    {
      "token": "--slds-g-shadow-inline-start-4",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 10px 0px #0000001f, -7px 0px 7px 0px #0000001f, 1px 0px 3px 0px #00000012",
      "value_dark": "0px 0px 10px 0px #0000003d, -7px 0px 7px 0px #0000003d, 1px 0px 3px 0px #00000024"
    },
    {
      "token": "--slds-g-shadow-inset-inverse-focus-1",
      "category": "shadow",
      "external": true,
      "properties": [
        "box-shadow"
      ],
      "value": "0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset, 0px 0px 0px 4px var(--slds-g-color-neutral-base-100) inset"
    },
    {
      "token": "--slds-g-sizing-base",
      "category": "sizing",
      "external": true,
      "properties": [
        "border-width",
        "width"
      ],
      "value": "1rem"
    }
  ]
}

# SLDS Metadata

Structured data for all SLDS artifacts. Use the search scripts in `../scripts/` or grep directly.

Source: `packages/metadata/`

---

## Files

### `blueprints/components/*.yaml` (85 files)

One YAML file per SLDS blueprint component. Each contains:

- `name`, `description`, `category`
- `slds_classes.root` -- the BEM root class (e.g., `slds-modal`)
- `slds_classes.elements[]` -- child element classes with purpose
- `slds_classes.modifiers[]` -- variant modifier classes with usage guidance
- `slds_classes.states[]` -- state classes (active, disabled, open, etc.)
- `accessibility` -- required ARIA roles, attributes, keyboard interactions
- `example_html` -- reference markup

**Search**: `node ../scripts/search-blueprints.js --search "dialog"`

**Direct grep**: `grep -rl "category: Overlay" blueprints/components/`

### `hooks-index.json` (523 hooks)

All SLDS styling hooks with computed values and CSS property mappings.

Each hook entry:
```json
{
  "token": "--slds-g-color-accent-1",
  "category": "color",
  "value": "#0176d3",
  "properties": ["background-color", "color", "border-color", "fill"]
}
```

Categories: color (325), font (57), spacing (48), shadow (44), sizing (27), duration (8), radius (6), ratio (5), fontFamily (3)

**Search**: `node ../scripts/search-hooks.js --category "color"`

**Direct grep**: `grep -i "accent" hooks-index.json`

### `icon-metadata.json` (1,732 icons)

All SLDS icons with synonyms for semantic search across 5 categories.

Each icon entry:
```json
{
  "displayName": "add_contact",
  "category": "action",
  "description": "Represents adding a new contact...",
  "synonyms": ["add", "user", "contact", "create", "new", "person", "plus"]
}
```

Categories: action, custom, doctype, standard, utility

**Search**: `node ../scripts/search-icons.js --query "save button"`

**Direct grep**: `grep -B1 -A5 '"save"' icon-metadata.json`

### `utilities-index.json` (1,147 utilities)

All SLDS utility classes organized by category with CSS rules.

Each utility entry:
```json
{
  "class": "slds-m-bottom_small",
  "css": { "margin-bottom": "0.75rem" },
  "category": "margin"
}
```

27 categories: grid (80), margin (119), padding (120), sizing (613), color (48), text (24), and more.

**Search**: `node ../scripts/search-utilities.js --category "grid"`

**Direct grep**: `grep -i "slds-grid" utilities-index.json`

{
  "version": "1.0.0",
  "generated_at": "2025-11-11T03:20:33.209Z",
  "source": "source-data/utility-analysis/source-analysis.json",
  "total_utilities": 1147,
  "total_categories": 27,
  "categories": {
    "alignment": 1,
    "borders": 4,
    "box": 16,
    "color": 48,
    "dark-mode": 0,
    "description-list": 6,
    "floats": 4,
    "grid": 80,
    "horizontal-list": 3,
    "hyphenation": 1,
    "interactions": 5,
    "layout": 4,
    "line-clamp": 5,
    "margin": 119,
    "media-object": 8,
    "name-value-list": 5,
    "padding": 120,
    "position": 4,
    "print": 1,
    "reset": 0,
    "scrolling": 4,
    "sizing": 613,
    "text": 24,
    "truncate": 6,
    "deprecated": 7,
    "vertical-list": 13,
    "visibility": 46
  },
  "utilities": [
    {
      "class": "slds-align_absolute-center",
      "category": "Alignment",
      "category_key": "alignment",
      "description": "",
      "properties": [
        "display",
        "justify-content",
        "align-content",
        "align-items",
        "margin"
      ],
      "css_rules": [
        "\n  display: flex",
        "\n  justify-content: center",
        "\n  align-content: center",
        "\n  align-items: center",
        "\n  margin: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "absolute-center"
      ],
      "file": "alignment.css"
    },
    {
      "class": "slds-border_bottom",
      "category": "Borders",
      "category_key": "borders",
      "description": "* @summary Adds a bottom border to an element",
      "properties": [
        "border-block-end"
      ],
      "css_rules": [
        "\n  border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-sizing-border-1)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "bottom"
      ],
      "file": "borders.css"
    },
    {
      "class": "slds-border_left",
      "category": "Borders",
      "category_key": "borders",
      "description": "* @summary Adds a left border to an element",
      "properties": [
        "border-inline-start"
      ],
      "css_rules": [
        "\n  border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-sizing-border-1)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "left"
      ],
      "file": "borders.css"
    },
    {
      "class": "slds-border_right",
      "category": "Borders",
      "category_key": "borders",
      "description": "* @summary Adds a right border to an element",
      "properties": [
        "border-inline-end"
      ],
      "css_rules": [
        "\n  border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-sizing-border-1)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "right"
      ],
      "file": "borders.css"
    },
    {
      "class": "slds-border_top",
      "category": "Borders",
      "category_key": "borders",
      "description": "* @summary Adds a top border to an element",
      "properties": [
        "border-block-start"
      ],
      "css_rules": [
        "\n  border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-sizing-border-1)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "top"
      ],
      "file": "borders.css"
    },
    {
      "class": "slds-box",
      "category": "Box",
      "category_key": "box",
      "description": "* @summary Provides 1rem base padding and borders",
      "properties": [
        "padding",
        "border-radius",
        "border"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-4)",
        "\n  border-radius: var(--slds-g-radius-border-2)",
        "\n  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)",
        "var(--slds-g-radius-border-2)",
        "var(--slds-g-sizing-border-1)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "box.css"
    },
    {
      "class": "slds-box_xx-small",
      "category": "Box",
      "category_key": "box",
      "description": "* @summary Changes padding to .25rem",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-box_x-small",
      "category": "Box",
      "category_key": "box",
      "description": "* @summary Changes padding to .5rem",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-box_small",
      "category": "Box",
      "category_key": "box",
      "description": "* @summary Changes padding to .75rem",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-box_link",
      "category": "Box",
      "category_key": "box",
      "description": "* @summary Handles interactions if the box is applied to an actionable element",
      "properties": [
        "color",
        "text-decoration"
      ],
      "css_rules": [
        "\n  &,\n  &:active,\n  &:focus,\n  &:hover {\n    color: inherit",
        "\n    text-decoration: inherit"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "link"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_default",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "background-color",
        "color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-surface-container-1)",
        "\n  color: var(--slds-g-color-on-surface-3)"
      ],
      "design_tokens": [
        "var(--slds-g-color-surface-container-1)",
        "var(--slds-g-color-on-surface-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "default"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_shade",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-surface-container-2)"
      ],
      "design_tokens": [
        "var(--slds-g-color-surface-container-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "shade"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_inverse",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "color",
        "background-color",
        "border-color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-100)",
        "\n  background-color: var(--slds-g-color-brand-base-10)",
        "\n  border-color: var(--slds-g-color-brand-base-10)"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)",
        "var(--slds-g-color-brand-base-10)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "inverse"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_alt-inverse",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "color",
        "background-color",
        "border-color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-100)",
        "\n  background-color: var(--slds-g-color-brand-base-20)",
        "\n  border-color: var(--slds-g-color-brand-base-20)"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)",
        "var(--slds-g-color-brand-base-20)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "alt-inverse"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_success",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "color",
        "background-color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-on-success-1)",
        "\n  background-color: var(--slds-g-color-success-container-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-on-success-1)",
        "var(--slds-g-color-success-container-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "success"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-button__icon",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-on-success-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-on-success-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "icon"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_info",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "color",
        "background-color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-on-info-1)",
        "\n  background-color: var(--slds-g-color-info-container-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-on-info-1)",
        "var(--slds-g-color-info-container-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "info"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_warning",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "background-color",
        "color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-warning-container-1)",
        "\n  color: var(--slds-g-color-on-warning-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-warning-container-1)",
        "var(--slds-g-color-on-warning-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "warning"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_error",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "color",
        "background-color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-on-error-1)",
        "\n  background-color: var(--slds-g-color-error-container-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-on-error-1)",
        "var(--slds-g-color-error-container-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "error"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_offline",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "color",
        "background-color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-100)",
        "\n  background-color: var(--slds-g-color-neutral-base-30)"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)",
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "offline"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-theme_inverse-text",
      "category": "Box",
      "category_key": "box",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-100)"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "inverse-text"
      ],
      "file": "box.css"
    },
    {
      "class": "slds-color__text_gray-1",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-100) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-1"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-2",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-2"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-3",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-3"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-4",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-4"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-5",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-5"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-6",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-80) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-80)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-6"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-7",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-70) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-70)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-7"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-8",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-60) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-60)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-8"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-9",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-50) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-50)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-9"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-10",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-10"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-11",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-11"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__text_gray-12",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-20) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-20)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-12"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-1",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-100) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-1"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-2",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-2"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-3",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-3"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-4",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-4"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-5",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-5"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-6",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-80) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-80)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-6"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-7",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-70) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-70)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-7"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-8",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-60) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-60)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-8"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-9",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-50) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-50)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-9"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-10",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-10"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-11",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-11"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__background_gray-12",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "background-color"
      ],
      "css_rules": [
        "\n  background-color: var(--slds-g-color-neutral-base-20) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-20)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-12"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-1",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-100) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-1"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-2",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-2"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-3",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-3"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-4",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-4"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-5",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-5"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-6",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-80) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-80)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-6"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-7",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-70) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-70)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-7"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-8",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-60) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-60)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-8"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-9",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-50) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-50)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-9"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-10",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-10"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-11",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-11"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__border_gray-12",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "border-color"
      ],
      "css_rules": [
        "\n  border-color: var(--slds-g-color-neutral-base-20) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-20)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-12"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-1",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-100) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-1"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-2",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-2"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-3",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-95) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-95)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-3"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-4",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-4"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-5",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-90) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-90)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-5"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-6",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-80) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-80)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-6"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-7",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-70) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-70)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-7"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-8",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-60) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-60)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-8"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-9",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-50) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-50)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-9"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-10",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-10"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-11",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-30) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-30)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-11"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-color__fill_gray-12",
      "category": "Color",
      "category_key": "color",
      "description": "",
      "properties": [
        "fill"
      ],
      "css_rules": [
        "\n  fill: var(--slds-g-color-neutral-base-20) !important"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-20)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "gray-12"
      ],
      "file": "color.css"
    },
    {
      "class": "slds-dl_inline__label",
      "category": "Description List",
      "category_key": "description-list",
      "description": "* @summary Causes description list to display horizontally with `dt` followed immediately by the `dd`. * @selector .slds-dl_inline * @modifier",
      "properties": [
        "float",
        "clear"
      ],
      "css_rules": [
        "\n    float: inline-start",
        "\n    clear: inline-start"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "label"
      ],
      "file": "descriptionList.css"
    },
    {
      "class": "slds-dl_inline__detail",
      "category": "Description List",
      "category_key": "description-list",
      "description": "* @summary Marks a description",
      "properties": [
        "float",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n    float: inline-start",
        "\n    padding-inline-start: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "detail"
      ],
      "file": "descriptionList.css"
    },
    {
      "class": "slds-dl_horizontal",
      "category": "Description List",
      "category_key": "description-list",
      "description": "* @summary Causes description list to display horizontally with `dt` consuming 33% of the space and the `dd` taking up the rest.",
      "properties": [
        "display",
        "flex-wrap"
      ],
      "css_rules": [
        "\n    display: flex",
        "\n    flex-wrap: wrap"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "horizontal"
      ],
      "file": "descriptionList.css"
    },
    {
      "class": "slds-dl_horizontal__label",
      "category": "Description List",
      "category_key": "description-list",
      "description": "* @summary Marks a term",
      "properties": [
        "width",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n    width: 30%",
        "\n    padding-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "label"
      ],
      "file": "descriptionList.css"
    },
    {
      "class": "slds-dl_horizontal__detail",
      "category": "Description List",
      "category_key": "description-list",
      "description": "* @summary Marks a description",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 70%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "detail"
      ],
      "file": "descriptionList.css"
    },
    {
      "class": "slds-region_narrow",
      "category": "Description List",
      "category_key": "description-list",
      "description": "",
      "properties": [
        "float"
      ],
      "css_rules": [
        "\n  .slds-dl_inline__label,\n  .slds-dl_inline__detail {\n    float: inline-start"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "narrow"
      ],
      "file": "descriptionList.css"
    },
    {
      "class": "slds-float_left",
      "category": "Floats",
      "category_key": "floats",
      "description": "* @summary Contains floats and stops wrapping of elements following it.",
      "properties": [
        "float"
      ],
      "css_rules": [
        "\n  float: inline-start"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "left"
      ],
      "file": "floats.css"
    },
    {
      "class": "slds-float_none",
      "category": "Floats",
      "category_key": "floats",
      "description": "* @summary Removes float from an element that has attribute already",
      "properties": [
        "float"
      ],
      "css_rules": [
        "\n  float: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "floats.css"
    },
    {
      "class": "slds-float_right",
      "category": "Floats",
      "category_key": "floats",
      "description": "* @summary Pulls element from document flow and floats right. Text and other elements wrap around it.",
      "properties": [
        "float"
      ],
      "css_rules": [
        "\n  float: inline-end"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "right"
      ],
      "file": "floats.css"
    },
    {
      "class": "slds-clear",
      "category": "Floats",
      "category_key": "floats",
      "description": "",
      "properties": [
        "clear"
      ],
      "css_rules": [
        "\n  clear: both"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "floats.css"
    },
    {
      "class": "slds-grid",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Initializes grid",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: flex"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_frame",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Initializes grid",
      "properties": [
        "min-width",
        "min-height",
        "overflow"
      ],
      "css_rules": [
        "\n  min-width: 100vw",
        "\n  min-height: 100vh",
        "\n  overflow: hidden"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "frame"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_vertical",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Initializes grid",
      "properties": [
        "flex-direction"
      ],
      "css_rules": [
        "\n  flex-direction: column"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "vertical"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_vertical-reverse",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Initializes grid",
      "properties": [
        "flex-direction"
      ],
      "css_rules": [
        "\n  flex-direction: column-reverse"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "vertical-reverse"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_reverse",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Initializes grid",
      "properties": [
        "flex-direction"
      ],
      "css_rules": [
        "\n  flex-direction: row-reverse"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "reverse"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-wrap",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Allows columns to wrap when they exceed 100% of their parent’s width",
      "properties": [
        "flex-wrap",
        "align-items"
      ],
      "css_rules": [
        "\n  flex-wrap: wrap",
        "\n  align-items: flex-start"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-nowrap",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Keeps columns on one line. Allows columns to stretch and fill 100% of the parent’s width and height.",
      "properties": [
        "flex",
        "flex-wrap",
        "align-items"
      ],
      "css_rules": [
        "\n  flex: 1 1 auto",
        "\n  flex-wrap: nowrap",
        "\n  align-items: stretch"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary .slds-{size}-nowrap used for responsive design",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-3) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-3) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-3)",
        "\n    padding-inline-start: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_xxx-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 2px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(0.125rem * -1)",
        "\n  margin-inline-start: calc(0.125rem * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: 0.125rem",
        "\n    padding-inline-start: 0.125rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_xx-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 4px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-1) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-1) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-1)",
        "\n    padding-inline-start: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_x-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 8px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-2) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-2) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-2)",
        "\n    padding-inline-start: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 12px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-3) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-3) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-3)",
        "\n    padding-inline-start: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_medium",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 16px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-4) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-4) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-4)",
        "\n    padding-inline-start: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 24px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-5) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-5) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-5)",
        "\n    padding-inline-start: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_x-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 32px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-6) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-6) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-6)",
        "\n    padding-inline-start: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_xx-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 48px gutters to each grid column when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start",
        "padding-inline-end",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-8) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-8) * -1)",
        "\n\n  .slds-col {\n    padding-inline-end: var(--slds-g-spacing-8)",
        "\n    padding-inline-start: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-3) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-3) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-xxx-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 2px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(0.125rem * -1)",
        "\n  margin-inline-start: calc(0.125rem * -1)"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "direct-xxx-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-xx-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 4px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-1) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-1) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct-xx-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-x-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 8px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-2) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-2) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct-x-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-3) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-3) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-medium",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 16px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-4) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-4) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct-medium"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 24px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-5) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-5) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-x-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 32px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-6) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-6) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct-x-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-gutters_direct-xx-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Apply 48px gutters to only direct column children when you add this class to an `slds-grid` element",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-8) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-8) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "direct-xx-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-3) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-3) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-xxx-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 0.125rem of padding when nesting a grid in a region with `.slds-p-horizontal_xxx-small`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(0.125rem * -1)",
        "\n  margin-inline-start: calc(0.125rem * -1)"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "pull-padded-xxx-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-xx-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 0.25rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-small`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-1) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-1) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded-xx-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-x-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 0.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-small`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-2) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-2) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded-x-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-3) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-3) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded-small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-medium",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 1rem of padding when nesting a grid in a region with `.slds-p-horizontal_medium`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-4) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-4) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded-medium"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_large`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-5) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-5) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-x-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-large`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-6) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-6) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded-x-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_pull-padded-xx-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-large`",
      "properties": [
        "margin-inline-end",
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-8) * -1)",
        "\n  margin-inline-start: calc(var(--slds-g-spacing-8) * -1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "pull-padded-xx-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Initializes a grid column",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n  flex: 1 1 auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-has-flexi-truncate",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Adds border to top side of column",
      "properties": [
        "flex",
        "min-width"
      ],
      "css_rules": [
        "\n  flex: 1 1 0%",
        "\n  min-width: 0",
        " /* For FFOX and newer browsers */\n"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-no-flex",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Removes flexbox from grid column",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n  flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-no-space",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Sets the column to a min-width of 0",
      "properties": [
        "min-width"
      ],
      "css_rules": [
        "\n  min-width: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-grow",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Allows column to grow to children’s content",
      "properties": [
        "flex-grow"
      ],
      "css_rules": [
        "\n  flex-grow: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-grow-none",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Prevents column from growing to children’s content",
      "properties": [
        "flex-grow"
      ],
      "css_rules": [
        "\n  flex-grow: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-shrink",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Allows column to shrink to children's content",
      "properties": [
        "flex-shrink"
      ],
      "css_rules": [
        "\n  flex-shrink: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-shrink-none",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Prevents column from shrinking to children's content",
      "properties": [
        "flex-shrink"
      ],
      "css_rules": [
        "\n  flex-shrink: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_align-center",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Columns align in the center to the main axis and expand in each direction",
      "properties": [
        "justify-content",
        "flex-grow"
      ],
      "css_rules": [
        "\n  justify-content: center",
        "\n\n  .slds-col,\n  .slds-col_padded-around-medium,\n  .slds-col_padded-medium,\n  .slds-col_padded-around-large,\n  .slds-col_padded-large,\n  .slds-col_padded-around,\n  .slds-col_padded {\n    flex-grow: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "align-center"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_align-space",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Columns are evenly distributed with equal space around them all",
      "properties": [
        "justify-content",
        "flex-grow"
      ],
      "css_rules": [
        "\n  justify-content: space-around",
        "\n\n  .slds-col,\n  .slds-col_padded-around-medium,\n  .slds-col_padded-medium,\n  .slds-col_padded-around-large,\n  .slds-col_padded-large,\n  .slds-col_padded-around,\n  .slds-col_padded {\n    flex-grow: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "align-space"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_align-spread",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Columns align to the left and right followed by center. Space is equal between them",
      "properties": [
        "justify-content",
        "flex-grow"
      ],
      "css_rules": [
        "\n  justify-content: space-between",
        "\n\n  .slds-col,\n  .slds-col_padded-around-medium,\n  .slds-col_padded-medium,\n  .slds-col_padded-around-large,\n  .slds-col_padded-large,\n  .slds-col_padded-around,\n  .slds-col_padded {\n    flex-grow: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "align-spread"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_align-end",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Columns start on the opposite end of the grid's main axis",
      "properties": [
        "justify-content",
        "flex-grow"
      ],
      "css_rules": [
        "\n  justify-content: flex-end",
        "\n\n  .slds-col,\n  .slds-col_padded-around-medium,\n  .slds-col_padded-medium,\n  .slds-col_padded-around-large,\n  .slds-col_padded-large,\n  .slds-col_padded-around,\n  .slds-col_padded {\n    flex-grow: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "align-end"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_vertical-align-start",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Columns start at the beginning of the grid's cross axis",
      "properties": [
        "align-items",
        "align-content"
      ],
      "css_rules": [
        "\n  align-items: flex-start",
        " /* Single Row Alignment */\n  align-content: flex-start",
        " /* Multi Row Alignment */\n"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "vertical-align-start"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_vertical-align-center",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Columns align in the center to the cross axis and expand it each direction",
      "properties": [
        "align-items",
        "align-content"
      ],
      "css_rules": [
        "\n  align-items: center",
        " /* Single Row Alignment */\n  align-content: center",
        " /* Multi Row Alignment */\n"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "vertical-align-center"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_vertical-align-end",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Columns start on the opposite end of the grid's cross axis",
      "properties": [
        "align-items",
        "align-content"
      ],
      "css_rules": [
        "\n  align-items: flex-end",
        " /* Single Row Alignment */\n  align-content: flex-end",
        " /* Multi Row Alignment */\n"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "vertical-align-end"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-align-top",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Vertically aligns element to top of `.slds-grid`",
      "properties": [
        "vertical-align",
        "align-self"
      ],
      "css_rules": [
        "\n  vertical-align: top",
        "\n  align-self: flex-start"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-align-middle",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Vertically aligns element to middle of `.slds-grid`",
      "properties": [
        "vertical-align",
        "align-self"
      ],
      "css_rules": [
        "\n  vertical-align: middle",
        "\n  align-self: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-align-bottom",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Vertically aligns element to bottom of `.slds-grid`",
      "properties": [
        "vertical-align",
        "align-self"
      ],
      "css_rules": [
        "\n  vertical-align: bottom",
        "\n  align-self: flex-end"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-col_bump-top",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Bumps grid item(s) away from the other grid items to sit at the top, taking up the remaining white-space of the grid container",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "bump-top"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_bump-right",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Bumps grid item(s) away from the other grid items to sit to the right, taking up the remaining white-space of the grid container",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "bump-right"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_bump-bottom",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Bumps grid item(s) away from the other grid items to sit at the bottom, taking up the remaining white-space of the grid container",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "bump-bottom"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_bump-left",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Bumps grid item(s) away from the other grid items to sit to the left, taking up the remaining white-space of the grid container",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "bump-left"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_vertical-stretch",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Stretch the grid items for both single row and multi-line rows to fill the height of the parent grid container",
      "properties": [
        "align-items",
        "align-content"
      ],
      "css_rules": [
        "\n  align-items: stretch",
        " /* Single Row Alignment */\n  align-content: stretch",
        " /* Multi Row Alignment */\n"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "vertical-stretch"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_small",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Restrict width of containers to a maximum of 480px",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 30rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_medium",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Restrict width of containers to a maximum of 768px",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 48rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Restrict width of containers to a maximum of 1024px",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 64rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_x-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Restrict width of containers to a maximum of 1280px",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 80rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_fluid",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Width of container takes up 100% of viewport",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "fluid"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_center",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Horizontally positions containers in the center of the viewport",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: auto",
        "\n  margin-inline-end: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "center"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_left",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Horizontally positions containers to the left of the viewport",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "left"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-container_right",
      "category": "Grid",
      "category_key": "grid",
      "description": "* @summary Horizontally positions containers to the right of the viewport",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "right"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [],
      "css_rules": [
        "size"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "grid.css"
    },
    {
      "class": "slds-nowrap_small",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "flex",
        "flex-wrap",
        "align-items"
      ],
      "css_rules": [
        "\n    flex: 1 1 auto",
        "\n    flex-wrap: nowrap",
        "\n    align-items: stretch"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-nowrap_medium",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "flex",
        "flex-wrap",
        "align-items"
      ],
      "css_rules": [
        "\n    flex: 1 1 auto",
        "\n    flex-wrap: nowrap",
        "\n    align-items: stretch"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-nowrap_large",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "flex",
        "flex-wrap",
        "align-items"
      ],
      "css_rules": [
        "\n    flex: 1 1 auto",
        "\n    flex-wrap: nowrap",
        "\n    align-items: stretch"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_padded",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n  flex: 1 1 auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "padded"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_rule-top",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "border-inline-start"
      ],
      "css_rules": [
        "\n    border-inline-start: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "rule-top"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_rule-right",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "border-inline-end"
      ],
      "css_rules": [
        "\n    border-inline-end: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "rule-right"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_rule-bottom",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "border-block-end"
      ],
      "css_rules": [
        "\n    border-block-end: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "rule-bottom"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_rule-left",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "border-inline-start"
      ],
      "css_rules": [
        "\n    border-inline-start: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "rule-left"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-grid_overflow",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "flex-flow",
        "min-width",
        "max-width"
      ],
      "css_rules": [
        "\n  flex-flow: row nowrap",
        "\n\n  .slds-col {\n    min-width: 11.25em",
        " /* equals 180px */\n    max-width: 22.5em"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "overflow"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_padded-medium",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "padding-inline"
      ],
      "css_rules": [
        "\n  padding-inline: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "padded-medium"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_padded-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "padding-inline"
      ],
      "css_rules": [
        "\n  padding-inline: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "padded-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_padded-around",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "padded-around"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_padded-around-medium",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "padded-around-medium"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-col_padded-around-large",
      "category": "Grid",
      "category_key": "grid",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "padded-around-large"
      ],
      "file": "grid.css"
    },
    {
      "class": "slds-list__item",
      "category": "Horizontal List",
      "category_key": "horizontal-list",
      "description": "",
      "properties": [
        "position",
        "display",
        "align-items"
      ],
      "css_rules": [
        "\n  position: relative",
        "\n  display: flex",
        "\n  align-items: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "item"
      ],
      "file": "horizontalList.css"
    },
    {
      "class": "slds-list_horizontal",
      "category": "Horizontal List",
      "category_key": "horizontal-list",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: flex"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "horizontal"
      ],
      "file": "horizontalList.css"
    },
    {
      "class": "slds-item",
      "category": "Horizontal List",
      "category_key": "horizontal-list",
      "description": "",
      "properties": [
        "position",
        "display",
        "align-items"
      ],
      "css_rules": [
        "\n  position: relative",
        "\n  display: flex",
        "\n  align-items: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "horizontalList.css"
    },
    {
      "class": "slds-hyphenate",
      "category": "Hyphenation",
      "category_key": "hyphenation",
      "description": "* The truncation class can be used on an element, or the truncation include can be added to an existing class.",
      "properties": [
        "overflow-wrap",
        "word-wrap",
        "hyphens"
      ],
      "css_rules": [
        "\n  overflow-wrap: break-word",
        "\n  word-wrap: break-word",
        "\n  hyphens: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "hyphenation.css"
    },
    {
      "class": "slds-text-link_reset",
      "category": "Interactions",
      "category_key": "interactions",
      "description": "* @summary Makes links and buttons appear as regular text",
      "properties": [
        "cursor",
        "line-height",
        "font-size",
        "outline"
      ],
      "css_rules": [
        "\n  cursor: pointer",
        "\n  line-height: inherit",
        "\n  font-size: inherit",
        "\n\n  &:active {\n    outline: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "reset"
      ],
      "file": "interactions.css"
    },
    {
      "class": "slds-text-link",
      "category": "Interactions",
      "category_key": "interactions",
      "description": "* Used in combination with `.slds-text-link--reset`, you can apply the class `.slds-text-link` to a child element to reset its styles back to that of a link.",
      "properties": [
        "color",
        "text-decoration",
        "transition"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-accent-2)",
        "\n  text-decoration: none",
        "\n  transition: color 0.1s linear",
        "\n\n  &:hover,\n  &:focus {\n    text-decoration: underline",
        "\n    color: var(--slds-g-color-accent-3)"
      ],
      "design_tokens": [
        "var(--slds-g-color-accent-2)",
        "var(--slds-g-color-accent-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "interactions.css"
    },
    {
      "class": "slds-has-blur-focus",
      "category": "Interactions",
      "category_key": "interactions",
      "description": "* Faux links are used on areas that can't be wrapped in an `a` element, but need to appear to be a link with an underline on hover. An example is in the page header for Object home. The `H1` and `button` that sit next to each other have the `.slds-text-link--faux` class on their parent element.",
      "properties": [
        "color",
        "text-decoration"
      ],
      "css_rules": [
        "\n  color: currentColor",
        "\n\n  &:hover,\n  &:focus,\n  &:active {\n    color: currentColor",
        "\n    text-decoration: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "interactions.css"
    },
    {
      "class": "slds-has-input-focus",
      "category": "Interactions",
      "category_key": "interactions",
      "description": "* Input focus styles, this is applied via JavaScript when needing to apply focus styles to a containing element when the input gets focus",
      "properties": [
        "outline",
        "border-color",
        "background-color",
        "box-shadow"
      ],
      "css_rules": [
        "\n  outline: 0",
        "\n  border-color: transparent",
        "\n  background-color: var(--slds-g-color-surface-container-1)",
        "\n  box-shadow: var(--slds-g-shadow-outline-focus-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-surface-container-1)",
        "var(--slds-g-shadow-outline-focus-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "interactions.css"
    },
    {
      "class": "slds-type-focus",
      "category": "Interactions",
      "category_key": "interactions",
      "description": "",
      "properties": [
        "border-block-end",
        "border-radius",
        "color",
        "cursor",
        "border-block-end-color"
      ],
      "css_rules": [
        "\n  border-block-end: var(--slds-g-sizing-border-1) solid transparent",
        "\n  border-radius: 0",
        "\n  color: currentColor",
        "\n  cursor: pointer",
        "\n\n  &:hover,\n  &:focus {\n    color: currentColor",
        "\n    border-block-end-color: currentColor"
      ],
      "design_tokens": [
        "var(--slds-g-sizing-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "interactions.css"
    },
    {
      "class": "slds-has-buffer",
      "category": "Layout",
      "category_key": "layout",
      "description": "* Global margin that can be applied to any element",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "layout.css"
    },
    {
      "class": "slds-has-full-bleed",
      "category": "Layout",
      "category_key": "layout",
      "description": "* Global margin reset that can be applied to any element",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "layout.css"
    },
    {
      "class": "slds-has-bottom-magnet",
      "category": "Layout",
      "category_key": "layout",
      "description": "* Assumes element below is connected",
      "properties": [
        "margin-block-end",
        "border-end-start-radius",
        "border-end-end-radius"
      ],
      "css_rules": [
        "\n  margin-block-end: 0 !important",
        "\n  border-end-start-radius: 0 !important",
        "\n  border-end-end-radius: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "layout.css"
    },
    {
      "class": "slds-has-top-magnet",
      "category": "Layout",
      "category_key": "layout",
      "description": "* Assumes element above is connected",
      "properties": [
        "margin-block-start",
        "border-start-start-radius",
        "border-start-end-radius"
      ],
      "css_rules": [
        "\n  margin-block-start: 0 !important",
        "\n  border-start-start-radius: 0 !important",
        "\n  border-start-end-radius: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "layout.css"
    },
    {
      "class": "slds-line-clamp",
      "category": "Line Clamp",
      "category_key": "line-clamp",
      "description": "* @summary Sets default line clamp of 3 lines for multi-line truncation, can be altered by a token",
      "properties": [
        "overflow",
        "display",
        "-webkit-box-orient",
        "-webkit-line-clamp",
        "text-overflow",
        "white-space"
      ],
      "css_rules": [
        "\n  overflow: hidden",
        "\n  display: -webkit-box",
        "\n  -webkit-box-orient: vertical",
        "\n  -webkit-line-clamp: 3",
        "\n  text-overflow: ellipsis",
        "\n  white-space: pre-line"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "lineClamp.css"
    },
    {
      "class": "slds-line-clamp_x-small",
      "category": "Line Clamp",
      "category_key": "line-clamp",
      "description": "* @summary Sets line clamp for x-small multi-line truncation",
      "properties": [
        "overflow",
        "display",
        "-webkit-box-orient",
        "-webkit-line-clamp",
        "text-overflow",
        "white-space"
      ],
      "css_rules": [
        "\n  overflow: hidden",
        "\n  display: -webkit-box",
        "\n  -webkit-box-orient: vertical",
        "\n  -webkit-line-clamp: 2",
        "\n  text-overflow: ellipsis",
        "\n  white-space: pre-line"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "lineClamp.css"
    },
    {
      "class": "slds-line-clamp_small",
      "category": "Line Clamp",
      "category_key": "line-clamp",
      "description": "* @summary Sets line clamp for small multi-line truncation",
      "properties": [
        "overflow",
        "display",
        "-webkit-box-orient",
        "-webkit-line-clamp",
        "text-overflow",
        "white-space"
      ],
      "css_rules": [
        "\n  overflow: hidden",
        "\n  display: -webkit-box",
        "\n  -webkit-box-orient: vertical",
        "\n  -webkit-line-clamp: 3",
        "\n  text-overflow: ellipsis",
        "\n  white-space: pre-line"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "lineClamp.css"
    },
    {
      "class": "slds-line-clamp_medium",
      "category": "Line Clamp",
      "category_key": "line-clamp",
      "description": "* @summary Sets line clamp for medium multi-line truncation",
      "properties": [
        "overflow",
        "display",
        "-webkit-box-orient",
        "-webkit-line-clamp",
        "text-overflow",
        "white-space"
      ],
      "css_rules": [
        "\n  overflow: hidden",
        "\n  display: -webkit-box",
        "\n  -webkit-box-orient: vertical",
        "\n  -webkit-line-clamp: 5",
        "\n  text-overflow: ellipsis",
        "\n  white-space: pre-line"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "lineClamp.css"
    },
    {
      "class": "slds-line-clamp_large",
      "category": "Line Clamp",
      "category_key": "line-clamp",
      "description": "* @summary Sets line clamp for large multi-line truncation",
      "properties": [
        "overflow",
        "display",
        "-webkit-box-orient",
        "-webkit-line-clamp",
        "text-overflow",
        "white-space"
      ],
      "css_rules": [
        "\n  overflow: hidden",
        "\n  display: -webkit-box",
        "\n  -webkit-box-orient: vertical",
        "\n  -webkit-line-clamp: 7",
        "\n  text-overflow: ellipsis",
        "\n  white-space: pre-line"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "lineClamp.css"
    },
    {
      "class": "slds-m-top_none",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-top_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: calc(var(--slds-g-spacing-var-block-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-top_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_none",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-right_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: calc(var(--slds-g-spacing-var-inline-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-right_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_none",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-bottom_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: calc(var(--slds-g-spacing-var-block-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-var-block-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-var-block-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-var-block-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-var-block-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-var-block-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-var-block-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-bottom_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-end: var(--slds-g-spacing-var-block-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_none",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-left_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: calc(var(--slds-g-spacing-var-inline-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-left_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_none",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: 0 !important",
        "\n  margin-inline-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: calc(var(--slds-g-spacing-1) / 2)",
        "\n  margin-inline-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-1)",
        "\n  margin-inline-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-2)",
        "\n  margin-inline-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-3)",
        "\n  margin-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-4)",
        "\n  margin-inline-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-5)",
        "\n  margin-inline-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-6)",
        "\n  margin-inline-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-horizontal_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-8)",
        "\n  margin-inline-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: calc(var(--slds-g-spacing-var-inline-1) / 2)",
        "\n  margin-inline-end: calc(var(--slds-g-spacing-var-inline-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-1)",
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-2)",
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-3)",
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-4)",
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-5)",
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-6)",
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-horizontal_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-inline-start",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-var-inline-8)",
        "\n  margin-inline-end: var(--slds-g-spacing-var-inline-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_none",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: 0 !important",
        "\n  margin-block-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: calc(var(--slds-g-spacing-1) / 2)",
        "\n  margin-block-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-1)",
        "\n  margin-block-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-2)",
        "\n  margin-block-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-3)",
        "\n  margin-block-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-4)",
        "\n  margin-block-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-5)",
        "\n  margin-block-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-6)",
        "\n  margin-block-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-vertical_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-8)",
        "\n  margin-block-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: calc(var(--slds-g-spacing-var-block-1) / 2)",
        "\n  margin-block-end: calc(var(--slds-g-spacing-var-block-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-1)",
        "\n  margin-block-end: var(--slds-g-spacing-var-block-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-2)",
        "\n  margin-block-end: var(--slds-g-spacing-var-block-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-3)",
        "\n  margin-block-end: var(--slds-g-spacing-var-block-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-4)",
        "\n  margin-block-end: var(--slds-g-spacing-var-block-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-5)",
        "\n  margin-block-end: var(--slds-g-spacing-var-block-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-6)",
        "\n  margin-block-end: var(--slds-g-spacing-var-block-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-vertical_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin-block-start",
        "margin-block-end"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-var-block-8)",
        "\n  margin-block-end: var(--slds-g-spacing-var-block-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_none",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-m-around_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_xxx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: calc(var(--slds-g-spacing-var-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_xx-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-var-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_x-small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-var-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_small",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-var-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_medium",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-var-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-var-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_x-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-var-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-var-m-around_xx-large",
      "category": "Margin",
      "category_key": "margin",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n  margin: var(--slds-g-spacing-var-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "margin.css"
    },
    {
      "class": "slds-media",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "* @summary Creates media object * * @selector .slds-media * @modifier",
      "properties": [
        "display",
        "align-items"
      ],
      "css_rules": [
        "\n  display: flex",
        "\n  align-items: flex-start"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-media__figure",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "* Defines the figure area * * @selector .slds-media__figure",
      "properties": [
        "flex-shrink",
        "margin-inline-end"
      ],
      "css_rules": [
        "\n  flex-shrink: 0",
        "\n  margin-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "figure"
      ],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-media__body",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "* Defines the body area * * @selector .slds-media__body * @modifier",
      "properties": [
        "flex",
        "min-width"
      ],
      "css_rules": [
        "\n  flex: 1",
        "\n  min-width: 0",
        " /* This fixes an issue with truncation inside flexbox due to the changes in flex basis (already in FFOX, coming to Chrome) */\n"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "body"
      ],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-media__figure_fixed-width",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "",
      "properties": [
        "min-width"
      ],
      "css_rules": [
        "\n  min-width: var(--slds-g-sizing-10)"
      ],
      "design_tokens": [
        "var(--slds-g-sizing-10)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "fixed-width"
      ],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-media-body-iefix",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "",
      "properties": [
        "flex-shrink",
        "flex-basis"
      ],
      "css_rules": [
        "\n  flex-shrink: 0",
        "\n  flex-basis: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-media__figure--reverse",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "figure--reverse"
      ],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-media--center",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "",
      "properties": [
        "align-items"
      ],
      "css_rules": [
        "\n  align-items: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-media--responsive",
      "category": "Media Object",
      "category_key": "media-object",
      "description": "",
      "properties": [
        "display",
        "margin"
      ],
      "css_rules": [
        "\n    display: block",
        "\n\n    .slds-media__figure {\n      margin: 0 0 $spacing-small"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "mediaObject.css"
    },
    {
      "class": "slds-item_label",
      "category": "Name Value List",
      "category_key": "name-value-list",
      "description": "* @summary Label of the name-value pair variant. Layout is modified by its parent class.",
      "properties": [
        "width",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n    width: 30%",
        "\n    padding-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "label"
      ],
      "file": "nameValueList.css"
    },
    {
      "class": "slds-item_detail",
      "category": "Name Value List",
      "category_key": "name-value-list",
      "description": "* @summary Label of the name-value pair variant. Layout is modified by its parent class.",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 70%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "detail"
      ],
      "file": "nameValueList.css"
    },
    {
      "class": "slds-list_horizontal",
      "category": "Name Value List",
      "category_key": "name-value-list",
      "description": "",
      "properties": [
        "width",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  /**\n   * @summary Label of the name-value pair variant. Layout is modified by its parent class.\n   */\n  .slds-item_label {\n    width: 30%",
        "\n    padding-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "horizontal"
      ],
      "file": "nameValueList.css"
    },
    {
      "class": "slds-list_vertical",
      "category": "Name Value List",
      "category_key": "name-value-list",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  .slds-item_label,\n  .slds-item_detail {\n    display: block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "vertical"
      ],
      "file": "nameValueList.css"
    },
    {
      "class": "slds-list_inline",
      "category": "Name Value List",
      "category_key": "name-value-list",
      "description": "",
      "properties": [
        "display",
        "max-width",
        "padding-inline-end",
        "flex-shrink",
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  display: inline-flex",
        "\n  max-width: 100%",
        "\n\n  .slds-item_label {\n    max-width: 180px",
        "\n    padding-inline-end: var(--slds-g-spacing-3)",
        "\n    flex-shrink: 0",
        "\n\n    ~ .slds-item_label {\n      padding-inline-start: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)",
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "inline"
      ],
      "file": "nameValueList.css"
    },
    {
      "class": "slds-p-top_none",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-top_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: calc(var(--slds-g-spacing-var-block-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-top_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_none",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-right_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: calc(var(--slds-g-spacing-var-inline-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-right_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_none",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-bottom_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: calc(var(--slds-g-spacing-var-block-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-var-block-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-var-block-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-var-block-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-var-block-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-var-block-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-var-block-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-bottom_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-end: var(--slds-g-spacing-var-block-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_none",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-left_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: calc(var(--slds-g-spacing-var-inline-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-left_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_none",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: 0 !important",
        "\n  padding-inline-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: calc(var(--slds-g-spacing-1) / 2)",
        "\n  padding-inline-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-1)",
        "\n  padding-inline-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-2)",
        "\n  padding-inline-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-3)",
        "\n  padding-inline-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-4)",
        "\n  padding-inline-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-5)",
        "\n  padding-inline-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-6)",
        "\n  padding-inline-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-horizontal_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-8)",
        "\n  padding-inline-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: calc(var(--slds-g-spacing-var-inline-1) / 2)",
        "\n  padding-inline-end: calc(var(--slds-g-spacing-var-inline-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-1)",
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-2)",
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-3)",
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-4)",
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-5)",
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-6)",
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-horizontal_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-inline-start",
        "padding-inline-end"
      ],
      "css_rules": [
        "\n  padding-inline-start: var(--slds-g-spacing-var-inline-8)",
        "\n  padding-inline-end: var(--slds-g-spacing-var-inline-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-inline-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_none",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: 0 !important",
        "\n  padding-block-end: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: calc(var(--slds-g-spacing-1) / 2)",
        "\n  padding-block-end: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-1)",
        "\n  padding-block-end: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-2)",
        "\n  padding-block-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-3)",
        "\n  padding-block-end: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-4)",
        "\n  padding-block-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-5)",
        "\n  padding-block-end: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-6)",
        "\n  padding-block-end: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-vertical_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-8)",
        "\n  padding-block-end: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: calc(var(--slds-g-spacing-var-block-1) / 2)",
        "\n  padding-block-end: calc(var(--slds-g-spacing-var-block-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-1)",
        "\n  padding-block-end: var(--slds-g-spacing-var-block-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-2)",
        "\n  padding-block-end: var(--slds-g-spacing-var-block-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-3)",
        "\n  padding-block-end: var(--slds-g-spacing-var-block-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-4)",
        "\n  padding-block-end: var(--slds-g-spacing-var-block-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-5)",
        "\n  padding-block-end: var(--slds-g-spacing-var-block-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-6)",
        "\n  padding-block-end: var(--slds-g-spacing-var-block-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-vertical_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding-block-start",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  padding-block-start: var(--slds-g-spacing-var-block-8)",
        "\n  padding-block-end: var(--slds-g-spacing-var-block-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-block-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_none",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: 0 !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: calc(var(--slds-g-spacing-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-p-around_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_xxx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: calc(var(--slds-g-spacing-var-1) / 2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_xx-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-var-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_x-small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-var-2)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_small",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-var-3)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_medium",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-var-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-var-5)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_x-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-var-6)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-6)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "x-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-var-p-around_xx-large",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-var-8)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-var-8)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "padding.css"
    },
    {
      "class": "slds-has-cushion",
      "category": "Padding",
      "category_key": "padding",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "padding.css"
    },
    {
      "class": "slds-is-static",
      "category": "Position",
      "category_key": "position",
      "description": "* @summary Reset positioning back to normal behavior",
      "properties": [
        "position"
      ],
      "css_rules": [
        "\n  position: static"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "position.css"
    },
    {
      "class": "slds-is-relative",
      "category": "Position",
      "category_key": "position",
      "description": "* @summary Used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout.",
      "properties": [
        "position"
      ],
      "css_rules": [
        "\n  position: relative"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "position.css"
    },
    {
      "class": "slds-is-fixed",
      "category": "Position",
      "category_key": "position",
      "description": "* @summary Used to position an element relative to the viewport.",
      "properties": [
        "position"
      ],
      "css_rules": [
        "\n  position: fixed"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "position.css"
    },
    {
      "class": "slds-is-absolute",
      "category": "Position",
      "category_key": "position",
      "description": "* @summary Used to position an element relative to its closest ancestor with relative positioning.",
      "properties": [
        "position"
      ],
      "css_rules": [
        "\n  position: absolute"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "position.css"
    },
    {
      "class": "slds-no-print",
      "category": "Print",
      "category_key": "print",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "print.css"
    },
    {
      "class": "slds-scrollable",
      "category": "Scrolling",
      "category_key": "scrolling",
      "description": "* @summary Forces element to scroll horizontally and vertically when content exceeds element's width and height",
      "properties": [
        "-webkit-overflow-scrolling",
        "overflow"
      ],
      "css_rules": [
        "\n  -webkit-overflow-scrolling: touch",
        "\n  overflow: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "scrolling.css"
    },
    {
      "class": "slds-scrollable_none",
      "category": "Scrolling",
      "category_key": "scrolling",
      "description": "* @summary Forces overflow items to not scroll within element's width and height",
      "properties": [
        "overflow"
      ],
      "css_rules": [
        "\n  overflow: hidden"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "none"
      ],
      "file": "scrolling.css"
    },
    {
      "class": "slds-scrollable_y",
      "category": "Scrolling",
      "category_key": "scrolling",
      "description": "* @summary Forces element to scroll vertically when content exceeds element's height",
      "properties": [
        "-webkit-overflow-scrolling",
        "max-height",
        "overflow",
        "overflow-y"
      ],
      "css_rules": [
        "\n  -webkit-overflow-scrolling: touch",
        "\n  max-height: 100%",
        "\n  overflow: hidden",
        "\n  overflow-y: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "y"
      ],
      "file": "scrolling.css"
    },
    {
      "class": "slds-scrollable_x",
      "category": "Scrolling",
      "category_key": "scrolling",
      "description": "* @summary Forces element to scroll horizontally when content exceeds element's width",
      "properties": [
        "-webkit-overflow-scrolling",
        "max-width",
        "overflow",
        "overflow-x"
      ],
      "css_rules": [
        "\n  -webkit-overflow-scrolling: touch",
        "\n  max-width: 100%",
        "\n  overflow: hidden",
        "\n  overflow-x: auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x"
      ],
      "file": "scrolling.css"
    },
    {
      "class": "slds-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 60rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_full",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "full"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n  width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 2",
        "\n  -ms-flex-order: 1",
        "\n  order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 3",
        "\n  -ms-flex-order: 2",
        "\n  order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 4",
        "\n  -ms-flex-order: 3",
        "\n  order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 5",
        "\n  -ms-flex-order: 4",
        "\n  order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 6",
        "\n  -ms-flex-order: 5",
        "\n  order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 7",
        "\n  -ms-flex-order: 6",
        "\n  order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 8",
        "\n  -ms-flex-order: 7",
        "\n  order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 9",
        "\n  -ms-flex-order: 8",
        "\n  order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 10",
        "\n  -ms-flex-order: 9",
        "\n  order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 11",
        "\n  -ms-flex-order: 10",
        "\n  order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 12",
        "\n  -ms-flex-order: 11",
        "\n  order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "-webkit-box-ordinal-group",
        "-ms-flex-order",
        "order"
      ],
      "css_rules": [
        "\n  -webkit-box-ordinal-group: 13",
        "\n  -ms-flex-order: 12",
        "\n  order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-x-small-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-x-small-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-small-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-small-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-medium-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-medium-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-large-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_xx-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "flex"
      ],
      "css_rules": [
        "\n    flex: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_xxx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 3rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xxx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_xx-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 6rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "xx-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_x-small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_small",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 15rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_medium",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_x-large",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40rem"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_3-of-3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_3-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_4-of-4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 20%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 40%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_3-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 60%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_4-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 80%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_5-of-5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_3-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_4-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_5-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_6-of-6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 14.2857%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 28.5714%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_3-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 42.8571%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_4-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 57.1429%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_5-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 71.4286%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_6-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 85.7143%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_7-of-7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 12.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_3-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 37.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_4-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_5-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 62.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_6-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_7-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 87.5%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_8-of-8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_1-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 8.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_2-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 16.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_3-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_4-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 33.333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_5-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 41.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_6-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_7-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 58.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_8-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 66.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_9-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_10-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 83.3333%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_11-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 91.6667%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-size_12-of-12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "width"
      ],
      "css_rules": [
        "\n    width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12-of-12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_1",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "1"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_2",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "2"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_3",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 3"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "3"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_4",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 4"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "4"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_5",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 5"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "5"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_6",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 6"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "6"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_7",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 7"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "7"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_8",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 8"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "8"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_9",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 9"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "9"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_10",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 10"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "10"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_11",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 11"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "11"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-max-large-order_12",
      "category": "Sizing",
      "category_key": "sizing",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n    order: 12"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "12"
      ],
      "file": "sizing.css"
    },
    {
      "class": "slds-text-body_regular",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Creates the 13px regular body copy",
      "properties": [
        "font-size"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-size-base)"
      ],
      "design_tokens": [
        "var(--slds-g-font-size-base)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "regular"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-body_small",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Creates a more pale-colored 12px copy",
      "properties": [
        "font-size"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-scale-neg-1)"
      ],
      "design_tokens": [
        "var(--slds-g-font-scale-neg-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-heading_large",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Very large 28px heading",
      "properties": [
        "font-size",
        "line-height"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-scale-6)",
        "\n  line-height: var(--slds-g-font-lineheight-2)"
      ],
      "design_tokens": [
        "var(--slds-g-font-scale-6)",
        "var(--slds-g-font-lineheight-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "large"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-heading_medium",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Large 20px heading",
      "properties": [
        "font-size",
        "line-height"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-scale-4)",
        "\n  line-height: var(--slds-g-font-lineheight-2)"
      ],
      "design_tokens": [
        "var(--slds-g-font-scale-4)",
        "var(--slds-g-font-lineheight-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "medium"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-heading_small",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Smaller 16px heading",
      "properties": [
        "font-size",
        "line-height"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-scale-2)",
        "\n  line-height: var(--slds-g-font-lineheight-2)"
      ],
      "design_tokens": [
        "var(--slds-g-font-scale-2)",
        "var(--slds-g-font-lineheight-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "small"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-title",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary 12px heading that is not all caps",
      "properties": [
        "font-size",
        "line-height",
        "color"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-scale-neg-1)",
        "\n  line-height: var(--slds-g-font-lineheight-2)",
        "\n  color: var(--slds-g-color-on-surface-1)"
      ],
      "design_tokens": [
        "var(--slds-g-font-scale-neg-1)",
        "var(--slds-g-font-lineheight-2)",
        "var(--slds-g-color-on-surface-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "text.css"
    },
    {
      "class": "slds-text-title_caps",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary All caps 12px heading",
      "properties": [
        "font-size",
        "color",
        "font-weight",
        "text-transform",
        "letter-spacing"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-scale-neg-1)",
        "\n  color: var(--slds-g-color-on-surface-1)",
        "\n  font-weight: var(--slds-g-font-weight-4)",
        "\n  text-transform: uppercase",
        "\n  letter-spacing: 0.0625rem"
      ],
      "design_tokens": [
        "var(--slds-g-font-scale-neg-1)",
        "var(--slds-g-color-on-surface-1)",
        "var(--slds-g-font-weight-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "caps"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-title_bold",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Bold 14px heading",
      "properties": [
        "font-size",
        "font-weight"
      ],
      "css_rules": [
        "\n  font-size: var(--slds-g-font-scale-neg-1)",
        "\n  font-weight: var(--slds-g-font-weight-7)"
      ],
      "design_tokens": [
        "var(--slds-g-font-scale-neg-1)",
        "var(--slds-g-font-weight-7)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "bold"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-line-height_reset",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Resets line-height to browser default",
      "properties": [
        "line-height"
      ],
      "css_rules": [
        "\n  line-height: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "reset"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-color_default",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Default color of text",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-on-surface-3)"
      ],
      "design_tokens": [
        "var(--slds-g-color-on-surface-3)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "default"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-color_weak",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Weak color of text",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-on-surface-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-on-surface-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "weak"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-color_error",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Error color of text",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-error-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-error-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "error"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-color_destructive",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Color of text for destructive actions",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-error-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-error-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "destructive"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-color_success",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Success color of text",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-success-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-success-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "success"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-color_inverse",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Default color of text on inversed background",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-100)"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-100)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "inverse"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-color_inverse-weak",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Weak color of text on inversed background",
      "properties": [
        "color"
      ],
      "css_rules": [
        "\n  color: var(--slds-g-color-neutral-base-70)"
      ],
      "design_tokens": [
        "var(--slds-g-color-neutral-base-70)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "inverse-weak"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-align_left",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Aligns text left",
      "properties": [
        "text-align"
      ],
      "css_rules": [
        "\n  text-align: start"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "left"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-align_center",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Aligns text center",
      "properties": [
        "text-align"
      ],
      "css_rules": [
        "\n  text-align: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "center"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-align_right",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Aligns text right",
      "properties": [
        "text-align"
      ],
      "css_rules": [
        "\n  text-align: end"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "right"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-text-longform",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Adds default spacing and list styling within a wrapper",
      "properties": [
        "margin-block-end"
      ],
      "css_rules": [
        "\n  h1,\n  h2,\n  h3,\n  p,\n  ul,\n  ol,\n  dl,\n  img {\n    margin-block-end: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "text.css"
    },
    {
      "class": "slds-text-font_monospace",
      "category": "Text",
      "category_key": "text",
      "description": "* @summary Monospace font family",
      "properties": [
        "font-family"
      ],
      "css_rules": [
        "\n  font-family: var(--slds-g-font-family-monospace)"
      ],
      "design_tokens": [
        "var(--slds-g-font-family-monospace)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "monospace"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-video",
      "category": "Text",
      "category_key": "text",
      "description": "",
      "properties": [
        "display",
        "max-width"
      ],
      "css_rules": [
        "\n    display: block",
        "\n    max-width: 100%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "text.css"
    },
    {
      "class": "slds-video_center",
      "category": "Text",
      "category_key": "text",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n    margin: 0 auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "center"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-video_right",
      "category": "Text",
      "category_key": "text",
      "description": "",
      "properties": [
        "margin"
      ],
      "css_rules": [
        "\n    margin: 0 0 0 auto"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "right"
      ],
      "file": "text.css"
    },
    {
      "class": "slds-truncate_container_25",
      "category": "Truncate",
      "category_key": "truncate",
      "description": "* @summary Truncates text at 25% of its parent container * * @selector .slds-truncate_container_25 * @modifier",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 25%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "25"
      ],
      "file": "truncate.css"
    },
    {
      "class": "slds-truncate_container_50",
      "category": "Truncate",
      "category_key": "truncate",
      "description": "* @summary Truncates text at 50% of its parent container",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 50%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "50"
      ],
      "file": "truncate.css"
    },
    {
      "class": "slds-truncate_container_75",
      "category": "Truncate",
      "category_key": "truncate",
      "description": "* @summary Truncates text at 75% of its parent container",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 75%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "75"
      ],
      "file": "truncate.css"
    },
    {
      "class": "slds-truncate_container_33",
      "category": "Truncate",
      "category_key": "truncate",
      "description": "* @summary Truncates text at 33% of its parent container",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 33%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "33"
      ],
      "file": "truncate.css"
    },
    {
      "class": "slds-truncate_container_66",
      "category": "Truncate",
      "category_key": "truncate",
      "description": "* @summary Truncates text at 66% of its parent container",
      "properties": [
        "max-width"
      ],
      "css_rules": [
        "\n  max-width: 66%"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "66"
      ],
      "file": "truncate.css"
    },
    {
      "class": "slds-truncate",
      "category": "Truncate",
      "category_key": "truncate",
      "description": "",
      "properties": [
        "max-width",
        "overflow",
        "text-overflow",
        "white-space",
        "a"
      ],
      "css_rules": [
        "\n  max-width: 100%",
        "\n  overflow: hidden",
        "\n  text-overflow: ellipsis",
        "\n  white-space: nowrap",
        "\n\n  a:focus-visible {\n    outline-offset: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "truncate.css"
    },
    {
      "class": "slds-align-content-center",
      "category": "Deprecated",
      "category_key": "deprecated",
      "description": "",
      "properties": [
        "flex",
        "align-self",
        "justify-content"
      ],
      "css_rules": [
        "\n  flex: 1",
        "\n  align-self: center",
        "\n  justify-content: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "utilities.deprecated.css"
    },
    {
      "class": "slds-box_border",
      "category": "Deprecated",
      "category_key": "deprecated",
      "description": "",
      "properties": [
        "padding",
        "border-radius",
        "border"
      ],
      "css_rules": [
        "\n  padding: 0",
        "\n  border-radius: var(--slds-g-radius-border-2)",
        "\n  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-radius-border-2)",
        "var(--slds-g-sizing-border-1)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "border"
      ],
      "file": "utilities.deprecated.css"
    },
    {
      "class": "slds-collapsed",
      "category": "Deprecated",
      "category_key": "deprecated",
      "description": "",
      "properties": [
        "height",
        "overflow"
      ],
      "css_rules": [
        "\n  height: 0",
        "\n  overflow: hidden"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "utilities.deprecated.css"
    },
    {
      "class": "slds-expanded",
      "category": "Deprecated",
      "category_key": "deprecated",
      "description": "",
      "properties": [
        "height",
        "overflow"
      ],
      "css_rules": [
        "\n  height: auto",
        "\n  overflow: visible"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "utilities.deprecated.css"
    },
    {
      "class": "slds-media__figure",
      "category": "Deprecated",
      "category_key": "deprecated",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n  order: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "figure"
      ],
      "file": "utilities.deprecated.css"
    },
    {
      "class": "slds-media__figure_reverse",
      "category": "Deprecated",
      "category_key": "deprecated",
      "description": "",
      "properties": [
        "order",
        "margin"
      ],
      "css_rules": [
        "\n  order: 3",
        "\n  margin: 0 0 0 var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "reverse"
      ],
      "file": "utilities.deprecated.css"
    },
    {
      "class": "slds-media__body",
      "category": "Deprecated",
      "category_key": "deprecated",
      "description": "",
      "properties": [
        "order"
      ],
      "css_rules": [
        "\n  order: 2"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "body"
      ],
      "file": "utilities.deprecated.css"
    },
    {
      "class": "slds-list__item",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "padding",
        "border-block-end"
      ],
      "css_rules": [
        "\n  padding: var(--slds-g-spacing-2)",
        "\n  border-block-end: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "item"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-is-selected",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "box-shadow",
        "background-color"
      ],
      "css_rules": [
        "\n  box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset",
        "\n  background-color: var(--slds-g-color-surface-container-2)"
      ],
      "design_tokens": [
        "var(--slds-g-color-accent-2)",
        "var(--slds-g-color-surface-container-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "verticalList.css"
    },
    {
      "class": "slds-has-divider",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "margin-block-start",
        "padding-block-start",
        "border-block-start"
      ],
      "css_rules": [
        "\n  margin-block-start: var(--slds-g-spacing-2)",
        "\n  padding-block-start: var(--slds-g-spacing-2)",
        "\n  border-block-start: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-2)",
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "verticalList.css"
    },
    {
      "class": "slds-is-nested",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "margin-inline-start"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-4)"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-4)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [],
      "file": "verticalList.css"
    },
    {
      "class": "slds-item",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "padding"
      ],
      "css_rules": [
        "\n  padding: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "verticalList.css"
    },
    {
      "class": "slds-list_dotted",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "margin-inline-start",
        "list-style"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-5)",
        "\n  list-style: disc"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "dotted"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-list_ordered",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "margin-inline-start",
        "list-style"
      ],
      "css_rules": [
        "\n  margin-inline-start: var(--slds-g-spacing-5)",
        "\n  list-style: decimal"
      ],
      "design_tokens": [
        "var(--slds-g-spacing-5)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "ordered"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-has-divider_top",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "border-block-start"
      ],
      "css_rules": [
        "\n  border-block-start: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "top"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-has-divider_top-space",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "border-block-start",
        "margin-block-start",
        "padding-block-start"
      ],
      "css_rules": [
        "\n  border-block-start: 1px solid var(--slds-g-color-border-1)",
        "\n  margin-block-start: var(--slds-g-spacing-2)",
        "\n  padding-block-start: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)",
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "top-space"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-has-divider_right",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "position",
        "display",
        "align-items"
      ],
      "css_rules": [
        "\n  position: relative",
        "\n  display: flex",
        "\n  align-items: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "right"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-has-divider_bottom",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "border-block-end"
      ],
      "css_rules": [
        "\n  border-block-end: 1px solid var(--slds-g-color-border-1)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "bottom"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-has-divider_bottom-space",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "border-block-end",
        "margin-block-end",
        "padding-block-end"
      ],
      "css_rules": [
        "\n  border-block-end: 1px solid var(--slds-g-color-border-1)",
        "\n  margin-block-end: var(--slds-g-spacing-2)",
        "\n  padding-block-end: var(--slds-g-spacing-2)"
      ],
      "design_tokens": [
        "var(--slds-g-color-border-1)",
        "var(--slds-g-spacing-2)"
      ],
      "uses_design_tokens": true,
      "responsive_variants": [
        "bottom-space"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-has-divider_left",
      "category": "Vertical List",
      "category_key": "vertical-list",
      "description": "",
      "properties": [
        "position",
        "display",
        "align-items"
      ],
      "css_rules": [
        "\n  position: relative",
        "\n  display: flex",
        "\n  align-items: center"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "left"
      ],
      "file": "verticalList.css"
    },
    {
      "class": "slds-assistive-text",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Hides an element yet enables a screen reader to read the element that is hidden",
      "properties": [
        "position",
        "margin",
        "border",
        "padding",
        "width",
        "height",
        "overflow",
        "clip",
        "text-transform",
        "white-space"
      ],
      "css_rules": [
        "\n  position: absolute !important",
        "\n  margin: -1px !important",
        "\n  border: 0 !important",
        "\n  padding: 0 !important",
        "\n  width: 1px !important",
        "\n  height: 1px !important",
        "\n  overflow: hidden !important",
        "\n  clip: rect(0 0 0 0) !important",
        "\n  text-transform: none !important",
        "\n  white-space: nowrap !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-is-collapsed",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Enables `.slds-assistive-text` to become visible on focus",
      "properties": [
        "height",
        "overflow"
      ],
      "css_rules": [
        "\n  height: 0",
        "\n  overflow: hidden"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-is-expanded",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Shows the elements inside the parent",
      "properties": [
        "height",
        "overflow"
      ],
      "css_rules": [
        "\n  height: auto",
        "\n  overflow: visible"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-hidden",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Hides an element from the page by setting the visibility property to `hidden`",
      "properties": [
        "visibility"
      ],
      "css_rules": [
        "\n  visibility: hidden !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-visible",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Shows the element by setting the visibility property to `visible`",
      "properties": [
        "visibility"
      ],
      "css_rules": [
        "\n  visibility: visible"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-hide",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Hides an element from the page by setting display propery to `none`",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-show",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Shows the element by setting display property to `block`",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-show_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Shows the element by setting display to `inline-block`",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-show_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Shows the element by setting display to `inline`",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-transition-hide",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Hides an element from the page by setting the opacity property set to `0`",
      "properties": [
        "opacity"
      ],
      "css_rules": [
        "\n  opacity: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-transition-show",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Shows the element using the opacity property set to `1`",
      "properties": [
        "opacity"
      ],
      "css_rules": [
        "\n  opacity: 1"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-x-small-show",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* Responsive show/hide classes",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-is-visually-empty",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "* @summary Hides element and removes width",
      "properties": [
        "visibility",
        "width"
      ],
      "css_rules": [
        "\n  visibility: hidden !important",
        "\n  width: 0"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-x-small-show_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-x-small-show_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-x-small-show-only",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-x-small-show-only_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-x-small-show-only_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-max-x-small-hide",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-small-show",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-small-show_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-small-show_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-small-show-only",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-small-show-only_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-small-show-only_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-max-small-hide",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-medium-show",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-medium-show_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-medium-show_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-medium-show-only",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-medium-show-only_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-medium-show-only_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-max-medium-hide",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-large-show",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n  display: none"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [],
      "file": "visibility.css"
    },
    {
      "class": "slds-large-show_inline-block",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline-block"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline-block"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-large-show_inline",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: inline"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "inline"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-hide_x-small",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-show_x-small",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-small"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-hide_small",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-show_small",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "small"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-hide_medium",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-show_medium",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "medium"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-hide_large",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-show_large",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "large"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-hide_x-large",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "visibility.css"
    },
    {
      "class": "slds-show_x-large",
      "category": "Visibility",
      "category_key": "visibility",
      "description": "",
      "properties": [
        "display"
      ],
      "css_rules": [
        "\n    display: none !important"
      ],
      "design_tokens": [],
      "uses_design_tokens": false,
      "responsive_variants": [
        "x-large"
      ],
      "file": "visibility.css"
    }
  ]
}

---
id: slds.guidance.blueprints
title: SLDS Blueprints Index
description: Complete index of SLDS blueprints by category with Lightning component mapping
summary: "Index of SLDS blueprints across 9 categories (Actions, Input, Layout, Navigation, Display, Data, Feedback, Overlay, Complex Components). Covers when to use blueprints vs Lightning Base Components."

artifact_type: index
domain: blueprints
topic: blueprints

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, learn]

refs:
  - slds.guidance.development
  - slds.guidance.design
  - slds.guidance.icons

tags: [blueprints, components, html, css, implementation]
keywords: [SLDS blueprints, component implementation, HTML structure, CSS classes, Lightning components, custom components]
---

# SLDS Blueprints Index

## Overview

Blueprints provide HTML structure, CSS classes, ARIA requirements, and code examples for each SLDS component. Each blueprint includes:

- **HTML structure**: Element hierarchy and required markup
- **CSS classes**: Root, element, modifier, size, and state classes
- **Styling hooks**: CSS custom properties for theming
- **Accessibility**: ARIA attributes, keyboard patterns, screen reader guidance
- **Code examples**: Usage examples for variants
- **Lightning component mapping**: Corresponding LWC when available

**Use blueprints** when building custom HTML/CSS, targeting non-Salesforce platforms, or when no Lightning Base Component exists.

**Use Lightning Base Components** when working within Salesforce (LWC, Aura, Visualforce) — they handle accessibility, events, and framework integration automatically.

---

## Blueprints by Category

### Actions

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Buttons** | Action triggers with text labels | `lightning-button` |
| **Button Icons** | Icon-only action triggers | `lightning-button-icon` |
| **Button Groups** | Related buttons in a row | `lightning-button-group` |
| **Docked Utility Bar** | Persistent bottom utility panel | N/A |

---

### Input

Form controls for user input and data entry.

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Checkbox** | Binary selection control | `lightning-checkbox` |
| **Checkbox Button** | Checkbox styled as a button | `lightning-checkbox-button` |
| **Checkbox Button Group** | Set of checkbox buttons in a fieldset | `lightning-checkbox-group` |
| **Checkbox Toggle** | Toggle-style checkbox | `lightning-input` (type="checkbox-button") |
| **Combobox** | Text input with dropdown list | `lightning-combobox` |
| **Counter** | Number input with increment/decrement controls | N/A |
| **Datepickers** | Calendar date selection | `lightning-input` (type="date") |
| **Datetime Picker** | Combined date and time selection | `lightning-input` (type="datetime") |
| **Dueling Picklist** | Multi-select with two lists | `lightning-dual-listbox` |
| **Expression** | Formula builder interface | N/A |
| **File Selector** | File upload with drag-and-drop | `lightning-file-upload` |
| **Form Element** | Wrapper for form inputs | N/A |
| **Input** | Text/number input | `lightning-input` |
| **Lookups** | Search and select from a dataset | `lightning-record-picker` |
| **Picklist** | Dropdown from predefined options | `lightning-combobox` |
| **Radio Group** | Single selection from exclusive options | `lightning-radio-group` |
| **Radio Button Group** | Radio buttons in a styled group | `lightning-radio-group` |
| **Rich Text Editor** | Text editor with formatting toolbar | `lightning-input-rich-text` |
| **Select** | Native dropdown selection | `lightning-combobox` |
| **Slider** | Numeric range input via draggable handle | `lightning-slider` |
| **Textarea** | Multi-line text input | `lightning-textarea` |
| **Timepicker** | Time selection interface | `lightning-input` (type="time") |
| **Visual Picker** | Visual tile-based selection | `lightning-radio-group` (with tiles) |

---

### Layout

Components for organizing and structuring content.

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Accordion** | Collapsible stacked sections | `lightning-accordion` |
| **Brand Band** | Visual header with branding | N/A |
| **Builder Header** | Header for app builder interfaces | N/A |
| **Cards** | Container with header/body/footer | `lightning-card` |
| **Carousel** | Slideshow with navigation controls | `lightning-carousel` |
| **Docked Form Footer** | Fixed bottom footer for form actions | N/A |
| **Expandable Section** | Collapsible content block | N/A |
| **Page Headers** | Page title, metadata, and actions | `lightning-record-view-form` |
| **Panels** | Structured side or overlay container | N/A |
| **Split View** | Resizable two-pane layout | N/A |
| **Summary Detail** | Collapsible key-value layout | N/A |
| **Tiles** | Card-like grid content items | `lightning-tile` |

---

### Navigation

Components for navigation and wayfinding.

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **App Launcher** | Grid for app discovery | N/A |
| **Breadcrumbs** | Hierarchical location trail | `lightning-breadcrumbs` |
| **Dynamic Menu** | Contextual menu in popover | N/A |
| **Global Header** | Primary application header | N/A |
| **Global Navigation** | Main navigation bar | `lightning-navigation` |
| **Menus** | Contextual action lists | `lightning-menu-item` |
| **Path** | Linear process stage indicator | `lightning-path` |
| **Scoped Tabs** | Tabs scoped to a context | `lightning-tabset` |
| **Tabs** | Switchable content panels | `lightning-tabset` |
| **Trees** | Hierarchical list | `lightning-tree` |
| **Vertical Navigation** | Vertical nav menu | `lightning-vertical-navigation` |
| **Vertical Tabs** | Vertical tab interface | `lightning-vertical-navigation` |

---

### Display

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Activity Timeline** | Chronological event list | `lightning-activity-timeline` |
| **Avatar** | User or entity image placeholder | `lightning-avatar` |
| **Avatar Group** | Stacked avatar collection | N/A |
| **Badges** | Small status label | `lightning-badge` |
| **Dynamic Icons** | Animated contextual icons | N/A |
| **Files** | File attachment card | N/A |
| **Icons** | SVG icons from SLDS sprite | `lightning-icon` |
| **Illustration** | Empty/error state graphic | N/A |
| **Pills** | Removable tag or filter token | `lightning-pill` |

---

### Data

Components for displaying structured data.

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Data Tables** | Sortable tabular data | `lightning-datatable` |
| **Tree Grid** | Hierarchical data table | `lightning-tree-grid` |

---

### Feedback

Components for communicating status and feedback.

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Alert** | Page-level status banner | N/A |
| **Notifications** | System notification messages | N/A |
| **Progress Bar** | Linear completion indicator | `lightning-progress-bar` |
| **Progress Indicator** | Multi-step process tracker | `lightning-progress-indicator` |
| **Progress Ring** | Circular progress indicator | `lightning-progress-ring` |
| **Scoped Notifications** | Notification scoped to a container | N/A |
| **Spinners** | Loading state indicator | `lightning-spinner` |
| **Toast** | Temporary notification message | N/A |
| **Trial Bar** | Trial status and call-to-action bar | N/A |

---

### Overlay

Components that appear above the main interface.

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Docked Composer** | Bottom-docked content creation panel | N/A |
| **Modals** | Blocking dialog overlay | N/A |
| **Popovers** | Contextual overlay anchored to trigger | N/A |
| **Prompt** | Confirmation or input dialog | N/A |
| **Tooltips** | Hover-triggered label | N/A |
| **Welcome Mat** | Onboarding introduction overlay | N/A |

---

### Complex Components

Advanced components with rich functionality.

| Blueprint | Description | Lightning Component |
|-----------|-------------|---------------------|
| **Chat** | Chronological chat message display | N/A |
| **Color Picker** | Color selection with hex/swatch input | N/A |
| **Drop Zone** | Drag-and-drop target area | N/A |
| **Feeds** | Chronological activity feed | N/A |
| **List Builder** | Drag-and-drop list ordering | N/A |
| **Map** | Interactive map display | `lightning-map` |
| **Publishers** | Content creation panel | N/A |
| **Setup Assistant** | Guided onboarding checklist | N/A |

---

## Framework Notes

- **LWC / Aura**: Prefer the mapped Lightning component when listed — it handles accessibility and events.
- **React / Vue / Angular / plain HTML**: Use the blueprint HTML structure and CSS classes directly.
- **Customization**: Apply styling hooks (CSS custom properties) to theme components without overriding base styles.

# Validation Checklists

Run through these checks before finalizing any SLDS-authored component. Check IDs align with the design-systems-slds-validate skill's quality-checks.md.


## Theming & Styling (T-series)

Code produced by this skill should score high on T-series checks.

| Check | What to verify | Audit ID |
|-------|---------------|----------|
| **Hook fallbacks** | Every `var(--slds-g-*)` has a fallback value | T002 |
| **Surface pairing** | `surface-*` bg paired with `on-surface-*` text | T010 |
| **Container pairing** | `surface-container-*` bg paired with `on-surface-*` text | T011 |
| **Accent pairing** | `accent-*` bg paired with `on-accent-*` text | T012 |
| **Feedback pairing** | Feedback colors paired with correct text hooks | T013 |
| **Spacing hooks** | Spacing uses `var(--slds-g-spacing-*)` or utility classes | T020 |
| **No magic pixels** | No arbitrary `px` values for spacing | T021 |
| **Font family hooks** | `font-family` uses `var(--slds-g-font-family-*)` | T030 |
| **Font size hooks** | `font-size` uses `var(--slds-g-font-scale-*)` or `var(--slds-g-font-size-base)` -- NOT `var(--slds-g-font-size-N)` | T031 |
| **Font weight hooks** | `font-weight` uses `var(--slds-g-font-weight-*)` | T032 |
| **Shadow hooks** | Shadows use `var(--slds-g-shadow-*)` | T040 |
| **Border radius hooks** | Border radius uses `var(--slds-g-radius-*)` | T041 |
| **Color hooks numbered** | Every `--slds-g-color-*` hook ends in a number (no bare `on-surface`, `on-accent`, etc.) | T050 |
| **No invented hooks** | Every hook referenced actually exists in `assets/hooks-index.json` | T051 |
| **No hardcoded colors** | No hex, rgb, or named colors (linter also catches this) | linter |
| **No class overrides** | No `.slds-*` class overrides (linter also catches this) | linter |
| **No deprecated tokens** | No `--lwc-*` tokens (linter also catches this) | linter |

---

## Code Quality (Q-series)

| Check | What to verify | Audit ID |
|-------|---------------|----------|
| **No !important** | No `!important` declarations | Q001 |
| **No inline styles** | No `style="..."` in HTML | Q002 |
| **Custom class prefix** | Custom classes use `my-*`, `c-*`, or namespace prefix | Q010 |
| **No dynamic SLDS class manipulation** | Avoid `.classList.add/remove/toggle('slds-*')` patterns in JS | Q012 |
| **No magic numbers** | All numeric values have clear purpose | Q020 |

---

## Component Usage (C-series)

| Check | What to verify | Audit ID |
|-------|---------------|----------|
| **LBC inputs** (LWC) | Use `<lightning-input>` not `<input>` | C001 |
| **LBC buttons** (LWC) | Use `<lightning-button>` not `<button>` | C002 |
| **LBC icons** (LWC) | Use `<lightning-icon>` not custom SVG | C003 |
| **Blueprint structure** | Cards use `slds-card`, modals use `slds-modal`, etc. | C010-C013 |

---

## Accessibility Reminders (A-series)

Deep accessibility is owned by the **accessibility skill**. These are minimal reminders to nudge agents.

| Check | What to verify | Audit ID |
|-------|---------------|----------|
| **Icon alt text** | All `<lightning-icon>` have `alternative-text` (empty string for decorative) | A004 |
| **Image alt text** | All `<img>` have `alt` attribute | A005 |
| **Color not sole indicator** | Status uses icon or text too, not just color | A030 |
| **No outline:none** | Don't remove focus outline without replacement | A021 |

For full WCAG compliance, apply the accessibility skill after authoring.

---

## Quick Validation Script

Run the SLDS linter to catch the most common issues automatically:

```bash
npx @salesforce-ux/slds-linter@latest lint .
```

The linter catches:
- `slds/class-override` -- overriding SLDS classes
- `slds/lwc-token-to-slds-hook` -- deprecated tokens
- `slds/no-hardcoded-values` -- hardcoded colors/spacing

Everything above the linter line must be checked manually or by the auditing skill.

# Component & Blueprint Selection

How to find the right SLDS artifact for a UI pattern.

---

## Decision Flow

```text
What framework?
├─ LWC → Check Lightning Base Component (LBC) first
│   ├─ LBC exists → Use it. Done.
│   └─ No LBC → Fall through to SLDS Blueprint
├─ React / Vue / Angular / vanilla → Skip LBC, go to SLDS Blueprint
└─ Any framework → No blueprint match? → Build custom with styling hooks
```

## Step 1: Check for LBC (LWC only)

Lightning Base Components are pre-built, accessible, themed LWC components.

**Always check first:** [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components)

Common LBCs and their use cases:

| Component | Use Case |
|-----------|----------|
| `lightning-button` | All button actions |
| `lightning-input` | Text, email, number, date inputs |
| `lightning-combobox` | Dropdown selection |
| `lightning-datatable` | Tabular data with sorting/selection |
| `lightning-card` | Content containers |
| `lightning-modal` | Dialog overlays |
| `lightning-icon` | SLDS icons |
| `lightning-layout` | Responsive grid layout |

If an LBC exists, use it. Do not build a custom version from blueprint markup.

## Step 2: Search SLDS Blueprints

Blueprints are HTML/CSS patterns that work in any framework. Use when no LBC exists or when not building in LWC.

### How to search

```bash
# Keyword search
node scripts/search-blueprints.cjs --search "dialog"

# Browse by category
node scripts/search-blueprints.cjs --category "Overlay"

# Get full details for a specific blueprint
node scripts/search-blueprints.cjs --name "modals"
```

### Blueprint categories

| Category | Examples |
|----------|----------|
| Layout | Cards, Tiles, Page Headers |
| Forms | Input, Select, Combobox, Checkbox, Radio, Textarea |
| Navigation | Tabs, Vertical Navigation, Breadcrumbs, Path |
| Data Display | Data Tables, Trees, Activity Timeline |
| Feedback | Alert, Toast, Scoped Notifications, Spinners |
| Overlay | Modals, Popovers, Tooltips, Prompt |
| Media | Avatar, Carousel, Files, Illustration |
| Actions | Buttons, Button Groups, Button Icons, Menus |

### How to read a blueprint YAML

Each file in `assets/blueprints/components/{name}.yaml` contains:

```yaml
name: "Modals"
description: "Dialog overlays..."
category: "Overlay"
slds_classes:
  root: "slds-modal"            # The BEM root class to apply
  elements:                     # Child element classes
    - class: "slds-modal__header"
      purpose: "Contains title and close action"
  modifiers:                    # Size/style variants
    - class: "slds-modal_large"
      usage: "For complex forms or detailed content"
  states:                       # State classes
    - class: "slds-fade-in-open"
accessibility:                  # Required ARIA attributes
  roles: ["dialog"]
  attributes: ["aria-modal", "aria-labelledby"]
example_html: "..."             # Reference markup
```

Use the `root` class, add `elements` for structure, `modifiers` for variants, and follow `accessibility` requirements.

## Step 3: Custom with Styling Hooks

If no LBC or blueprint matches your need, build custom markup with SLDS styling hooks.

See [styling-decision-guide.md](styling-decision-guide.md) for how to apply hooks correctly.

Rules for custom components:
- Use custom class prefixes (`my-*`, `c-*`) -- never override `slds-*` classes
- Use `var(--slds-g-*, fallback)` for all themeable values
- Follow the blueprint naming pattern (BEM-like) for consistency

---

## Deep Reference

- Full blueprint details: `references/blueprints-index.md`
- All blueprint YAMLs: `assets/blueprints/components/`
- LBC documentation: [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components)

# Examples

Worked examples showing the SLDS authoring workflow: from intent to artifact selection.

Each example follows the 5-phase workflow from SKILL.md and shows which files were consulted and why.


## Example 1: Build a Confirmation Dialog

### Phase 1: Understand the Need

- **Pattern:** Confirmation dialog before a destructive action
- **Framework:** LWC
- **States:** Open, confirming (loading), closed

### Phase 2: Select the Artifact

**Check LBC:** `LightningModal` exists in the [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components). Use it.

**Also search blueprints** (for class reference):

```bash
node scripts/search-blueprints.cjs --search "modal"
# Found: Modals (category: Overlay, root: slds-modal)
```

**Read blueprint YAML** for class details: `assets/blueprints/components/modals.yaml`

Key takeaway: `LightningModal` handles the `slds-modal`, `slds-backdrop`, and ARIA attributes automatically. No need to apply blueprint classes manually in LWC.

### Phase 3: Apply Styling

**Read:** `references/styling-decision-guide.md`

The destructive action button needs error color to signal danger:

```bash
node scripts/search-hooks.cjs --prefix "--slds-g-color-error-"
# Found: --slds-g-color-error-1 (#ea001e), --slds-g-color-on-error-1 (#ffffff)
```

**Result:** Use `variant="destructive"` on `lightning-button` inside the modal footer. The LBC handles the correct SLDS color hooks internally.

For the modal body spacing, use utility classes:

```html
<div class="slds-p-around_medium slds-text-align_center">
  <p>Are you sure you want to delete this record?</p>
</div>
```

### Phase 4: Add Icons

**Search:** `node scripts/search-icons.cjs --query "warning"`

```text
Found: utility:warning (score: 100, match: exact)
```

```html
<lightning-icon
    icon-name="utility:warning"
    alternative-text="Warning"
    variant="error"
    size="small"
    class="slds-m-right_x-small">
</lightning-icon>
```

### Phase 5: Validate (checklists.md)

- No hardcoded colors (using LBC variants + hooks)
- Icon has `alternative-text`
- Spacing uses utility classes (`slds-p-around_medium`, `slds-m-right_x-small`)
- No `.slds-*` overrides

---

## Example 2: Styled Card with Status Badge (Non-LWC)

### Phase 1: Understand the Need

- **Pattern:** A card showing a record with a colored status badge
- **Framework:** React (not LWC -- no LBCs available)
- **States:** Active, inactive, pending

### Phase 2: Select the Artifact

**LBC check:** Not applicable (React).

**Search blueprints:**

```bash
node scripts/search-blueprints.cjs --search "card"
# Found: Cards (category: Layout, root: slds-card)

node scripts/search-blueprints.cjs --search "badge"
# Found: Badges (category: Feedback, root: slds-badge)
```

**Read YAMLs:**
- `assets/blueprints/components/cards.yaml` -- classes: `slds-card`, `slds-card__header`, `slds-card__body`, `slds-card__footer`
- `assets/blueprints/components/badges.yaml` -- classes: `slds-badge`, modifiers: `slds-badge_lightest`, `slds-badge_inverse`

### Phase 3: Apply Styling

**Read:** `references/styling-decision-guide.md`

Card background and text use surface hooks. The status is conveyed by badge text plus a custom status accent on the card, rather than invented badge modifiers.

```html
<article class="slds-card my-status-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__body">
        <h2 class="slds-card__header-title slds-truncate">Account Name</h2>
      </div>
      <div class="slds-no-flex">
        <span class="slds-badge slds-badge_lightest">Active</span>
      </div>
    </header>
  </div>
  <div class="slds-card__body slds-card__body_inner">
    <p>Record details here</p>
  </div>
</article>
```

Custom styling for a subtle card border:

```css
.my-status-card {
  border-left: 3px solid var(--slds-g-color-accent-1, #0176d3);
}
```

Note: custom class uses `my-*` prefix, hook with fallback, no `.slds-*` overrides.

### Phase 4: Add Icons

**Search for a standard object icon:**

```bash
node scripts/search-icons.cjs --query "account" --category "standard"
# Found: standard:account (score: 100, match: exact)
```

In React (non-LWC), use the SVG blueprint pattern:

```html
<span class="slds-icon_container slds-icon-standard-account" title="Account">
  <svg class="slds-icon slds-icon_small" aria-hidden="true">
    <use xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
  </svg>
  <span class="slds-assistive-text">Account</span>
</span>
```

### Phase 5: Validate

- Card uses exact blueprint classes (`slds-card`, `slds-card__header`, etc.)
- Badge uses a real blueprint modifier (`slds-badge_lightest`), not an invented status variant
- Custom border uses `my-*` prefix and hook with fallback
- Icon uses `slds-assistive-text` for accessibility
- No hardcoded colors

---

## Example 3: Responsive Data Layout with Hooks

### Phase 1: Understand the Need

- **Pattern:** A responsive grid of metric cards
- **Framework:** LWC
- **States:** Loading (spinner), populated, empty (illustration)

### Phase 2: Select the Artifact

**LBC:** `lightning-card` for each metric card. `lightning-spinner` for loading.

**Search for empty state:**

```bash
node scripts/search-blueprints.cjs --search "illustration"
# Found: Illustration (category: Media, root: slds-illustration)
```

### Phase 3: Apply Styling

**Verify grid and spacing utilities** before using them:

```bash
node scripts/search-utilities.cjs --search "slds-grid"
# Found: slds-grid (category: grid, css: display: flex)

node scripts/search-utilities.cjs --search "slds-text-heading_large"
# Found: slds-text-heading_large (category: typography)

node scripts/search-utilities.cjs --search "slds-text-body_small"
# Found: slds-text-body_small (category: typography)
```

**Grid layout** uses utility classes (see `references/utilities-quick-ref.md`):

```html
<div class="slds-grid slds-wrap slds-gutters">
  <template for:each={metrics} for:item="metric">
    <div key={metric.id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
      <lightning-card title={metric.label}>
        <div class="slds-p-horizontal_small">
          <p class="slds-text-heading_large">{metric.value}</p>
          <p class="slds-text-body_small slds-text-color_weak">{metric.subtitle}</p>
        </div>
      </lightning-card>
    </div>
  </template>
</div>
```

**Custom metric styling** with hooks:

```css
.my-metric-value {
  font-size: var(--slds-g-font-scale-6, 2rem);
  font-weight: var(--slds-g-font-weight-7, 700);
  color: var(--slds-g-color-on-surface-3, #181818);
}

.my-metric-trend-up {
  color: var(--slds-g-color-success-1, #2e844a);
}

.my-metric-trend-down {
  color: var(--slds-g-color-error-1, #ea001e);
}
```

Note: trend colors use semantic feedback hooks (success/error), not hardcoded green/red.

**Empty state** uses the SLDS illustration blueprint:

```html
<template if:false={hasData}>
  <div class="slds-illustration slds-illustration_small">
    <img src="/img/chatter/Desert.svg" class="slds-illustration__svg" alt="" />
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">No metrics available</h3>
      <p class="slds-text-body_regular">Check back when data is loaded.</p>
    </div>
  </div>
</template>
```

### Phase 4: Add Icons

Trend indicators need icons:

```bash
node scripts/search-icons.cjs --query "arrow up"
# Found: utility:arrowup (score: 100)

node scripts/search-icons.cjs --query "arrow down"
# Found: utility:arrowdown (score: 100)
```

```html
<lightning-icon
    icon-name={metric.trendIcon}
    alternative-text={metric.trendLabel}
    size="xx-small"
    class="slds-m-left_xx-small">
</lightning-icon>
```

### Phase 5: Validate

- Grid uses `slds-grid` + `slds-col` + responsive `slds-*-size_*` classes
- Spacing uses utilities (`slds-p-horizontal_small`, `slds-m-left_xx-small`)
- Typography uses utilities (`slds-text-heading_large`, `slds-text-body_small`)
- Custom CSS uses `my-*` prefix and hooks with fallbacks
- Trend colors use semantic hooks (success/error), not hardcoded values
- Empty state uses SLDS illustration blueprint
- Icons have `alternative-text`

# Icons Decision Guide

How to select and use SLDS icons correctly.

---

## Icon Categories

SLDS provides 1,732 icons across 5 categories. Pick the right category first:

| Category | Purpose | Size | Example |
|----------|---------|------|---------|
| **utility** | UI affordances: actions, navigation, status indicators | 16-24px | `utility:search`, `utility:close`, `utility:save` |
| **standard** | Object/entity representations | 48px | `standard:account`, `standard:contact`, `standard:opportunity` |
| **action** | Actions on objects, typically in button icons | 24px | `action:new_task`, `action:edit`, `action:delete` |
| **custom** | Custom object representations (custom1-custom113) | 48px | `custom:custom1`, `custom:custom42` |
| **doctype** | File type representations | 48px | `doctype:pdf`, `doctype:excel`, `doctype:word` |

### Category Decision Tree

```text
What does the icon represent?
├─ A UI control or indicator? → utility
├─ A Salesforce object or entity? → standard
├─ An action the user can take? → action
├─ A custom object? → custom
└─ A file type? → doctype
```

---

## How to Search

```bash
# Semantic search with synonym matching
node scripts/search-icons.cjs --query "save button"

# Filter by category
node scripts/search-icons.cjs --query "user" --category "standard"

# List all categories
node scripts/search-icons.cjs --list-categories
```

The search engine matches against icon names, synonyms, and descriptions. Multi-word queries match across all fields with relevance scoring.

---

## Usage in LWC

Use `<lightning-icon>` for display and `<lightning-button-icon>` for interactive icons:

```html
<!-- Display icon -->
<lightning-icon
    icon-name="utility:search"
    alternative-text="Search"
    size="small">
</lightning-icon>

<!-- Interactive icon button -->
<lightning-button-icon
    icon-name="utility:close"
    alternative-text="Close dialog"
    title="Close"
    onclick={handleClose}>
</lightning-button-icon>
```

### Size options

| Size | Use for |
|------|---------|
| `xx-small` | Inline with text |
| `x-small` | Dense layouts |
| `small` | Default for utility icons |
| `medium` | Default for standard/custom icons |
| `large` | Hero/feature icons |

---

## Usage in Non-LWC (Blueprint Markup)

Use SVG with SLDS icon classes:

```html
<span class="slds-icon_container slds-icon-utility-search" title="Search">
  <svg class="slds-icon slds-icon_small" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
  </svg>
  <span class="slds-assistive-text">Search</span>
</span>
```

Key classes:
- `slds-icon_container` -- wrapper with background color
- `slds-icon` -- the SVG element
- `slds-icon_small` / `slds-icon_large` -- sizing
- `slds-icon-utility-*` / `slds-icon-standard-*` -- category-specific containers

---

## Accessibility Rules

**Every icon must have an accessibility story.**

| Scenario | LWC | Non-LWC |
|----------|-----|---------|
| **Meaningful icon** (conveys information) | `alternative-text="Description"` | `<span class="slds-assistive-text">Description</span>` |
| **Decorative icon** (next to text label) | `alternative-text=""` | `aria-hidden="true"` on SVG |
| **Interactive icon** (button) | `alternative-text="Action"` + `title="Tooltip"` | `aria-label="Action"` on button |

**Rules:**
- Never leave `alternative-text` undefined on `<lightning-icon>` -- set it to empty string `""` if decorative
- `title` provides a visible tooltip; `alternative-text` provides screen reader text
- Icon-only buttons always need `alternative-text` describing the action, not the icon

---

## Deep Reference

- Icon implementation guidance: `references/icons-guidance.md`
- Icons overview: `references/overviews/icons.md`
- Full icon metadata (1,732 icons with synonyms): `assets/icon-metadata.json`

---
id: slds.guidance.icons
title: SLDS Icons Guidance
description: Icon selection and implementation guidance for coding agents
summary: "Icon implementation guide covering the sprite:symbol naming model, category decision guide (action, utility, standard, custom, doctype), implementation patterns for Lightning and SLDS markup, and accessibility requirements."

artifact_type: guide
domain: icons
topic: icons

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement]

refs:
  - slds.guidance.development
  - slds.guidance.design
  - slds.guidance.blueprints

tags: [icons, sprites, svg, utility-icons, action-icons, standard-icons]
keywords: [icon sprites, utility icons, action icons, standard icons, custom icons, doctype icons, icon accessibility, SVG icons]
---

# SLDS Icons Guidance

## Overview

SLDS icons are a curated set of reusable SVG symbols grouped into **sprite categories**. They're used to add quick, consistent visual meaning to UI elements (buttons, navigation, record headers, status indicators, file types, and more).

This guidance covers:

- **Category guidance** for picking the right sprite
- **Implementation patterns** (Lightning + SLDS markup)
- **Accessibility requirements** for icons in UI

---

## Icon Naming Model (Critical)

An icon is referenced as:

- **`sprite:symbol`** (example: `utility:search`, `action:save`, `standard:account`)

Where:

- **sprite** = category (action, utility, standard, custom, doctype)
- **symbol** = the icon name within that sprite

---

## Category Decision Guide (What to Use When)

### Action Icons (`action:*`)

- **Use for**: verbs / user actions (save, delete, edit, add, close)
- **Common placements**: buttons, menus, toolbars, row actions
- **Rule of thumb**: if the UI text could start with "Do …", use `action:`

### Utility Icons (`utility:*`)

- **Use for**: general interface affordances and controls (search, settings, filter, chevrons)
- **Common placements**: nav, search fields, utility panels, small inline UI hints
- **Rule of thumb**: if it's a UI control concept (not a business object), use `utility:`

### Standard Icons (`standard:*`)

- **Use for**: Salesforce objects/entities (Account, Contact, Case, Opportunity)
- **Common placements**: record headers, object pickers, list tiles
- **Rule of thumb**: if the icon represents "what this thing is" (a noun/object), use `standard:`

### Custom Icons (`custom:*`)

- **Use for**: generic shapes/symbols, often for custom objects when no standard icon fits
- **Common placements**: custom object tiles, app launcher tiles, branded placeholders
- **Rule of thumb**: use `custom:` when `standard:` is not appropriate and you still want a "record/object style" icon

### Doctype Icons (`doctype:*`)

- **Use for**: file types (pdf, image, spreadsheet, etc.)
- **Common placements**: attachments, file lists, previews
- **Rule of thumb**: if you're representing a file format, use `doctype:`

---

## How to Search Icons

**Effective query patterns:**

- **Intent-first**: "save", "delete", "filter", "settings", "add user"
- **Object-first**: "account", "contact", "case"
- **UI affordance**: "chevron right", "close x", "search magnifier"

**Optional filters:**

- Restrict to a sprite category (action / utility / standard / custom / doctype)
- Limit results to keep responses tight

### Searchable Metadata Fields

Each icon entry in the JSON metadata supports these lookup strategies:

- **Exact match**: `category` + icon name (mapped to `sprite:symbol` at runtime, e.g. `utility:chevronright`)
- **Discovery**: `synonyms` (best for intent searches — e.g. "next" finds `chevronright`)
- **Styling**: `className` (computed as `slds-icon-{category}-{name}` for SLDS `<svg>` containers)
- **Context**: `description` (matches long-form queries about icon purpose)
- **RTL**: `directionality.hasRtl` (rare, but important for directional glyphs)

---

## Implementation Patterns

### Lightning Web Components (preferred inside Salesforce)

**Icon only:**

```html
<lightning-icon
  icon-name="utility:search"
  alternative-text="Search"
  title="Search"
  size="x-small">
</lightning-icon>
```

**Icon button:**

```html
<lightning-button-icon
  icon-name="action:save"
  alternative-text="Save"
  title="Save"
  onclick={handleSave}>
</lightning-button-icon>
```

### SLDS (raw HTML/SVG usage)

If you're implementing outside Lightning components, use the `className` from the JSON (example: `slds-icon-utility-search`) with the appropriate SLDS blueprint patterns for icon containers.

---

## Sizes

When rendering icons in Lightning Web Components, prefer the built-in size tokens on `lightning-icon` / `lightning-button-icon` instead of custom CSS.

| Size token | Typical use |
|-----------|-------------|
| `xx-small` | Inline with dense UI or text-adjacent glyphs |
| `x-small` | Compact layouts / tight controls |
| `small` | Default for most utility UI icons |
| `medium` | Default for object/record representation icons |
| `large` | Featured / hero contexts (use sparingly) |

---

## Accessibility Requirements (Do Not Skip)

### When the icon communicates meaning

- **Provide text** for assistive tech:
  - LWC: `alternative-text` (required), `title` (recommended)
  - HTML/SVG: ensure an accessible name via text, `aria-label`, or `title` as appropriate

### When the icon is purely decorative

- Hide it from assistive tech (don't create "noise"):
  - LWC: use an empty `alternative-text=""` only if the containing control already has an accessible label
  - HTML/SVG: `aria-hidden="true"` on the decorative icon element

### Don't rely on icons alone

If the icon represents status (success/error/warning), ensure there's **text and/or non-color cues** in addition to the icon.

---

## Icon Metadata Structure

All 1,732 icons are stored in a single `icon-metadata.json` file, keyed by icon name. Each entry includes:

- `displayName` — the icon identifier (e.g. `chevronright`, `add_contact`)
- `category` — sprite category: `action`, `utility`, `standard`, `custom`, `doctype`
- `synonyms` — search terms for discovery (e.g. `["next", "forward", "arrow", "chevron"]`)
- `description` — what the icon represents
- `directionality` — `type` (`common` or `directional`) and `hasRtl` flag

---
id: slds.guidance.overview.borders
title: Borders and Radius Overview
description: Foundational principles and constraints for border and radius decisions in SLDS
summary: "Comprehensive border guidance covering SLDS 2 design philosophy (minimal borders), border width usage, radius categories, and when borders are appropriate. Critical for SLDS 1 to SLDS 2 migration."

artifact_type: overview
domain: overviews
topic: borders

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.hooks.borders

tags: [borders, radius, corners, visual-structure, slds2-migration]
keywords: [border width, border radius, corners, SLDS 2 design, minimal borders, visual separation, container borders]
---

# Borders and Radius Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and constraints for all border and radius decisions in Salesforce Lightning Design System. Borders and radiuses are basic visual design elements that help create clarity, hierarchy, and a consistent look. When implementing components and layouts, follow these guidelines to ensure visual harmony and cohesion across all experiences.

---

## Core Principles

When working with borders and radiuses in UI interfaces, adhere to these foundational principles:

1. **Create clarity through structure.** Borders delineate components and sections for better readability and navigation. Use them to separate content areas, indicate clickable elements, or highlight active states.

2. **Support hierarchy and meaning.** Borders differentiate elements to show importance or interactivity. Ensure border treatments draw attention to important features without overwhelming the experience.

3. **Maintain consistency and harmony.** Apply consistent thickness, color, and radius across similar elements. Avoid mixing sharp and rounded corners within the same component to keep designs looking polished and cohesive.

4. **Foster accessibility.** Use subtle but effective visual cues to support usability for all users. Ensure borders remain visible and easy to perceive across all screen sizes and resolutions.

---

## SLDS 2 Design Philosophy

**CRITICAL:** SLDS 2 does not use borders around cards and components, unlike SLDS 1.

This represents a significant design shift from previous versions. When uplifting code from SLDS 1 to SLDS 2, remove decorative borders from cards, panels, and container components. SLDS 2 relies more on spacing, shadows, and surface colors to create visual separation rather than explicit borders.

**When borders ARE appropriate in SLDS 2:**
- Separating content using neutral borders to divide sections or groups of related content
- Highlighting interactive elements by applying neutral borders for structure, or accent colors for specific branded variants and focus states
- Communicating component states with context-appropriate colors like red for error states or lighter shades for disabled components
- Creating subtle divider lines between content areas

---

## Borders Fundamentals

### What are Borders?

Borders outline elements and provide structure, serving as visual separators, indicators of interactivity, or highlights for active or selected states. Border width, sometimes called stroke width, refers to the thickness of the lines that define the edges of components, containers, and other visual elements.

**Borders help with these design aspects:**
- Differentiate between various UI elements, such as cards, panels, or input fields
- Highlight important information and de-emphasize less important information
- Make content more accessible by ensuring that borders are always visible and easy to read on all screen sizes and resolutions

### Best Practices for Borders

- **Less is Best** — Apply borders sparingly to avoid visual clutter. SLDS 2 favors minimal border usage.
- **Consistency** — Use consistent thickness and color across similar elements.
- **Subtlety** — Use light or subtle borders to create separation without overwhelming the interface.

---

## Radius Fundamentals

### What is Radius?

Radius defines how rounded the corners are on elements. Borders have a radius, and container elements such as cards and buttons have a radius too. Rounded corners soften the visual appearance and create a more approachable design style.

**Radius contributes to the design in these ways:**
- Establish a consistent style for rounded corners across components such as cards, modals, and buttons
- Create a modern, approachable aesthetic that aligns with the brand identity
- Improve usability by subtly guiding users' focus to key interface elements

> **For radius sizing guidance** and component examples, refer to the Borders and Radius Styling Hooks documentation.

### Best Practices for Radius

- **Consistency** — Apply the same radius to similar elements for a cohesive design style throughout the interface.
- **Harmony** — Avoid mixing sharp and rounded corners. Mixing these styles within the same component can create a visually jarring experience and reduce design harmony.
- **Branding** — Use the radius to reflect the brand's personality. Whether the brand should be approachable, professional, or bold, use the SLDS 2 design guidelines to choose the right radius for the elements.
- **Usability** — Confirm through testing that rounded corners don't detract from clarity or usability, especially for focus and hover states in interactive elements.

### Nested Container Pattern

Nested containers should use the next smaller radius value to maintain visual harmony. For example, if an outer card uses `--slds-g-radius-border-4`, a nested card inside should use `--slds-g-radius-border-3`. This creates a consistent visual rhythm where inner elements have subtly tighter corners than their parent containers.

---

## Border Color Fundamentals

SLDS 2 uses specific colors for borders to align with the system's visual design, ensuring clarity and usability across all products.

### Common Border Colors and Meanings

- **Neutral grays** — The standard choice for creating structural separation and outlining functional components
- **Accent colors (Blue)** — Reserved for specialized branded treatments and thematic emphasis
- **Dark blue** — Indicates an element has focus
- **Red** — Indicates an error state
- **Yellow** — Indicates a warning state
- **Transparent or white** — Maintains visual balance in lighter or less prominent elements

### Where to Use Border Colors

- **Separate and outline content** — Use neutral gray borders to divide sections or outline standard functional components (buttons, inputs)
- **Highlight branded elements** — Apply accent colors for specialized branded treatments or thematic emphasis
- **Communicate focus** — Use dark blue focus indicators to support accessibility

> **For complete border color hook details**, refer to the Color Overview and Semantic Color Styling Hooks documentation, which covers the full semantic color system including border-specific tokens.

---

## Theming Considerations

SLDS 2 allows for customizable theming. When making changes to borders or radiuses:

- Ensure any customizations align with brand guidelines
- Maintain contrast ratios for accessibility
- Verify border treatments appear correctly across light/dark themes
- Use styling hooks to enable theme adaptability rather than hard-coded values

---

## Density Awareness Note

**Important:** Unlike spacing and typography, borders and radius values are NOT density-aware in SLDS 2. Border width and radius values remain constant regardless of whether the user has selected comfy or compact display density mode.

When implementing density-aware layouts, note that:
- Border thickness stays the same across density modes
- Radius values stay the same across density modes
- Spacing around bordered elements may change (via density-aware spacing hooks), but the borders themselves do not adapt

---

## Available Styling Hooks

### Border Width Hooks

- `--slds-g-sizing-border-*`

### Border Radius Hooks

- `--slds-g-radius-border-*`
- `--slds-g-radius-border-circle`
- `--slds-g-radius-border-pill`

### Border Color Hooks

Border color hooks are part of the semantic color system. Key hooks include:

- `--slds-g-color-border-*` — Neutral borders for functional structure
- `--slds-g-color-border-accent-*` — Branded emphasis and thematic exceptions
- `--slds-g-color-border-error-*` — Error state borders
- `--slds-g-color-border-success-*` — Success state borders
- `--slds-g-color-border-warning-*` — Warning state borders
- `--slds-g-color-border-disabled-*` — Disabled state borders
- `--slds-g-color-border-inverse-*` — Borders on dark backgrounds

> **For detailed usage patterns**, refer to the Borders and Radius Styling Hooks documentation.

---

## Implementation Workflow

Follow this sequence when implementing any border or radius solution:

### Step 1: Determine if a Border is Needed

Apply the SLDS 2 design philosophy — borders should be used sparingly. Ask:
- Is this border necessary for structure or clarity?
- Could spacing or shadows achieve the same visual separation?
- Am I uplifting from SLDS 1 where borders were used decoratively?

### Step 2: Select the Appropriate Treatment

If a border is needed, determine:
- **Width** — Select the visual weight needed for the component type
- **Radius** — Match to content density (smaller for dense, larger for spacious)
- **Color** — Select based on semantic meaning (neutral, accent, feedback, inverse)

### Step 3: Apply Styling Hooks

Never use hard-coded values. Use the appropriate styling hooks:
- Width: `--slds-g-sizing-border-*`
- Radius: `--slds-g-radius-border-*`
- Color: `--slds-g-color-border-*`

### Step 4: Validate Implementation

Before finalizing, verify the implementation using the Pre-Implementation Checklist below.

---

## Pre-Implementation Checklist

Before generating or modifying any border or radius related code, verify:

| Requirement | Status |
|-------------|--------|
| **Design Philosophy** | |
| Confirmed border is necessary (not decorative holdover from SLDS 1) | [ ] |
| Evaluated alternatives (spacing, shadows) before adding border | [ ] |
| **Hook Selection** | |
| Using styling hooks (no hard-coded pixel values) | [ ] |
| Width hook selected matches visual weight needed | [ ] |
| Radius hook selected matches content density | [ ] |
| Color hook selected matches semantic meaning | [ ] |
| **Consistency & Harmony** | |
| Consistent border treatment across similar elements | [ ] |
| No mixing of sharp and rounded corners in same component | [ ] |
| Border color aligns with surrounding design context | [ ] |
| **Accessibility** | |
| Border visible and perceivable across screen sizes | [ ] |
| Sufficient contrast with adjacent surfaces | [ ] |
| Focus states clearly indicated | [ ] |
| **Theming** | |
| Works across light/dark themes | [ ] |
| Maintains brand alignment | [ ] |

**Target outcome:** Clean, minimal interfaces that use borders purposefully for structure and meaning, not decoration. Visual separation achieved through spacing and depth where possible.

---
id: slds.guidance.overview.color
title: Color Overview
description: Foundational principles and constraints for all color decisions in SLDS
summary: "Comprehensive color guidance covering the 85-5-10 density rule, color role taxonomy, hook selection hierarchy, and numerical color system. The primary reference for all color implementation decisions."

artifact_type: overview
domain: overviews
topic: color

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.hooks.color.accent
  - slds.guidance.hooks.color.surface
  - slds.guidance.hooks.color.feedback
  - slds.guidance.hooks.color.system
  - slds.guidance.hooks.color.expressive-palette

tags: [color, semantic-color, accessibility, visual-hierarchy, theming]
keywords: [color roles, 85-5-10 rule, hook selection, semantic hooks, color taxonomy, surfaces, accents, feedback colors]
---

# Color Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and constraints for all color-related decisions in Salesforce Lightning Design System. Always reference the companion metadata files for specific token names, contrast pairings, and approved combinations.

---

## Core Principles

When working with colors in UI interfaces, adhere to these three foundational principles:

1. **Signal hierarchy and meaning.** Color must highlight actions, alerts, and key information without overpowering the experience. Do not use color decoratively.

2. **Accessibility is mandatory.** All implementations must meet WCAG 2.1 AA minimum standards for text and interactive elements. Use only the approved pairings documented in the metadata layer.

3. **Maintain system consistency.** Always use semantic styling hooks. These tokens automatically adapt to brand themes, density modes, and light/dark modes. Never use hard-coded color values.

---

## Color Role Taxonomy

Every element must be classified into one of these five color roles before selecting a token:

- **Surfaces:** The base canvas for content. Each new layer (panel, modal, popover) is a distinct surface with its own depth level. Use surface tokens for backgrounds.

- **Containers:** Elements that hold interactive or readable content (cards, buttons, tabsets). Always pair container background colors with their corresponding "on-container" tokens for text and icons.

- **Accents:** Colors that draw attention to primary interactions or selected states. Use sparingly and only for meaningful emphasis. Overuse destroys visual hierarchy.

- **Feedback colors:** Status indicators (error, warning, success, info, disabled). Reserve exclusively for CRUD operations and system feedback. Never use for general styling.

- **Borders/dividers:** Structural elements that create separation. Must maintain sufficient contrast with adjacent surfaces and containers.

---

## Color Density Rule (85-5-10)

**CONSTRAINT:** All UI implementations should maintain the following color distribution. This distribution is strongly recommended for maintaining SLDS visual consistency.

### UI Foundation: 85% (Required)
Foundational colors create the neutral canvas for all content. Use whites, light grays, dark grays, and dark blue for contrast with text and interactive elements.

**Allowed Palettes:** Whites, light grays, dark grays, dark blue  
**Usage:** Page backgrounds, surface layers, neutral containers, structural elements

### Accents: 5% (Required)
Accent colors are reserved for strategic emphasis on interactive elements. Use the foundational accent (electric blue) and feedback palettes (pink, yellow, teal, blue) to guide users toward task completion.

**Allowed Palettes:** Foundational accent (electric blue), feedback (pink, yellow, teal, blue), functional accent colors  
**Usage:** Primary actions, selected states, status indicators, critical CTAs

### Expressive Colors: 10% (Maximum)
Expressive palettes provide extended color options for data visualization and customized app experiences. Use with restraint.

**Allowed Palettes:** Green, Cloud Blue, Indigo, Purple, Violet, Red, Hot Orange, Orange  
**Usage:** Data charts, custom branding, visualization highlights, app-specific accents

**Strict Usage Rules:**
- **Cool tones first.** Prioritize Cloud Blue, Purple, Indigo, Violet for general page designs. These integrate better with the foundational palette.
- **Indigo warning.** Indigo resembles electric blue. Using it carelessly will break button hierarchy and confuse users about interactive affordances.
- **Warm = attention only.** Orange, Red, and Green signal importance or issues. Reserve them exclusively for drawing user attention to critical information.
- **Prevent feedback confusion.** Expressive colors can be misinterpreted as system feedback (pink=error, yellow=warning, teal=success, blue=info). Apply expressive colors minimally to avoid this conflict.

---

## The Numerical Color System

**System Architecture:** SLDS uses a 0-100 point scale where accessibility compliance is mathematically guaranteed:

- **100 points** = white
- **0 points** = black
- **Color lane** = full 0-100 spectrum of a single hue
- **Color step** = 5-10 point increments within a lane (e.g., Cloud Blue-15, Cloud Blue-25, Cloud Blue-35)

### How It Works

Colors share horizontal point values across different hues. This means the same mathematical rules apply:
- Vertically within each monochromatic palette (single lane)
- Horizontally across all color lanes (different hues)

This consistency enables pattern replication across the entire system.

### Automatic Accessibility: Magic Numbers

**CRITICAL:** Use these point separations to achieve WCAG compliance without manual checking:

| Separation | Contrast Ratio | Use Case | WCAG Level |
|------------|----------------|----------|------------|
| **50 points** | 4.5:1+ | Text on backgrounds, body copy | AA (required) |
| **40 points** | 3:1+ | UI elements, borders, non-text | AA (required) |

**Works across hues:** A 50-point separation maintains 4.5:1 contrast even when using different color lanes.

**Example Application:**
- Page background: Gray-95
- Button background: Any-50 (45 point difference = compliant)
- Button hover: Any-40 (55 point difference = compliant)
- Button text: Any-0 or Any-100 depending on background

The 10-point step from 50→40 creates consistent hover states across all color lanes.

**Attribution:** The "magic numbers" concept originates from the U.S. Web Design System (USWDS) and has been adopted into SLDS to ensure systematic color progression and accessibility.

---

## Implementation Workflow

Follow this mandatory sequence when implementing any color solution:

### Step 1: Classify the Element
Identify the element's semantic role:
- Is it a **surface** (background layer)?
- Is it a **container** (holds content)?
- Is it an **accent** (emphasis/interaction)?
- Is it **feedback** (status/state)?
- Is it a **border/divider** (structure)?

### Step 2: Reference the Metadata
Never invent color values. The companion metadata files contain:
- Approved styling hook names
- Pre-validated contrast pairings
- State transition sequences (default → hover → active → disabled)
- Theme adaptations (light/dark/branded)

### Step 3: Handle Exceptions
If no semantic hook matches the requirement:
1. Document why standard patterns don't apply
2. Verify contrast manually using the numerical system
3. Ensure brand consistency is maintained
4. Flag for design system team review

### Step 4: Validate Implementation
Before finalizing, verify the implementation using the Pre-Implementation Checklist below to ensure all color requirements are met.

---

## Metadata Integration

**Source of Truth:** The metadata files are authoritative for all implementation details.

**What the metadata provides:**
- Exact token names and values
- Pre-validated contrast pairings (text-on-background, icon-on-surface)
- State progression maps (default → hover → active → focus → disabled)
- Cross-reference between semantic roles and color values
- Theme-specific overrides

**When to consult metadata:**
- Before selecting any color token
- When implementing state changes
- When validating a custom pattern
- When introducing new component styles

**Validation question:** Does this color choice reinforce semantic meaning, meet accessibility standards, and maintain brand consistency?

---

## Hook Selection Hierarchy

When selecting color hooks, follow this decision order:

### 1. Semantic Hooks (First Choice — 85% of Cases)
**Pattern:** `--slds-g-color-{purpose}-{n}` (e.g., `error-1`, `accent-container-1`, `surface-1`)

Use semantic hooks for standard UI patterns. These hooks:
- Are purpose-built for specific UI use cases (errors, accents, surfaces, feedback)
- Automatically adapt to light/dark mode with curated values
- Have pre-validated accessibility pairings
- Reference system and palette hooks underneath

**Use when:** You can describe your element using semantic terms (surface, accent, error, warning, success, disabled).

### 2. System Hooks (Edge Cases — 5-10% of Cases)
**Pattern:** `--slds-g-color-{category}-base-{grade}` (e.g., `error-base-50`, `brand-base-40`)

Use system hooks when semantic hooks don't cover your specific need. These hooks:
- Provide grade-level control within a color category
- Still adapt to light/dark mode with curated values per mode
- Reference palette hooks underneath

**Use when:** Data visualization, legacy migration, or custom requirements where semantic hooks are insufficient.

### 3. Palette Hooks (Raw Access — Rare Cases)
**Pattern:** `--slds-g-color-palette-{color}-{grade}` (e.g., `palette-pink-50`, `palette-cloud-blue-30`)

Use palette hooks only when system hooks don't meet your requirements. These hooks:
- Provide direct access to the color palette by color name and grade
- Have light/dark mode variants
- Are the foundation that semantic and system hooks reference

**Use when:** Custom color requirements that don't fit any semantic or system category.

### Internal Hooks (Not for External Use)

The following hook prefixes are **internal to Salesforce** and should not be used by external developers:

| Prefix | Name | Audience |
|--------|------|----------|
| `--slds-s-*` | Shared hooks | Internal Salesforce only |
| `--slds-c-*` | Component hooks | Internal Salesforce only |

### How They Connect (Aliasing Chain)

Semantic hooks reference system hooks, which reference palette hooks. When the theme changes (light → dark), the underlying references change, so semantic hooks automatically adapt.

**Example:** `--slds-g-color-error-1`
- Light mode: → `error-base-50` → `palette-pink-50` → #hex
- Dark mode: → `error-base-40` → `palette-pink-40` → #different-hex

This aliasing chain means you get theme adaptation "for free" when using semantic hooks.

---

## Pre-Implementation Checklist

Before generating or modifying any color-related code, verify:

| Requirement | Status |
|-------------|--------|
| **Element Classification** | |
| Element classified by semantic role (surface/container/accent/feedback/border) | [ ] |
| **Token Selection & Metadata** | |
| Color token identified from metadata (no hard-coded hex/RGB values) | [ ] |
| Metadata consulted for approved styling hook names | [ ] |
| Pre-validated contrast pairings referenced from metadata | [ ] |
| "On" counterpart specified (for containers) | [ ] |
| **Contrast & Accessibility** | |
| Contrast requirements met using numerical system (50pts text, 40pts UI) | [ ] |
| Works with the numerical color system for automatic accessibility | [ ] |
| **Color Distribution & Usage** | |
| 85-5-10 density rule maintained (85% foundation, 5% accent, 10% expressive) | [ ] |
| Accent/feedback colors used sparingly and meaningfully | [ ] |
| Color reinforces semantic meaning rather than decorative use | [ ] |
| **Theme Support & States** | |
| All theme modes supported (light/dark/compact/branded) | [ ] |
| State transitions defined (hover/active/focus/disabled) | [ ] |
| Theme-specific overrides reviewed from metadata where applicable | [ ] |

**Target outcome:** Calm, purposeful interfaces that are unmistakably Salesforce. Color should enhance usability without becoming decorative.

---
id: slds.guidance.overview.display-density
title: Display Density Overview
description: Foundational guidance for implementing comfy and compact density modes in SLDS
summary: "Comprehensive display density guidance covering comfy vs compact settings, density-aware styling hooks, and responsive component design. Includes implementation workflow and common pitfalls."

artifact_type: overview
domain: overviews
topic: display-density

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.hooks.spacing
  - slds.guidance.hooks.typography

tags: [display-density, comfy, compact, responsive, user-preferences]
keywords: [comfy mode, compact mode, density-aware, user preferences, responsive design, data density, form layout]
---

# Display Density Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and guidance for implementing display density in Salesforce Lightning Design System. When working with SLDS components and interfaces, follow these guidelines to ensure consistent user experiences across both comfy and compact density settings.

---

## About Display Density

Display density controls the spacing and layout of interface elements within a given screen area. Salesforce Lightning Design System 2 (SLDS 2) offers two density settings: **comfy** and **compact**.

**Comfy** (the default setting) places labels on top of fields and adds more space between page elements, creating a spacious view with increased vertical and horizontal spacing. **Compact** increases visual density with labels on the same line as fields and less space between lines, allowing more information to be visible simultaneously.

**Key Requirement:** Because users select which display density setting to use, design Salesforce interfaces to work well in both settings. Display density is a user preference that must be supported universally across all implementations.

---

## Core Principles

When working with display density in UI interfaces, adhere to these foundational principles:

1. **Respect user preferences.** Display density is a user-controlled setting, not a design decision. Interfaces must function equally well in both comfy and compact modes, as users select their preferred density based on their needs and workflows.

2. **Design for both settings from the start.** Implement components with density-aware styling hooks to ensure seamless adaptation. Retrofitting density support is more complex than building it in from the beginning.

3. **Maintain accessibility across densities.** Both comfy and compact modes must meet WCAG standards. Touch targets, text readability, and visual hierarchy must remain accessible regardless of the density setting.

4. **Use density-aware styling hooks strategically.** Not every element needs to adapt to density changes. Identify which components truly benefit from density responsiveness—typically data-dense elements like tables, lists, forms, and navigation.

---

## Comfy Setting

Comfy is the default density setting in Salesforce. The comfy setting offers a spacious view with increased vertical and horizontal spacing, and vertically stacked form elements.

### Benefits of Comfy Setting

The comfy setting provides these benefits:

- **Better accommodation for localized content** with longer text strings, reducing truncation and improving internationalization support
- **Enhanced visual separation** for improved accessibility, particularly benefiting users with cognitive disabilities or those who benefit from clear visual grouping
- **Reduced cognitive load and better scannability**, particularly beneficial for new users learning the system or users navigating complex workflows

### Comfy Setting Guidelines

When implementing components for comfy mode, address these factors:

- **Critical information prominence:** Ensure that critical information remains prominent despite additional whitespace. The increased spacing should enhance, not diminish, the visibility of important content.
- **Localized content testing:** Test with localized content to verify that spacing accommodates longer text strings common in languages like German or Finnish.
- **Vertical scrolling requirements:** Elements use more vertical space in comfy mode, which may increase scrolling requirements for long forms or data-heavy screens.

---

## Compact Setting

Compact mode creates a denser view with reduced spacing between elements, more information visibility in the viewport, and horizontally stacked form elements.

### Benefits of Compact Setting

The compact setting provides these benefits:

- **Improved efficiency** when working with large data sets, allowing users to see and compare more records without scrolling
- **Reduced scrolling** for data-heavy screens, improving workflow efficiency for power users
- **More information visible simultaneously**, supporting tasks that require viewing multiple data points at once

### Compact Setting Guidelines

When implementing components for compact mode, address these critical factors:

- **Touch target accessibility:** Verify that touch targets remain large enough for comfortable interaction, meeting minimum size requirements of 44×44 pt/dp/px for mobile and 24×24 CSS pixels for desktop (with 44×44 recommended for Salesforce mixed environments).
- **Text readability:** Ensure that text remains readable with reduced spacing, maintaining appropriate line height and letter spacing for legibility.
- **Horizontal layout behavior:** Test how horizontal layouts behave in narrower viewports, ensuring form elements that stack horizontally don't create usability issues on smaller screens.

---

## User Control of Density

To personalize the look of Lightning Experience, users can change their display density setting through their profile menu. After a user changes their display density setting, the page automatically refreshes to apply the new density. Salesforce administrators can also set org-wide defaults.

**Implementation Requirement:** When designing and developing interfaces, ensure that the interface adapts appropriately to both density settings. Components must respond gracefully to density changes without breaking layouts or compromising functionality.

---

## Density-Aware Styling Hooks

Use density-aware styling hooks when specific areas, components, spacing, and typographical elements require the ability to adapt or respond to a user's density setting. Density-aware styling hooks are denoted by **"var"** in the naming convention (e.g., `--slds-g-spacing-var-1`) and act as responsive variables that change their values when the density setting changes.

### Elements That Benefit from Density-Aware Hooks

Implement density-aware styling hooks for these element types:

- **Data-dense components** like tables, lists, and grids where information density directly impacts usability
- **Form layouts and field arrangements** where spacing affects scannability and completion efficiency
- **Card and container padding** where internal spacing adapts to user preference
- **Navigation and toolbar spacing** where compact spacing supports power users while comfy spacing aids discoverability

### Matching Hooks to Properties

When implementing density-aware styling hooks, match the styling hooks with the appropriate CSS properties:

- **For all-sides spacing (top-bottom-left-right):** Use `--slds-g-spacing-var-[size]`
- **For horizontal spacing (left-right):** Use `--slds-g-spacing-var-inline-[size]`
- **For vertical spacing (top-bottom):** Use `--slds-g-spacing-var-block-[size]`
- **For font sizes:** Use `--slds-g-font-scale-var-[size]`
- **For font line height:** Use `--slds-g-font-lineheight-var-base`

### Implementation Example

When the system detects a density change, properties using density-aware hooks automatically adapt:

```css
/* This hook provides different values based on density setting */
.my-component {
  padding: var(--slds-g-spacing-var-4);
  /* Comfy: 1rem | Compact: 0.5rem */
}
```

---

## Available Density-Aware Styling Hooks

The following sections list all density-aware styling hooks available in SLDS. For detailed usage patterns, dos and don'ts, and accessibility requirements for spacing-related hooks, refer to the Spacing and Sizing Styling Hooks documentation.

### Density-Aware Spacing (All Sides)

These density-aware styling hooks control spacing applied equally to all sides of an element (top, bottom, left, right) when the system switches between comfy and compact display density settings.

**Hook Pattern:** `--slds-g-spacing-var-{size}` where `{size}` is the spacing size

> **Reference:** See Spacing and Sizing Styling Hooks for complete usage guidance, accessibility requirements, and implementation patterns.

### Density-Aware Vertical Spacing (Block Axis)

These density-aware styling hooks control spacing along the vertical (block) axis when the system switches between comfy and compact display density settings. This spacing corresponds to top and bottom margins or paddings.

**Hook Pattern:** `--slds-g-spacing-var-block-{size}` where `{size}` is the spacing size

> **Reference:** See Spacing and Sizing Styling Hooks for complete usage guidance, accessibility requirements, and implementation patterns.

### Density-Aware Horizontal Spacing (Inline Axis)

These density-aware styling hooks control spacing along the horizontal (inline) axis when the system switches between comfy and compact display density settings. This spacing corresponds to left and right margins or paddings.

**Hook Pattern:** `--slds-g-spacing-var-inline-{size}` where `{size}` is the spacing size

> **Reference:** See Spacing and Sizing Styling Hooks for complete usage guidance, accessibility requirements, and implementation patterns.

### Density-Aware Line Height

This density-aware styling hook controls the line height when the system switches between comfy and compact display density settings.

**Hook Pattern:** `--slds-g-font-lineheight-var-base`

### Density-Aware Font Scale

These density-aware styling hooks control the font scale when the system switches between comfy and compact display density settings.

**Hook Pattern:** `--slds-g-font-scale-var-{size}` where `{size}` is the density-aware scale step

---

## Responsive Density

Density settings control global spacing, but different screen sizes require additional responsive adjustments. Combine density-aware hooks with responsive design patterns to create interfaces that adapt to both user preferences and device constraints.

### Implementing Responsive Density

When building responsive components, follow this approach:

1. **Use SLDS standard CSS media queries** (30em, 48em, 64em, 80em) to define responsive breakpoints
2. **Apply appropriate SLDS density-aware styling hooks** within each media query breakpoint
3. **Test thoroughly** across device sizes in both density settings to ensure layouts work in all combinations

### Responsive Density Example

Use this pattern for implementing responsive table cell padding that adapts to both viewport size and density setting:

```css
/* Default (Mobile-first) padding */
.my-custom-table td,
.my-custom-table th {
  padding: var(--slds-g-spacing-var-1); /* Smallest padding for narrow screens */
}

/* Medium screens and up (768px+) */
@media (min-width: 48em) {
  .my-custom-table td,
  .my-custom-table th {
    /* Increase padding for tablets / small laptops */
    padding: var(--slds-g-spacing-var-3);
  }
}

/* Large screens and up (1024px+) */
@media (min-width: 64em) {
  .my-custom-table td,
  .my-custom-table th {
    /* Use larger padding for standard desktops */
    padding: var(--slds-g-spacing-var-4);
  }
}
```

---

## Custom Component Guidelines

When building custom components that need to respond to density, follow these guidelines to ensure consistent behavior with SLDS standards.

### Design Guidelines

When implementing custom density-aware components:

- **Analyze similar SLDS components:** Review how existing SLDS components adapt to density and follow similar patterns for consistency
- **Identify which elements need to adapt:** Not everything needs to respond to density changes. Focus density adaptation on spacing, typography, and form layouts
- **Use appropriate styling hooks:** Select hooks that match the property's purpose (spacing-var for padding/margin, font-scale-var for text sizing)
- **Test in both density settings:** Verify that your component works well in both comfy and compact modes before finalizing implementation

### Testing Custom Density Implementation

When validating custom density implementations, ensure that interfaces work well across display density settings:

- **Test the same screens in both comfy and compact settings** to verify visual consistency and functional parity
- **Check rendering in different screen regions and viewports** to ensure responsive density works across device sizes
- **Verify that touch targets remain accessible in compact setting**, meeting minimum size requirements (44×44 pt/dp/px recommended for Salesforce)
- **Confirm that text remains readable and hierarchy is maintained** with reduced spacing in compact mode
- **Verify that localized content displays properly** in both density settings, particularly for languages with longer text strings

---

## SLDS Components with Built-in Density Support

SLDS includes several components with built-in density adaptation that automatically respond to density changes through density-aware styling hooks.

### Components with Automatic Density Adaptation

The following components include density-aware styling hooks that enable automatic adjustments for different display densities:

- [Cards](https://www.lightningdesignsystem.com/2e1ef8501/p/33cd77-cards)
- [File selector](https://www.lightningdesignsystem.com/2e1ef8501/p/77d584-file-selector)
- [Tabs](https://www.lightningdesignsystem.com/2e1ef8501/p/1152cf-tabs)

### Component Blueprints with Configurable Density Support

When using component blueprints, use the standard SLDS markup patterns and CSS classes. The following component blueprints include density-aware styling hooks:

- [Cards](https://www.lightningdesignsystem.com/2e1ef8501/p/33cd77-cards)
- [Feed](https://v1.lightningdesignsystem.com/components/feeds/)
- [File selector](https://www.lightningdesignsystem.com/2e1ef8501/p/77d584-file-selector)
- [Page header](https://v1.lightningdesignsystem.com/components/page-headers/)
- [Path](https://v1.lightningdesignsystem.com/components/path/)
- [Split view](https://v1.lightningdesignsystem.com/components/split-view/)
- [Tabs](https://www.lightningdesignsystem.com/2e1ef8501/p/1152cf-tabs)

> **Reference:** To access component blueprints, see the [Salesforce Lightning Design System 1](https://v1.lightningdesignsystem.com/) website.

---

## Implementation Workflow

Follow this sequence when implementing density-aware components:

### Step 1: Determine Density Requirement

Identify whether your component needs density adaptation:
- **Does the component contain data-dense elements?** (tables, lists, grids)
- **Does spacing significantly impact usability?** (forms, cards, navigation)
- **Will users benefit from density control?** (power users vs. new users)

If the answer is yes to any of these, implement density-aware hooks.

### Step 2: Select Appropriate Hooks

Choose the correct density-aware hooks for your use case:
- **For padding/margin on all sides:** Use `--slds-g-spacing-var-*`
- **For vertical spacing only:** Use `--slds-g-spacing-var-block-*`
- **For horizontal spacing only:** Use `--slds-g-spacing-var-inline-*`
- **For text sizing:** Use `--slds-g-font-scale-var-*`
- **For line height:** Use `--slds-g-font-lineheight-var-base`

### Step 3: Implement with Appropriate Scale

Apply hooks with appropriate scale values:
- **Smaller values (1-4):** For compact elements, tight spacing
- **Medium values (5-8):** For standard component spacing
- **Larger values (9-12):** For section spacing and major divisions

### Step 4: Validate Implementation

Before finalizing, verify the implementation using the Pre-Implementation Checklist below to ensure all requirements are met across both density settings.

---

## Pre-Implementation Checklist

Before generating or modifying any display density related code, verify:

| Requirement | Status |
|-------------|--------|
| **Analysis & Planning** | |
| Component analyzed to determine if density adaptation is beneficial | [ ] |
| Similar SLDS components reviewed for density patterns | [ ] |
| Identified which elements need to adapt vs. remain fixed | [ ] |
| **Hook Selection** | |
| Appropriate density-aware hooks selected (spacing-var, font-scale-var, etc.) | [ ] |
| Hooks matched to correct CSS properties (spacing for margin/padding, font-scale for text) | [ ] |
| Appropriate scale values chosen (1-4 compact, 5-8 standard, 9-12 sections) | [ ] |
| No hard-coded spacing or sizing values (all use styling hooks) | [ ] |
| **Testing: Comfy Mode** | |
| Component tested in comfy density setting | [ ] |
| Visual hierarchy maintained with increased spacing | [ ] |
| Localized content accommodated (longer text strings) | [ ] |
| Critical information remains prominent despite additional whitespace | [ ] |
| **Testing: Compact Mode** | |
| Component tested in compact density setting | [ ] |
| Touch targets meet minimum size requirements (44×44 pt/dp/px recommended) | [ ] |
| Text remains readable with reduced spacing and line height | [ ] |
| Horizontal layouts work in narrower viewports | [ ] |
| **Cross-Density Validation** | |
| Visual consistency maintained - component maintains its visual identity in both modes | [ ] |
| Functional parity confirmed - all functionality works equally well in both densities | [ ] |
| Component behavior consistent with similar SLDS components | [ ] |
| **Responsive & Accessibility** | |
| Responsive breakpoints tested with both density settings | [ ] |
| Component works across viewport sizes in both densities | [ ] |
| Accessibility standards met in both modes (WCAG 2.1 AA) | [ ] |

**Target outcome:** Interfaces that respect user density preferences while maintaining accessibility, visual consistency, and functional parity across both comfy and compact settings.

---

## Related Documentation

For detailed implementation guidance and related concepts, refer to:

- **Spacing and Sizing Styling Hooks** - For complete density-aware spacing hook details, usage patterns, dos and don'ts, and accessibility requirements
- **Spacing and Sizing Overview** - For foundational spacing and sizing principles and the grid system architecture
- **Accessibility Overview** - For ensuring touch targets, contrast, and keyboard navigation work across density settings
- **Typography Guidance** (when available) - For font-scale density hooks and line height implementation patterns
- **Color Overview** - For understanding how spacing and density interact with visual hierarchy and surface layering

---
id: slds.guidance.overview.icons
title: Icons Overview
description: Foundational principles and guidance for implementing icons in SLDS
summary: "Comprehensive icon guidance covering utility, object, action, doctype, and custom icons. Includes icon selection decision tree, accessibility requirements, and visual specifications."

artifact_type: overview
domain: overviews
topic: icons

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.icons
  - slds.guidance.accessibility.overview

tags: [icons, iconography, utility-icons, object-icons, accessibility]
keywords: [icon types, utility icons, object icons, action icons, icon accessibility, informational icons, decorative icons]
---

# Icons Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and guidance for implementing icons in Salesforce Lightning Design System. When working with SLDS components and interfaces, follow these guidelines to ensure consistent, readable, and accessible iconography across all experiences.

---

## About Icons

Icons are symbols used to represent features, functionality, or content. They provide visual cues that help users navigate and interact with the interface more efficiently. Salesforce icon design blends professional and playful qualities, prioritizing simplicity, approachability, and legibility.

**Key Requirement:** To ensure an inclusive experience, implement icon accessibility by distinguishing between informational and decorative icons.

---

## Core Principles

When working with icons in UI interfaces, adhere to these four foundational principles:

1. **Choose the correct icon type for the context.** Match the icon category (utility, object, action, doctype, or product) to its specific functional role in the UI.
2. **Ensure accessibility compliance.** Distinguish between informational icons (requiring labels) and decorative icons (hidden from screen readers).
3. **Maintain visual consistency.** Follow SLDS standards for stroke weight, corner radius, and color usage to ensure a cohesive system.
4. **Follow the grid system and keyline shapes.** Align icons to the 8pt grid and use approved keyline shapes to maintain visual balance and weight.

---

## Icon Types

SLDS includes five distinct icon types, each optimized for specific use cases and platforms.

### 1. Utility Icons
Utility icons are simple, single-color glyphs that identify labels and actions. They are the most commonly used icons across all device types.

**Use for:**
- UI-specific actions (Close, Search, Edit, Settings)
- Global headers and navigation elements
- Button groups, alerts, and toasts
- Feed interactions (Share, Like, Comment)

**Anatomy and Specs:**
- **Grid Sizes:** 16x16px (small), 24x24px (standard).
- **Stroke Weight:** 1px (for 16px), 2px (for 24px).
- **Standard Scales:** 16x16, 24x24, 32x32, 48x48, and 60x60px.
- **Color:** No fixed background shape; can be any color (typically matches adjacent text).

**SLDS 2 Note:** Utility icons remain unchanged from SLDS 1.

### 2. Object Icons (Standard and Custom)
Object icons represent Salesforce entities. Standard icons are for core objects (e.g., Accounts), while custom icons represent customer-created objects.

**Use for:**
- Representing records in list views, search results, and page headers.
- Identifying entity types in related lists and cards.

**Anatomy and Specs:**
- **Background Shape:** White glyph on a solid colored circular background.
- **Grid Size:** 60x60px.
- **Stroke Weight:** 6px.
- **Corner Radius:** 6px (for glyph details).

**SLDS 2 Note:** The background shape for standard object icons has updated from a square to a **circle**.

> ** Accessibility Warning:** Not all custom object icons meet WCAG color contrast guidelines. Always pair them with text as decorative elements.

### 3. Action Icons
Action icons represent the primary ways users accomplish tasks on touch devices. They appear exclusively in the mobile action bar.

**Use for:**
- Touch-device specific actions (New Lead, Log a Call, Share Post).
- Mobile action bar interactions.

**Anatomy and Specs:**
- **Background Shape:** White glyph on a colored circle.
- **Grid Size:** 48x48px.
- **Stroke Weight:** 4px.
- **Artboard:** 52x52px with a 32x32px icon live area.

### 4. Doctype Icons
Doctype icons represent document file formats and are used when a file preview is unavailable.

**Use for:**
- Identifying file types (PDF, Word, Excel, Sheets, etc.).
- Feeds, publishers, cards, and related lists where files are attached.

**Anatomy and Specs:**
- **Background Shape:** Vertical rectangle (56x64px) with a folded corner (earflap).
- **Glyph:** White glyph or text abbreviation of the file extension.
- **Corner Radius:** 6px.

### 5. Product Icons
Product icons represent official Salesforce applications and feature product-specific branding.

**Use for:**
- App Launcher (Desktop) at 48x48px.
- Mobile device home screens and app headers.

**Anatomy and Specs:**
- **Glyph:** Two-color branded glyph on a white background.
- **Stroke:** 4px rounded stroke weight.

---

## Accessibility

Screen readers handle icons based on their functional role.

### Informational Icons
Icons that convey important information not present in surrounding text (e.g., a standalone button icon).
- **Requirement:** Must include an `aria-label` or assistive text.
- **Description Rule:** Describe the *purpose* (e.g., "Upload File"), not the *appearance* (e.g., "paperclip").

### Decorative Icons
Icons that reinforce adjacent text or provide purely visual interest.
- **Requirement:** Must use an empty `alt=""` tag or be hidden from screen readers.
- **Behavior:** Screen readers will skip these to avoid redundant announcements.

---

## Grid System and Keyline Shapes

SLDS icons are built on an 8pt grid system to ensure visual consistency across the entire library. Icons utilize four standard keyline shapes based on BPMN diagram conventions:
- **Circle**
- **Square**
- **Vertical Rectangle**
- **Horizontal Rectangle**

These shapes ensure that icons across different categories maintain consistent visual weight when appearing together.

---

## Mobile Tap Targeting

When designing for mobile, ensure icons are easy to select by providing adequate spacing.
- **Minimum Target Size:** Maintain a minimum tap target of 44x44px.
- **Spacing:** Add generous padding around icons in touch environments to prevent accidental taps.

---

## Usage and Best Practices

### Recommended Usage

| Context | Recommended Icon Type |
|---------|-----------------------|
| Generic UI Actions | Utility Icons |
| Record Representation | Object Icons |
| Mobile Action Bar | Action Icons |
| File Attachments | Doctype Icons |
| App Navigation | Product Icons |

### Implementation Constraints

- **Utility Color Matching:** Always match utility icon color to adjacent text (e.g., use `on-surface-3` if the title is that color).
- **White Glyphs:** Use only white glyphs for Object and Action icons.
- **Standard Scaling:** Only scale icons to standard sizes (16, 24, 32, 48, 60px). Avoid scaling outside these increments.

### Visual Standards (Dos and Don’ts)

#### Utility Icons
- ** Do:** Scale to standard pixel sizes (16x16, 24x24, etc.).
- ** Do:** Use front-facing solid shapes for clarity.
- ** Don't:** Use outlines or angled/dimensional views.
- ** Don't:** Make icons overly complicated for small scales.

#### Object Icons
- ** Do:** Use white glyphs on approved colored backgrounds.
- ** Do:** Use approved BPMN keyline shapes.
- ** Don't:** Use unapproved background shapes or non-white glyphs.

#### Doctype Icons
- ** Do:** Represent the earflap without a visible gap.
- ** Don't:** Add a gap or separation to the icon's earflap.

---

## Recommended Specs Summary

| Icon Type | Grid Size | Stroke Weight | Corner Radius | Artboard Size |
|-----------|-----------|---------------|---------------|---------------|
| Utility (S) | 16x16px | 1px | 1px | 52x52px |
| Utility (M) | 24x24px | 2px | 2px | 52x52px |
| Object | 60x60px | 6px | 6px | 100x100px |
| Action | 48x48px | 4px | 4px | 52x52px |
| Doctype | 56x64px | - | 6px | 56x64px |
| Product | 48x48px | 4px | - | - |

---

## Implementation Workflow

Follow this sequence when implementing icons:

1. **Identify Icon Need:** Determine the semantic role (action, record type, file, etc.).
2. **Select Icon Type:** Choose the category that matches the role (e.g., Utility for actions).
3. **Apply Sizing and Color:** Use standard scales and match colors to context (for Utility).
4. **Implement Accessibility:** Add `aria-label` for informational icons; use empty `alt` for decorative.
5. **Validate:** Check against the pre-implementation checklist for compliance.

---

## Pre-Implementation Checklist

| Requirement | Status |
|-------------|--------|
| **Type Selection** | |
| Icon type matches functional role (Utility/Object/Action/Doctype/Product) | [ ] |
| **Sizing & Specs** | |
| Icon scaled to standard size (16/24/32/48/60px) | [ ] |
| Anatomy specs (stroke, radius) match the chosen scale | [ ] |
| **Color & Consistency** | |
| Utility icon color matches adjacent text | [ ] |
| Object/Action icons use white glyphs on colored backgrounds | [ ] |
| **Accessibility** | |
| Informational icons have descriptive `aria-label` (purpose, not look) | [ ] |
| Decorative icons have empty `alt=""` or are hidden | [ ] |
| **Mobile** | |
| Touch target meets minimum 44x44px requirement | [ ] |

---
id: slds.guidance.overview.illustrations
title: Illustrations Overview
description: Foundational guidance for implementing illustrations in SLDS interfaces
summary: "Comprehensive illustration guidance covering empty states, informational states, and error states. Includes placement rules, sizing guidelines, accessibility requirements, and the one-illustration-per-page principle."

artifact_type: overview
domain: overviews
topic: illustrations

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.accessibility.overview

tags: [illustrations, empty-states, visual-design, user-experience]
keywords: [illustrations, empty states, error states, informational states, visual messaging, actionable guidance]
---

# Illustrations Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and guidance for implementing illustrations in Salesforce Lightning Design System. When working with SLDS components and interfaces, follow these guidelines to ensure illustrations are used purposefully to enhance clarity, personality, and user engagement.

---

## About Illustrations

Illustrations are engaging visuals that guide, inform, and delight users. In the Salesforce Lightning Design System (SLDS), they help communicate complex ideas, reinforce brand identity, and guide users through key moments in their journey. Illustrations are approachable and inclusive, reflecting the diversity of our users while aligning with the Salesforce brand.

**Key Requirement:** To ensure accessibility best practices, illustrations must always enhance the textual content, not replace it. Use them sparingly and align with the purpose and tone of the screen or message.

---

## Core Principles

When working with illustrations in UI interfaces, adhere to these four foundational principles:

1. **Prioritize clarity and purpose.** Illustrations should soften negative impressions and provide context. Use them to help users understand the state of the system or to guide them through a workflow.
2. **Accessibility is mandatory.** Illustrations must enhance textual content, never replace it. Always provide meaningful text alongside illustrations to ensure the experience is accessible to all users.
3. **Maintain visual restraint.** Use illustrations sparingly to avoid distracting users. Follow the "one illustration per page" rule to maintain focus on the primary task.
4. **Include actionable guidance.** Pair illustrations with clear, actionable UI text. If a page is empty, provide a link or button to help the user take the next step.

---

## Illustration Types

Illustrations in SLDS generally communicate one of three conditions: empty, informational, or error. The specific illustration and accompanying text vary depending on the context.

### Empty States
Empty state illustrations provide context when a page or component has no data to display.

**Use for:**
- Empty object list views (opportunities, leads, cases, contacts)
- Empty feeds (activity feeds, Chatter feeds)
- Empty dashboards or reports
- Blank canvas states requiring user action

### Informational
Informational illustrations support users as they explore new features, learn workflows, or encounter maintenance states.

**Use for:**
- System maintenance or scheduled downtime
- Authentication or connection prompts
- Onboarding and setup workflows
- Feature discovery or walkthrough introductions

### Error States
Error state illustrations offer reassurance and guidance when something goes wrong.

**Use for:**
- Page not found (404 errors)
- Access denied or permission errors
- Data unavailable or loading failures
- Lightning Experience compatibility issues
- Broken links or deleted content
- System failures or service disruptions

---

## Mobile Guidelines

When using illustrations on mobile devices, adjustments are necessary to ensure a consistent experience within smaller viewports.

- **Maximum Width:** 300px
- **Maximum Height:** 180px
- **UI Text:** Labels and body text must be shorter and use smaller font scales.

---

## Layouts

Illustrations can surface within Salesforce products in three primary layout contexts:

### Full Page
Used for major system states like 404 errors or initial onboarding where the illustration is the primary focus of the entire viewport.

### Main Body
Used within the main content area of a page, often for empty states in list views or dashboards.

### Panel or Sidebar
Used in narrower containers like utility panels, sidebars, or docked composers.

---

## Recommended Specs

The following specifications define the typography and sizing constraints for illustrations across desktop and mobile platforms.

### Desktop Specs

| Description | Styling Hooks | Value |
|-------------|---------------|-------|
| Title text | `--slds-g-font-scale-4` | - |
| Body text | `--slds-g-font-scale-2` | - |
| Text color | `--slds-g-color-on-surface-1` | - |
| Maximum image width | - | 600px |
| Maximum image height | - | 360px |

### Mobile Specs

| Description | Styling Hooks | Value |
|-------------|---------------|-------|
| Title text | `--slds-g-font-scale-3` | - |
| Body text | `--slds-g-font-size-base` | - |
| Text color | `--slds-g-color-on-surface-1` | - |
| Maximum image width | - | 300px |
| Maximum image height | - | 180px |

---

## UI Text Guidelines

UI text for illustrations must be clear, concise, and helpful. While these examples serve as guidelines, text should always be adapted to the specific context.

| State | Title | Body |
|-------|-------|------|
| Empty | Hmm… | No opportunities to display. |
| Empty | Collaborate with others | No updates here yet. |
| Informational | We are down for maintenance | Sorry for the inconvenience. We’ll be back shortly. |
| Informational | You’re not connected to Google Drive | Let’s get you authenticated. [Connect to Google Drive] |
| Error | Page not available | Maybe the page was deleted, the URL is incorrect, or something else went wrong. |
| Error | You don’t have access to this page | If you think you should have access, ask your admin for help. |
| Error | Data not available | The data you’re trying to access isn’t available. It might be due to a system error. |

---

## Usage and Best Practices

### Recommended Usage (Where & Why)

Illustrations are used to enhance scannability and provide visual context in specific scenarios. They are typically implemented in:

- **Empty states:** To provide context and reduce the "dead end" feeling of a blank page, guiding users on how to populate data (e.g., list views, dashboards).
- **Informational moments:** To support users during system maintenance, exploration of new features, or onboarding/setup workflows.
- **Error states:** To soften the impact of system failures or restricted access and provide a clear path forward (e.g., 404 pages, lack of permissions).
- **Feeds:** To encourage collaboration within activity or Chatter feeds.

### Implementation Constraints

To maintain SLDS visual consistency and performance, adhere to these constraints:

- **One per page:** Use only one illustration per page. Multiple illustrations create visual clutter and distract from the primary task.
- **Avoid small containers:** Do not use illustrations inside related lists, cards, or narrow components. Use plain inline text or icons for these areas.
- **No direct action feedback:** Do not use illustrations as feedback for direct user actions. Toasts, popovers, or banners are better suited for these interactions.

### Visual Standards

#### Character Positioning

Characters add personality but must not dominate the visual hierarchy of an illustration.

#####  Do

- Keep characters in the background to maintain focus on the message and system state.
- Integrate characters as supporting elements that enhance the context without becoming the primary focal point.

#####  Don't

- Avoid placing characters at the forefront of an illustration, as it can distract from the functional purpose of the screen.
- Never use characters as the sole indicator of the illustration's meaning.

---

## Implementation Workflow

Follow this sequence when implementing illustrations in your components:

### Step 1: Identify Illustration Need
Determine the state you are communicating:
- **Is the container empty?** (list views, feeds, dashboards)
- **Is the state informational?** (maintenance, onboarding, configuration)
- **Is there an error?** (page not found, no access, system failure)

### Step 2: Select Illustration Type
Choose an illustration that matches the tone and purpose identified in Step 1. Ensure the visual style is consistent with SLDS standards.

### Step 3: Apply Recommended Specs
Use the appropriate styling hooks for typography and respect the maximum dimensions for the target platform (Desktop vs. Mobile).

### Step 4: Add Accompanying UI Text
Write clear, concise, and actionable text. Ensure the body text includes a resolution path (e.g., a link to create a record or contact support).

### Step 5: Validate Accessibility
Ensure the illustration enhances the text and that all essential information is available via text. Verify that the layout works across different screen sizes and density settings.

---

## Pre-Implementation Checklist

Before finalizing any illustration implementation, verify:

| Requirement | Status |
|-------------|--------|
| **Classification & Selection** | |
| Illustration type matches the system state (empty/informational/error) | [ ] |
| Illustration chosen aligns with Salesforce approachable/inclusive brand | [ ] |
| **Styling & Specs** | |
| Typography uses recommended styling hooks (`--slds-g-font-scale-*`) | [ ] |
| Maximum dimensions respected for target platform (600x360 desktop, 300x180 mobile) | [ ] |
| One illustration per page limit maintained | [ ] |
| **Content & Copy** | |
| UI text provides clear title and helpful body content | [ ] |
| Actionable resolution path provided (e.g., links or buttons) | [ ] |
| **Accessibility** | |
| Illustration enhances rather than replaces textual content | [ ] |
| Sufficient contrast between text and background | [ ] |
| **Context & Placement** | |
| Layout context correctly identified (full page, main body, panel) | [ ] |
| Illustration used outside of related lists and cards | [ ] |

**Target outcome:** Purposeful, engaging illustrations that guide users through the Salesforce experience while maintaining brand consistency and accessibility standards.

---
id: slds.guidance.overview.shadows
title: Shadows and Elevation Overview
description: Foundational guidance for implementing shadows and visual depth in SLDS
summary: "Comprehensive shadow guidance covering elevation levels, component shadow mappings, directional shadows, and accessibility considerations. Explains box-shadow concepts and stacking order relationships."

artifact_type: overview
domain: overviews
topic: shadows

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.hooks.shadows

tags: [shadows, elevation, depth, visual-hierarchy, stacking]
keywords: [box shadow, elevation levels, visual depth, stacking order, z-index, component shadows]
---

# Shadows and Elevation Guidance for SLDS Implementation

**Purpose:** This document provides guidance for implementing shadows in Salesforce Lightning Design System. Shadows add depth and dynamic layers to the UI, making it look more interesting and less static. When implementing components and layouts, follow these guidelines to ensure visual hierarchy and elevation are communicated effectively.

---

## About Shadows

### What is Box Shadow?

The `box-shadow` CSS property adds a shadow effect to an element. This property sets values for horizontal and vertical offsets, blur radius, spread radius, and shadow color. The combination of these properties creates a shadow around the frame of an element.

Box shadows indicate elevation and are applied to elements to show which elements are on top of one another. Elevation is applied to elements to show that surfaces can move on top of one another.

The SLDS 2 design uses soft shadows to create a sense of depth and dimension in the user interface. They also help separate components from each other and create a more realistic look.

The styling hook for shadows uses the label `shadow`.

### Elevation System

When applying a shadow, match the priority or stacking order of the elements. Elements with a higher stacking order or which appear on top of others on the page should have higher shadow values. Leverage the z-index property to manage stacking order, and ensure that the elements with the highest shadow value appear above others on the page.

**Elevation Levels:**

| Level | Shadow Hook | Description |
|-------|-------------|-------------|
| Base Level | No shadow | Components on the surface that don't cover other components |
| Elevation Level 1 | `--slds-g-shadow-1` | Subtle depth |
| Elevation Level 2 | `--slds-g-shadow-2` | Moderate depth |
| Elevation Level 3 | `--slds-g-shadow-3` | Prominent depth |
| Elevation Level 4 | `--slds-g-shadow-4` | Maximum depth |

### Component Shadow Usage

| Shadow Hook | Components |
|-------------|------------|
| `--slds-g-shadow-1` | Page headers, joined tables, filter panels, dropdowns, inline edit, images, slider handles |
| `--slds-g-shadow-2` | Menu, docked form footer, docked utility bar, color picker, notifications |
| `--slds-g-shadow-3` | Panel, docked composer, tooltip, toast |
| `--slds-g-shadow-4` | Modal, popover, App Launcher |

### Base Level (No Shadow)

Components that are **base level** sit on the surface and don't cover up other components. Base level components do not have shadows in the SLDS 2 design.

The background color of a base level component depends on the color of the surface it sits on:
- On a gray surface: A base level component has a white background
- On a white surface: A base level component has a white background with a border

---

## Shadow Types

### Depth Shadows

Depth shadows communicate elevation and visual hierarchy. They indicate which elements appear above others in the stacking order.

**Hook Pattern:** `--slds-g-shadow-{n}` where `{n}` is the depth level

- `shadow-1` through `shadow-4` provide increasing depth levels
- `shadow-5` and `shadow-6` are aliases that inherit from `shadow-4`

### Directional Shadows

Directional shadow variants allow shadows to be cast in specific directions. These are useful for components that are positioned against edges of the screen.

**Hook Pattern:** `--slds-g-shadow-{direction}-{n}` where `{direction}` is the shadow direction and `{n}` is the depth level

**Directions:**
- `block-start` — Upward shadow
- `block-end` — Downward shadow (default direction, inherits from base shadow)
- `inline-start` — Left shadow
- `inline-end` — Right shadow

### Focus Shadows

Focus shadows provide visual feedback for keyboard navigation and accessibility. Focus states within the SLDS 2 design consist of a white border outline surrounded by a dark blue border outline. This style ensures that the focus state meets accessibility requirements for any background.

**Hook Pattern:** `--slds-g-shadow-{type}-focus-1` where `{type}` is the focus style

**Types:**
- `outline-focus` — Simple outline focus
- `outset-focus` — Double ring outset focus
- `inset-focus` — Single ring inset focus
- `inset-inverse-focus` — Double ring inset focus (inverse)

### Inset Shadows (Component-Level)

Button components use a hover bevel and inner shadow on click that is separate from the elevation system. Bevels and insets are only used on buttons and inputs where specified and shouldn't be used in custom situations.

**Button shadows:**
- `--slds-s-button-shadow-active` — Used on all buttons when pressed, regardless of color or border
- `--slds-s-button-shadow-focus` — Focus state for buttons
- `--slds-s-button-brand-shadow-hover` — Hover effect for brand buttons
- `--slds-s-button-bordered-shadow-hover` — Hover effect for bordered/neutral buttons

**Input shadows:**
- `--slds-s-input-shadow-focus` — Used on active/focused input fields

**Mark shadows (checkboxes, radios, toggles):**
- `--slds-s-mark-shadow-checked` — Used on selected or active checkboxes, radio buttons, and checkbox toggles
- `--slds-s-mark-shadow-focus` — Focus state for mark elements

---

## Available Styling Hooks

> **For detailed usage patterns**, refer to the Shadows Styling Hooks documentation.

### Global Shadow Hooks (`--slds-g-`)

**Depth Shadows:**
- `--slds-g-shadow-{1-6}`

**Directional Shadows:**
- `--slds-g-shadow-block-start-{1-4}`
- `--slds-g-shadow-block-end-{1-4}`
- `--slds-g-shadow-inline-start-{1-4}`
- `--slds-g-shadow-inline-end-{1-4}`

**Focus Shadows:**
- `--slds-g-shadow-outline-focus-1`
- `--slds-g-shadow-outset-focus-1`
- `--slds-g-shadow-inset-focus-1`
- `--slds-g-shadow-inset-inverse-focus-1`

### Shared Shadow Hooks (`--slds-s-`)

**Button Shadows:**
- `--slds-s-button-shadow-focus`
- `--slds-s-button-shadow-focus-inverse`
- `--slds-s-button-shadow-active`
- `--slds-s-button-brand-shadow-hover`
- `--slds-s-button-bordered-shadow-hover`

**Input Shadows:**
- `--slds-s-input-shadow-focus`
- `--slds-s-input-shadow-invalid`

**Mark Shadows:**
- `--slds-s-mark-shadow-focus`
- `--slds-s-mark-shadow-checked`

### Component Shadow Hooks (`--slds-c-`)

**Button Variant Shadows:**
- `--slds-c-button-success-shadow-hover`
- `--slds-c-button-destructive-shadow-hover`
- `--slds-c-button-inverse-shadow-hover`

---
id: slds.guidance.overview.spacing-and-sizing
title: Spacing and Sizing Overview
description: Foundational principles for spacing and sizing decisions in SLDS
summary: "Comprehensive spacing and sizing guidance covering the 4-point grid system, spacing scales, sizing scales, and responsive design patterns. Includes implementation workflow and pre-implementation checklist."

artifact_type: overview
domain: overviews
topic: spacing-and-sizing

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.hooks.spacing

tags: [spacing, sizing, layout, grid, margins, padding, dimensions]
keywords: [4-point grid, spacing scale, sizing scale, margins, padding, gaps, responsive design, layout]
---

# Spacing and Sizing Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and constraints for all spacing and sizing decisions in Salesforce Lightning Design System. When implementing components and layouts, follow these guidelines to ensure visual harmony, hierarchy, and consistency across all experiences.

---

## Core Principles

When working with spacing and sizing in UI interfaces, adhere to these foundational principles:

1. **Establish harmony through consistency.** Spacing and sizing create predictable patterns that help users navigate interfaces efficiently. Use the spacing and sizing styling hooks consistently to create visual rhythm and balance.

2. **Create hierarchy through deliberate spacing.** Strategic use of space directs user attention, differentiates grouped elements from unrelated ones, and establishes clear relationships between components.

3. **Ensure scalability and responsiveness.** Components must adapt seamlessly across devices and screen sizes. Use relative units and the SLDS styling hooks to support responsive design patterns.

---

## Spacing Fundamentals

### What is Spacing?

Spacing controls the empty areas around or within components, such as margins, padding, and gaps between elements. In the context of styling hooks, spacing refers to padding or margins applied around an element.

**Spacing defines these visual aspects:**
- Proper alignment of components
- Clear differentiation of grouped and unrelated elements
- White space that directs user attention to key content or actions

### Benefits of Effective Spacing

Effective spacing provides these benefits:
- **Improves readability** by preventing visual clutter and creating breathing room
- **Reduces cognitive load** by establishing clear visual relationships
- **Enhances usability** by making interactive elements easier to target and distinguish

### The 4-Point Grid System

SLDS spacing follows a modular scale based on multiples of 4, aligning with the 4-point grid system. This mathematical foundation ensures consistent spacing relationships throughout the interface.

**System Architecture:**
- Base unit: 0.25rem (4px equivalent)
- Scale progression: Each step increases in predictable increments
- Values are relative to root font size for scalability

### Density-Aware Spacing

SLDS provides density-aware spacing hooks that automatically adapt when the system switches between comfy and compact display density settings. These hooks ensure components respond appropriately to user density preferences.

**Hook Patterns:**
- **All-Sides:** `--slds-g-spacing-var-{size}` - Applies equally to top, bottom, left, right
- **Vertical (Block):** `--slds-g-spacing-var-block-{size}` - Top and bottom margins or padding
- **Horizontal (Inline):** `--slds-g-spacing-var-inline-{size}` - Left and right margins or padding

Where `{size}` represents the scale value appropriate for your spacing need.

> **For complete density-aware hook details** including comfy and compact values, refer to the Spacing and Sizing Styling Hooks documentation.

---

## Sizing Fundamentals

### What is Sizing?

Sizing refers to the dimensions of a component, such as height, width, or size variants. In the context of styling hooks, sizing refers to the fixed height or width of an element. When sizes are consistent, it's easier for users to predict where things will be on the page. This predictability makes the interface easier to use.

**Sizing defines these aspects:**
- Physical dimensions of elements like buttons, icons, and cards
- Scalable size options (small, medium, large) to accommodate different contexts
- Responsive behavior to ensure designs function well on all screen sizes

### Benefits of Consistent Sizing

Consistent sizing provides these benefits:
- **Creates predictability** by establishing recognizable component sizes
- **Enhances usability** by making interactive targets appropriately sized
- **Supports responsiveness** by providing size options that scale appropriately

### The 8-Point Grid System

While spacing uses a 4-point grid, sizing aligns with an 8-point grid system using multiples of 8. This ensures dimension values work harmoniously with the spacing system while providing appropriate scaling for component dimensions.

**System Architecture:**
- Smaller increments for precise control (1-9)
- Larger increments for major dimensions (10-16)
- Values are relative to root font size for scalability

---

## Understanding Padding vs. Margin

When implementing layouts, understand the distinction between padding and margin as they serve different purposes:

**Padding:**
- Controls **internal spacing** within a component
- Creates breathing room between a container's edge and its content
- Affects the component's total dimensions (when using border-box)
- Use spacing hooks for padding values

**Margin:**
- Defines **external spacing** around a component
- Creates separation between adjacent elements
- Does not affect the component's own dimensions
- Use spacing hooks for margin values

**Design systems follow a consistent margin strategy** so that components interact predictably and maintain harmonious spacing throughout the interface. Apply spacing values systematically rather than arbitrarily to maintain this consistency.

---

## Implementation Workflow

Follow this sequence when implementing any spacing or sizing solution:

### Step 1: Identify the Spacing/Sizing Need

Determine what you're trying to accomplish:
- **For spacing:** Is this internal space (padding) or external space (margin)?
- **For spacing:** Does this need to adapt to density settings (use density-aware hooks)?
- **For sizing:** Are you setting dimensions (height/width) for an element?
- **For sizing:** Is this for a small element (icon, button) or larger container?

### Step 2: Choose the Appropriate Scale

Evaluate the visual hierarchy and relationship:
- **Smaller values (1-4):** Compact layouts, tight spacing, small elements
- **Medium values (5-8):** Standard spacing, common component sizes
- **Larger values (9-12/16):** Section spacing, large containers, major divisions

### Step 3: Apply the Styling Hook

Use the appropriate hook for your context:
- **Standard spacing:** `--slds-g-spacing-*` for fixed spacing values
- **Density-aware spacing (all sides):** `--slds-g-spacing-var-*` for adaptive spacing
- **Density-aware vertical spacing:** `--slds-g-spacing-var-block-*` for top/bottom adaptive spacing
- **Density-aware horizontal spacing:** `--slds-g-spacing-var-inline-*` for left/right adaptive spacing
- **Element sizing:** `--slds-g-sizing-*` for dimensions

### Step 4: Handle Exceptions

If no standard hook matches the requirement:
1. Document why standard patterns don't apply
2. Evaluate if a combination of hooks could achieve the goal
3. Ensure the custom approach maintains visual consistency
4. Flag for design system team review

### Step 5: Validate Implementation

Before finalizing, verify the implementation using the Pre-Implementation Checklist below to ensure all spacing and sizing requirements are met.

---

## Pre-Implementation Checklist

Before generating or modifying any spacing or sizing related code, verify:

| Requirement | Status |
|-------------|--------|
| **Need Identification** | |
| Spacing need identified (padding vs. margin, internal vs. external space) | [ ] |
| Sizing need identified (element dimensions vs. container size) | [ ] |
| Determined if spacing should adapt to density settings | [ ] |
| **Hook Selection & Scale** | |
| Appropriate hook selected from defined scale (no hard-coded pixel values) | [ ] |
| Scale value chosen matches visual hierarchy (1-4 compact, 5-8 standard, 9-12/16 sections) | [ ] |
| Correct hook type selected (spacing vs. spacing-var vs. sizing) | [ ] |
| **Grid System Alignment** | |
| Spacing aligns with 4-point grid system | [ ] |
| Sizing aligns with 8-point grid system | [ ] |
| **Proper Hook Usage** | |
| Spacing hooks used only for margins/padding (not dimensions) | [ ] |
| Sizing hooks used only for dimensions (not spacing) | [ ] |
| Semantic styling hooks used (no hard-coded values) | [ ] |
| **Density & Responsiveness** | |
| Density-aware hooks used when components need to adapt | [ ] |
| Density-aware hooks selected support both comfy and compact modes where applicable | [ ] |
| Layout responsive design requirements applied for viewport adaptability | [ ] |
| Works across all viewport sizes | [ ] |
| **Visual Consistency** | |
| Visual hierarchy maintained through spacing choices | [ ] |
| Component spacing consistent with similar elements | [ ] |
| Follows established patterns for similar components | [ ] |

**Target outcome:** Harmonious, predictable interfaces that maintain visual consistency and adapt seamlessly across devices, screen sizes, and user density preferences.

---

## Related Documentation

For detailed implementation guidance, refer to:
- **Spacing and Sizing Styling Hooks** - For complete hook listings, density-aware values, and usage patterns
- **Color Overview** - For understanding how spacing interacts with visual depth and surface layering
- **Accessibility Overview** - For ensuring spacing supports touch targets and keyboard navigation

---
id: slds.guidance.overview.typography
title: Typography Overview
description: Foundational principles and guidance for implementing typography in SLDS
summary: "Comprehensive typography guidance covering system fonts, font scales, weights, line heights, and content width. Includes core principles, implementation workflow, and pre-implementation checklist."

artifact_type: overview
domain: overviews
topic: typography

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.hooks.typography

tags: [typography, fonts, text, hierarchy, readability, accessibility]
keywords: [font scale, font weight, line height, system fonts, typography hierarchy, text sizing, legibility]
---

# Typography Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and guidance for implementing typography in Salesforce Lightning Design System. When working with SLDS components and interfaces, follow these guidelines to ensure consistent, readable, and accessible typography across all experiences.

---

## About Typography

Typography is a cornerstone of any design system, shaping how users consume and understand content. In the Salesforce Lightning Design System (SLDS), typography is standardized to create a consistent, readable, and accessible experience across all products. SLDS uses a predefined set of font sizes, weights, and styles that adapt to various screen sizes and contexts.

The design system leverages system fonts provided by a user device's operating system, ensuring optimal performance and native feel across different platforms. The system font varies by device: SF Pro on macOS/iOS, Segoe UI on Windows, and Roboto on Android.

**Key Requirement:** Because typography establishes the foundation for content hierarchy and readability, implement SLDS typography styling hooks consistently across all interfaces. Typography choices directly impact user comprehension, task completion speed, and overall accessibility.

---

## Core Principles

When working with typography in UI interfaces, adhere to these foundational principles:

1. **Prioritize legibility above all else.** To make text readable across devices and contexts, use appropriate font sizes and weights from the SLDS scale. Overly light or small text for essential content compromises usability and accessibility.

2. **Establish clear visual hierarchy.** To guide users through content efficiently, consistently apply the predefined heading styles, font scales, and text colors. Maintaining the SLDS typography scale creates predictable visual patterns that help users navigate complex interfaces.

3. **Use styling hooks for all typography.** To ensure consistency and receive automatic SLDS updates, use typography styling hooks instead of hardcoding font styles. Styling hooks provide resilience across theme changes and density settings.

4. **Meet accessibility requirements.** To make content accessible to all users, ensure proper contrast between text and background colors, use minimum font sizes for readability, and maintain appropriate line heights. 

---

## System Fonts

SLDS leverages the native fonts provided by each operating system, creating a seamless, high-performance user experience that feels natural on every platform.

### Why System Fonts?

System fonts provide these benefits:
- **Optimal performance:** No font downloads required, reducing page load time
- **Native appearance:** Interfaces feel natural on each platform
- **Automatic updates:** Users benefit from OS-level font improvements
- **Consistent sizing:** All font weights and sizes remain identical across system fonts

### Fonts by Platform

The Figma library for SLDS 2 uses SF Pro as its primary typeface for design work. In production, the actual font rendered depends on the user's operating system:

| Platform | System Font | Usage |
|----------|-------------|-------|
| macOS, iOS | SF Pro | Apple devices and design tools |
| Windows | Segoe UI | Windows-based devices |
| Android | Roboto | Android devices |

### Download System Fonts

For design work in Figma or other design tools, download the appropriate system font:

- **[Download SF Pro](https://devimages-cdn.apple.com/design/resources/download/SF-Pro.dmg)** - For macOS and iOS design work
- **[Download Segoe UI](https://aka.ms/WebFluentFonts)** - For Windows design work
- **[Download Roboto](https://fonts.google.com/specimen/Roboto)** - For Android design work

> **Important:** All font weights and sizes remain the same across all system fonts. A component designed with SF Pro will render identically in Segoe UI or Roboto in terms of sizing and spacing.

---

## Font Scale System

The SLDS font scale provides a systematic range of font sizes that create consistent typographic hierarchy across all interfaces. Font sizes are scaled based on the `--slds-g-font-size-base` property, which sets the default font size of the application.

### How Font Scale Works

The font scale uses styling hooks to provide systematic text sizing across the interface.

**Hook Pattern:** `--slds-g-font-scale-{size}` where `{size}` is the scale step

**Base Size:** `--slds-g-font-size-base` sets the default font size of the application.

**Scale Categories:**
- **Body text:** Scales `neg-2` through `2`
- **Headings/Titles:** Scales `3` through `6`
- **Display text:** Scales `6` through `8`

Use smaller scales for compact interfaces and larger scales for prominent content.

> **Note:** In SLDS 2, font sizes differ slightly from the original Salesforce Lightning Design System (SLDS 1). Review your components to verify the new type scale specification when migrating from SLDS 1 to SLDS 2.

---

## Font Weight System

SLDS 2 uses font weights to maintain clarity and consistency across all platforms. Each weight serves a specific purpose in the typographic hierarchy.

### Available Font Weights

SLDS 2 uses four primary font weights to maintain clarity and consistency.

**Hook Pattern:** `--slds-g-font-weight-{weight}` where `{weight}` is the font weight level

**Primary Weights:**
- **Light (weight-3):** Display text at `font-scale-7` and above
- **Regular (weight-4):** Titles (`font-scale-3` through `font-scale-6`) and all body text
- **Semibold (weight-6):** Buttons and smaller body titles (`font-size-base` through `font-scale-2`)
- **Bold (weight-7):** Emphasis within body text only, never for headings

> **Important:** Do not use font weights lighter than Regular (weight-4) for body text or small sizes, as they compromise readability and accessibility.

---

## Font Color for Typography

Typography colors in SLDS use semantic color tokens to ensure proper contrast and accessibility across all surfaces and themes. The color system is designed to work seamlessly with both light and dark backgrounds.

### On-Surface Colors for Text

For text on light backgrounds (surfaces), use the on-surface token hierarchy:

- **`--slds-g-color-on-surface-1`** - De-emphasized text (captions, placeholders, secondary content)
- **`--slds-g-color-on-surface-2`** - Body text (standard content, labels, descriptions)
- **`--slds-g-color-on-surface-3`** - Headings and titles only (reserved for headings, not body text)

For text on dark backgrounds, use:

- **`--slds-g-color-on-surface-inverse-1`** - Primary foreground color for inverse surfaces
- **`--slds-g-color-on-surface-inverse-2`** - Secondary foreground color for inverse surfaces

### Specialized Text Colors

For specific text contexts, use these tokens:

- **Text links:** Use `--slds-g-color-accent-2` (electric blue 40) for accessible links on light backgrounds
- **Error messages:** Use `--slds-g-color-error-1` or `--slds-g-color-on-error-1` as appropriate
- **Warning messages:** Use `--slds-g-color-warning-1` or `--slds-g-color-on-warning-1` as appropriate
- **Success messages:** Use `--slds-g-color-success-1` or `--slds-g-color-on-success-1` as appropriate

> **For complete typography color guidance** including pairing rules, contrast requirements, and accessibility requirements, see the Surface Color Styling Hooks documentation.

---

## Type Styles

A type style is a combination of font scale, weight, and line height designed for a specific purpose. SLDS has three type styles: body, title, and display. Each type style serves a distinct role in the content hierarchy.

### Body Type

Text that conveys details in the form of phrases, labels, sentences, or blocks of copy.

**Recommended Scales:** `--slds-g-font-scale-neg-2` through `--slds-g-font-scale-2`
**Recommended Weights:** Regular (weight-4), Semibold (weight-6) for emphasis

**When to use:**
- Paragraph content and long-form text
- Form labels and input text
- List items and table cells
- Button text (with semibold weight)

### Title Type

Headings of components or body content that establish hierarchy and structure.

**Recommended Scales:** `--slds-g-font-scale-3` through `--slds-g-font-scale-6`
**Recommended Weights:** Regular (weight-4), Semibold (weight-6)

**When to use:**
- Page titles and section headings
- Card and panel headings
- Modal and dialog titles
- Navigation headers

### Display Type

Short titles in banners or prominent sections to make a bold visual statement.

**Recommended Scales:** `--slds-g-font-scale-6` through `--slds-g-font-scale-8`
**Recommended Weights:** Light (weight-3)

**When to use:**
- Hero sections and landing page headers
- Empty state messages
- Large promotional banners
- Onboarding screens

---

## Usage Guidance

When implementing typography in SLDS, follow these best practices to maintain consistency and accessibility.

For detailed usage guidance, do's and don'ts, and accessibility considerations for each typography styling hook, refer to the Typography Styling Hooks documentation.

**Key principles:**
- Use predefined SLDS text styles from the typography scale
- Ensure sufficient contrast between text and backgrounds (minimum 4.5:1 for body text)
- Avoid ALL CAPS for any text or labels (reduces readability)
- Never hardcode font sizes in pixels or points

### Combining Typography Properties

When implementing typography, follow this systematic approach:

1. **Start with the content type:** Determine whether you need body, title, or display type
2. **Select the appropriate scale:** Choose a font scale that matches the content hierarchy
3. **Apply the correct weight:** Use Regular for most content, Semibold for emphasis, Bold sparingly
4. **Use semantic colors:** Apply on-surface tokens based on content importance (1 for low emphasis, 3 for high emphasis)
5. **Set line height:** Ensure appropriate line spacing for readability

---

## Implementation Workflow

Follow this sequence when implementing typography in your components:

### Step 1: Identify Typography Need

Determine the purpose and hierarchy of your text content:
- **Is this body content?** (paragraphs, labels, descriptions)
- **Is this a heading or title?** (section headers, component titles)
- **Is this display text?** (hero sections, prominent banners)
- **What level of emphasis is needed?** (primary, secondary, tertiary)

### Step 2: Select Font Scale and Weight

Choose the appropriate combination based on the content type:
- **Body text:** `font-scale-1` or `font-scale-2` with `font-weight-4` (regular)
- **Emphasized body:** Same scale with `font-weight-6` (semibold)
- **Small headings:** `font-scale-3` or `font-scale-4` with `font-weight-6`
- **Large headings:** `font-scale-5` or `font-scale-6` with `font-weight-4` or `font-weight-6`
- **Display text:** `font-scale-7` or `font-scale-8` with `font-weight-3` (light)

### Step 3: Apply Color Tokens

Select the appropriate color token based on emphasis and context:
- **High-emphasis text (headings, titles):** `--slds-g-color-on-surface-3`
- **Standard body text:** `--slds-g-color-on-surface-2`
- **De-emphasized text (captions, metadata):** `--slds-g-color-on-surface-1`
- **Links:** `--slds-g-color-accent-2`
- **Feedback messages:** Appropriate feedback color tokens

> **Reference:** See the Surface Color Styling Hooks documentation for complete color pairing guidance.

### Step 4: Evaluate Density Awareness

Determine if the typography should adapt to user density preferences:
- **Does this component appear in data-dense contexts?** (tables, lists, forms)
- **Would users benefit from density control?** (power users vs. casual users)
- **If yes:** Use `--slds-g-font-scale-var-*` instead of fixed scale
- **If no:** Use fixed `--slds-g-font-scale-*` for consistent sizing

> **Reference:** See the Display Density Overview for density-aware typography guidance.

### Step 5: Handle Exceptions

If standard patterns don't fit your requirement:
1. Document why standard typography styles don't apply
2. Verify contrast requirements manually (minimum 4.5:1 for body text)
3. Ensure the custom approach maintains brand consistency
4. Test across all platforms and screen sizes
5. Flag for design system team review

### Step 6: Validate Implementation

Before finalizing, verify the implementation using the Pre-Implementation Checklist below to ensure all typography requirements are met.

---

## Pre-Implementation Checklist

Before generating or modifying any typography-related code, verify:

| Requirement | Status |
|-------------|--------|
| **Typography Classification** | |
| Content type identified (body/title/display) | [ ] |
| Emphasis level determined (primary/secondary/tertiary) | [ ] |
| Context appropriate for chosen type style | [ ] |
| **Scale & Weight Selection** | |
| Font scale selected from SLDS predefined values | [ ] |
| Font weight appropriate for content type and size | [ ] |
| No hard-coded pixel or point values used | [ ] |
| Styling hooks used instead of direct values | [ ] |
| **Color & Contrast** | |
| Semantic color tokens used (on-surface, accent, feedback) | [ ] |
| Contrast requirements met (minimum 4.5:1 for body text) | [ ] |
| Color not used as sole indicator of meaning | [ ] |
| Colors work across light and dark modes where applicable | [ ] |
| **Accessibility** | |
| Text remains readable at minimum supported sizes | [ ] |
| Line height provides adequate spacing for readability | [ ] |
| Font weight not too light for small text sizes | [ ] |
| ALL CAPS avoided (reduces readability) | [ ] |
| Sufficient contrast between text and background (WCAG 2.1 AA) | [ ] |
| **Density & Responsiveness** | |
| Density-aware hooks used where appropriate (`font-scale-var-*`) | [ ] |
| Typography tested in both comfy and compact density settings | [ ] |
| Text scales appropriately across viewport sizes | [ ] |
| Long text strings tested (internationalization requirement) | [ ] |
| **Platform Consistency** | |
| Typography tested with system fonts (SF Pro, Segoe UI, Roboto) | [ ] |
| Sizing and spacing consistent across platforms | [ ] |
| Renders correctly on target devices and browsers | [ ] |

**Target outcome:** Clear, readable, accessible typography that maintains visual hierarchy and brand consistency across all platforms, screen sizes, and user density preferences.

---
id: slds.guidance.overview.utilities
title: Utility Classes Overview
description: Foundational principles and constraints for utility class decisions in SLDS
summary: "Comprehensive guidance on SLDS utility classes covering core principles, naming conventions, responsive patterns, accessibility considerations, and when to use utilities vs. other styling approaches."

artifact_type: overview
domain: overviews
topic: utilities

content_format: narrative
complexity: foundational
audience: [implementer, designer]

tasks: [learn, choose, implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.hooks.spacing
  - slds.guidance.hooks.typography
  - slds.guidance.hooks.color

tags: [utilities, css-classes, layout, spacing, typography, responsive, mobile-first]
keywords: [utility classes, slds-grid, spacing scale, responsive breakpoints, mobile-first, flexbox, naming convention]
---

# Utility Classes Guidance for SLDS Implementation

**Purpose:** This document provides the foundational principles and constraints for all utility class decisions in Salesforce Lightning Design System. Utility classes are single-purpose CSS classes that provide rapid styling capabilities for layout, spacing, typography, visibility, and common visual patterns. When implementing components and layouts, follow these guidelines to ensure consistency, maintainability, and integration with the SLDS design system.

---

## Core Principles

When working with utility classes in UI interfaces, adhere to these foundational principles:

1. **Prefer utilities over custom CSS.** Utility classes are pre-built, tested, and optimized for consistency with the Salesforce design language. They integrate seamlessly with SLDS design tokens, reduce CSS bundle size, and provide responsive behavior out of the box. Use utilities as the first approach before writing custom CSS.

2. **Respect the system's scale.** SLDS provides deliberate scales for spacing (`none` through `xx-large`), sizing (fractional widths from `1-of-2` through `12-of-12`), and typography (heading hierarchy and body text sizes). These scales create visual rhythm and hierarchy. Do not invent arbitrary values—work within the defined scales to maintain design consistency.

3. **Compose, don't customize.** Combining 2-3 utility classes is the intended pattern for achieving complex styling. The grid system demonstrates this: `slds-grid` + `slds-wrap` + `slds-gutters` + sizing classes compose to create responsive layouts. Prefer composition over creating one-off custom classes.

4. **Design mobile-first.** SLDS responsive utilities follow a mobile-first approach where base classes apply to all viewport sizes and responsive modifiers (`slds-small-`, `slds-medium-`, `slds-large-`) progressively enhance for larger screens. This ensures optimal performance and progressive enhancement across all devices.

---

## What Are Utility Classes?

Utility classes are single-purpose CSS classes that apply specific styling to elements. The Salesforce Lightning Design System provides utility classes across multiple categories for rapid component styling without writing custom CSS.

**Utility classes solve these problems:**
- Provide consistent spacing, sizing, and typography aligned with SLDS design tokens
- Enable responsive layouts through mobile-first breakpoint modifiers
- Reduce CSS bundle size by reusing common patterns instead of duplicating styles
- Ensure accessibility patterns are built-in (screen reader utilities, focus states)
- Allow rapid prototyping and styling without context-switching to CSS files

**SLDS utility naming convention:**

```text
slds-[property]-[direction]_[size/value]
```

**Examples:**
- `slds-m-top_small` — Small top margin
- `slds-p-around_medium` — Medium padding on all sides
- `slds-text-heading_large` — Large heading typography
- `slds-size_1-of-2` — 50% width
- `slds-grid_align-center` — Center-aligned grid

**Key naming patterns:**
- Underscores (`_`) separate the modifier value
- Hyphens (`-`) separate compound words
- Direction modifiers: `top`, `bottom`, `left`, `right`, `horizontal`, `vertical`, `around`
- Size scale: `none`, `xxx-small`, `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large`

---

## Utilities vs. Other Styling Approaches

SLDS provides multiple styling mechanisms. Understanding when to use each approach ensures maintainable, consistent code.

### Styling Hierarchy

**1. Component Classes** — Complete component patterns with built-in structure, accessibility, and interaction states. Use first when a full component pattern exists.

**2. Utility Classes** — Layout composition, spacing, sizing, typography, visibility, and common visual patterns. Utilities are the "glue" between components, handling relationships and responsive behavior.

**3. Styling Hooks** — Colors, theming, border radius, shadows, and brand customization via CSS custom properties. Use for visual customization that needs to adapt across themes.

**4. Custom CSS** — Component-specific styling, animations, and business-logic-driven needs not covered by the above. Use as last resort.

### When NOT to Use Utility Classes

**Don't use utilities when:**
- A component class already handles the pattern (use `slds-card`, not utilities to recreate it)
- You need colors or theming (use styling hooks instead)
- The styling is component-specific logic (write scoped custom CSS)
- You're combining more than 5 utilities on a single element (indicates missing component class)

<!--
PENDING REVIEW - NOT FOR LLM GUIDANCE CONSUMPTION

The following edge cases need design system team validation:
- Specific threshold for when utility composition becomes unwieldy (current guidance says 4-5+ utilities suggests missing component, but is this team consensus?)
- Whether color utilities (slds-color__text_gray-*, slds-color__background_gray-*) should ever be used given that styling hooks exist for colors
- Team position on mixing utility classes with component-level custom properties in the same element
- Whether there are scenarios where writing custom CSS is preferred over complex utility composition

Source references for review:
- packages/knowledge/utility-classes/index.md (lines 17-43: utility philosophy section)
- packages/guidance/utilities/borders.md (lines 126-137: box vs card decision framework)
- packages/guidance/styling-hooks/index.md (guidance on when to use styling hooks)
-->

---

## SLDS 2 Design Philosophy

SLDS 2 introduced several changes to utility classes focused on consistency, accessibility, and modern CSS practices.

### Naming Convention Standardization

SLDS 2 standardized the naming convention from double-hyphen (`--`) to underscore (`_`) for modifiers:
- SLDS 1: `slds-m-top--small`
- SLDS 2: `slds-m-top_small`

This convention applies consistently across all utility classes, making the naming system more predictable and easier to learn.

### Deprecated Utilities

Several utility classes have been deprecated in SLDS 2, primarily for accessibility or consistency reasons. **Avoid using these classes:**

**Visibility utilities:**
- `.slds-collapsed` → Use `slds-is-collapsed` instead
- `.slds-expanded` → Use `slds-is-expanded` instead

**Media object utilities:**
- `.slds-media_reverse` → Deprecated for accessibility reasons (WCAG 1.3.2 reading order concerns)
- `.slds-media_double` → Deprecated for accessibility reasons

**Vertical list utilities:**
- `.slds-has-dividers` (on `slds-list_vertical`) → Use positional divider helpers instead (`has-dividers_top`, `has-dividers_bottom`)
- `.slds-has-cards` → Use `has-dividers_around` instead
- `.slds-has-divider` → Spacing now comes from divider position utilities

The presence of `_deprecate.scss` files in the source code (visibility, media-objects, vertical-list, horizontal-list, grid) indicates active deprecation tracking. Refer to per-utility guidance for specific deprecated classes and replacements. Use the utility class names documented in this guidance. When uncertain about a class name, refer to the per-category utility guides (`slds.guidance.utilities.*`).

### Relationship to SLDS 2 System

Utility classes in SLDS 2 work alongside the styling hooks system:
- Utilities provide structural layout and spacing
- Styling hooks provide semantic theming and color customization
- Together they enable fully themeable, responsive components without custom CSS

<!--
PENDING REVIEW - NOT FOR LLM GUIDANCE CONSUMPTION

The following SLDS 2 migration details need design system team validation:
- Complete list of all deprecated utility classes between SLDS 1 and SLDS 2 (beyond the ones documented in _deprecate.scss files)
- Whether any utility categories were added in SLDS 2 that didn't exist in SLDS 1
- Whether any utility categories were removed or significantly restructured
- Specific migration steps for uplifting SLDS 1 code that uses deprecated utilities
- Whether variable-density utilities (slds-var-m-*, slds-var-p-*) are SLDS 2 specific or existed in SLDS 1
- Whether the removal of decorative borders in SLDS 2 (documented in borders overview) affects border utilities usage patterns

Source references for filling this in:
- source-data/reference-documentation/salesforce-design-system-develop/packages/design-system/ui/utilities/*/RELEASENOTES.md
- SLDS 2 migration guides or release notes (if they exist in documentation)
- Design system team knowledge of SLDS 1 vs SLDS 2 utility differences
-->

---

## Responsive Utilities

SLDS utility classes support responsive design through a mobile-first breakpoint system. Responsive modifiers allow different styling at different viewport sizes without writing media queries.

### Breakpoint System

SLDS uses a mobile-first approach with three primary responsive breakpoints:

| Breakpoint | Min Width | Modifier Prefix | Use For |
|------------|-----------|-----------------|---------|
| Default (Mobile) | 0px | `slds-` | Base styling, applies to all sizes |
| Small (Tablet) | 480px (30em) | `slds-small-` | Tablet and larger |
| Medium (Desktop) | 768px (48em) | `slds-medium-` | Desktop and larger |
| Large (Wide Desktop) | 1024px (64em) | `slds-large-` | Large desktop screens |

**Max breakpoints** (uncommon, use sparingly):
- `slds-max-small-` — Up to 480px
- `slds-max-medium-` — Up to 768px
- `slds-max-large-` — Up to 1024px

### Which Utilities Support Responsive Modifiers

**Sizing utilities:**
- Width classes: `slds-size_*`, `slds-small-size_*`, `slds-medium-size_*`, `slds-large-size_*`
- Supports all fractional widths (1-of-2 through 12-of-12)

**Visibility utilities:**
- Show/hide: `slds-show_*`, `slds-hide_*` for each breakpoint
- Enables mobile vs. desktop content differentiation

**Ordering utilities:**
- Column order: `slds-order_*`, `slds-small-order_*`, `slds-medium-order_*`, `slds-large-order_*`
- Supports visual reordering up to 12 positions

### Mobile-First Approach

Always start with the mobile (base) class and progressively enhance for larger screens:

```html
<!-- Correct: Mobile-first responsive sizing -->
<div class="slds-col slds-size_1-of-1 slds-small-size_1-of-2 slds-medium-size_1-of-3 slds-large-size_1-of-4">
  100% mobile → 50% tablet → 33% desktop → 25% wide desktop
</div>

<!-- Incorrect: Desktop-first approach -->
<div class="slds-col slds-large-size_1-of-4">
  Missing base mobile sizing, will break on mobile
</div>
```

### Responsive Layout Pattern

The grid system requires `slds-wrap` when using responsive sizing that may exceed 12 columns:

```html
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
    Column 1: Stacked mobile, half tablet, third desktop
  </div>
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
    Column 2
  </div>
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
    Column 3
  </div>
</div>
```

### Responsive Visibility Pattern

Show or hide content at specific breakpoints for device-appropriate experiences:

```html
<!-- Mobile: show hamburger menu, hide full navigation -->
<button class="slds-button slds-show slds-hide_medium">
  <svg class="slds-icon"><!-- menu icon --></svg>
  Menu
</button>

<!-- Desktop: hide hamburger, show full navigation -->
<nav class="slds-hide slds-show_medium">
  <ul class="slds-list_horizontal">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

---

## Accessibility Considerations

SLDS utility classes include built-in accessibility patterns and considerations. Follow these guidelines to ensure WCAG compliance.

### DOM Order vs. Visual Order (WCAG 1.3.2)

**Critical:** The grid ordering utilities (`slds-order_*`) and flexbox reordering can create visual order that differs from DOM order. This violates WCAG 1.3.2 (Meaningful Sequence) and creates barriers for screen reader users and keyboard navigation.

**Accessibility Warning from SLDS Grid Documentation:**
> "You can visually reorder columns independently from their position in the markup, but you should avoid doing so if you wish to remain WCAG compliant."

**Rule:** Structure HTML in the correct semantic order. Do not use visual reordering utilities (`slds-order_*`). If visual reordering is required by a design specification that cannot be achieved by restructuring the DOM, ensure:
- The DOM order still makes logical sense when read sequentially
- Tab order follows a logical flow for keyboard users
- Screen reader testing confirms the experience is coherent

### Visibility Utilities and Screen Readers

Different visibility utilities have different screen reader behavior:

| Utility | Visual Display | Screen Reader | Layout Space |
|---------|----------------|---------------|--------------|
| `slds-show` | Visible | Read | Occupies space |
| `slds-hide` | Hidden | Not read | No space |
| `slds-hidden` | Hidden | Not read | Occupies space |
| `slds-assistive-text` | Hidden | Read | No space |

**Use `slds-assistive-text` when:**
- Providing context for icon-only buttons
- Adding descriptive labels for screen readers
- Including skip navigation links
- Supplementing visual-only information with text equivalents

```html
<!-- Icon button with screen reader label -->
<button class="slds-button slds-button_icon">
  <svg class="slds-icon slds-icon_small">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
  </svg>
  <span class="slds-assistive-text">Edit Record</span>
</button>
```

### Focus State Preservation

The interactions utilities include focus management classes:
- `slds-has-blur-focus` — Apply blur focus styles
- `slds-has-input-focus` — Apply input-specific focus styles

Never remove focus indicators with utilities or custom CSS. Focus visibility is required for keyboard navigation (WCAG 2.4.7).

### Touch Target Sizing

When using spacing and sizing utilities for interactive elements, ensure touch targets meet minimum size requirements:
- Minimum touch target (Level AA): 24×24px (WCAG 2.5.8)
- Minimum touch target (Level AAA): 44×44px (WCAG 2.5.5)
- Recommended touch target: 48×48px

Combine padding utilities with component classes to achieve appropriate interactive areas:

```html
<!-- Adequate touch target for mobile -->
<button class="slds-button slds-button_neutral slds-p-around_medium">
  Button with comfortable touch area
</button>
```

### Truncation Accessibility

When using `slds-truncate` or `slds-line-clamp` utilities, always provide the full text:
- Add `title` attribute for hover tooltips (benefits sighted mouse users)
- Screen readers read the full content regardless of visual truncation
- Consider providing "Read more" interactions for truncated content in critical contexts

```html
<!-- Truncated text with full content accessible -->
<td class="slds-truncate" title="Full customer name visible on hover">
  Very Long Customer Name That Is Truncated Visually
</td>
```

### Color and Meaning

When using text color utilities (`slds-text-color_error`, `slds-text-color_success`, `slds-text-color_warning`), do not rely on color alone to convey meaning (WCAG 1.4.1). Supplement with:
- Icons that convey status
- Text labels that describe the state
- ARIA attributes for dynamic state changes

```html
<!-- Error message with icon, not just color -->
<div class="slds-text-color_error slds-m-top_small">
  <svg class="slds-icon slds-icon_x-small">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
  </svg>
  Please correct the errors below
</div>
```

---

## Implementation Workflow

Follow this sequence when implementing utility class solutions:

### Step 1: Identify the Styling Need

Determine what aspect of styling you're addressing:

- **Layout?** → Grid, position, scrollable, float utilities
- **Spacing?** → Margin and padding utilities
- **Sizing?** → Width and height utilities with responsive variants
- **Typography?** → Text, truncate, line-clamp utilities
- **Visibility?** → Show, hide, assistive-text utilities
- **Visual styling?** → Border, box, color, themes, dark mode utilities
- **Specialized patterns?** → Media object, list, description list utilities

### Step 2: Check Component Classes First

Before adding utilities, verify whether an SLDS component class already provides the pattern:

```html
<!-- Component class provides the foundation -->
<div class="slds-card">
  <div class="slds-card__header">Card Header</div>
  <div class="slds-card__body slds-card__body_inner">Card Content</div>
</div>

<!-- Add utilities only for additional composition needs -->
<div class="slds-card slds-m-bottom_medium">
  <div class="slds-card__body slds-p-around_large">
    Override default padding with utility when needed
  </div>
</div>
```

Component classes like `slds-card`, `slds-button`, `slds-form-element`, `slds-table` already include padding, borders, and structural styling. Don't recreate these patterns with utilities.

### Step 3: Compose Utilities

Combine 2-3 utilities to achieve the desired styling. The grid system demonstrates the composition pattern:

```html
<!-- Grid composition: container + behavior + spacing + sizing -->
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
    Composed layout from 4 utilities
  </div>
</div>
```

**Composition best practices:**
- Start with structural utilities (grid, position)
- Add spacing utilities (margin, padding)
- Apply typography utilities (text styling, alignment)
- Include responsive modifiers last

### Step 4: Apply Responsive Modifiers

Add breakpoint-specific overrides following mobile-first approach:

```html
<!-- Base + responsive modifiers -->
<div class="slds-col 
            slds-size_1-of-1 
            slds-small-size_1-of-2 
            slds-medium-size_1-of-3 
            slds-large-size_1-of-4">
  Progressive enhancement from mobile to large desktop
</div>
```

### Step 5: Validate Implementation

Before finalizing, verify the implementation using the Pre-Implementation Checklist below to ensure all requirements are met.

---

## Pre-Implementation Checklist

Before generating or modifying any utility class code, verify:

| Requirement | Status |
|-------------|--------|
| **Appropriateness** | |
| Utility classes used for layout, spacing, sizing, typography, visibility | [ ] |
| Component classes checked first (not recreating patterns with utilities) | [ ] |
| Utilities preferred over custom CSS where applicable | [ ] |
| Not combining more than 4-5 utilities on single element | [ ] |
| **Naming & Convention** | |
| Utility class names spelled correctly (exact SLDS naming) | [ ] |
| Underscore (`_`) used for modifiers, not double-hyphen | [ ] |
| No deprecated utilities used (checked against current SLDS docs) | [ ] |
| Naming convention followed: `slds-[property]-[direction]_[size]` | [ ] |
| **Consistency** | |
| Spacing utilities use consistent size scale (e.g., all `medium`) | [ ] |
| Typography utilities match content hierarchy (headings → body → small) | [ ] |
| Visual rhythm maintained across similar components | [ ] |
| **Responsiveness** | |
| Mobile-first approach: base class → responsive modifiers | [ ] |
| Breakpoint modifiers ordered correctly (small → medium → large) | [ ] |
| `slds-wrap` added to grids with responsive sizing | [ ] |
| Responsive visibility tested at actual breakpoints (480px, 768px, 1024px) | [ ] |
| **Accessibility** | |
| `slds-assistive-text` used for screen reader-only content | [ ] |
| `title` attributes added to all truncated text | [ ] |
| Semantic HTML tags used with utility classes (h1, h2, p, ul, li) | [ ] |
| Visual order matches DOM order (no `slds-order_*` reordering) | [ ] |
| Focus states maintained and visible (not removed by utilities) | [ ] |
| Color utilities supplemented with icons/text (not color alone for meaning) | [ ] |
| Touch targets meet minimum 44×44px size for interactive elements | [ ] |
| **Code Quality** | |
| Utilities combined efficiently (not redundant or contradictory) | [ ] |
| Markup is clean and readable | [ ] |
| Comments added for non-obvious utility combinations | [ ] |

**Target outcome:** Consistent, accessible, responsive interfaces built with composable utility classes that integrate seamlessly with SLDS component classes and styling hooks.

---

## Utility Class Categories

SLDS organizes utility classes into the following categories. For detailed per-category guidance, refer to the individual utility reference documentation.

### Layout & Positioning
- **Grid** — Flexbox layout system: `slds-grid`, `slds-col`, alignment, gutters
- **Position** — CSS positioning: `slds-is-relative`, `slds-is-absolute`, `slds-is-fixed`
- **Scrollable** — Overflow control: `slds-scrollable`, `slds-scrollable_x/y`
- **Float** — Legacy float positioning (prefer grid for new layouts)
- **Alignment** — Absolute centering: `slds-align_absolute-center`
- **Layout** — Global spacing: `slds-has-buffer`, magnet utilities

### Spacing
- **Margin** — External spacing: `slds-m-[direction]_[size]`
- **Padding** — Internal spacing: `slds-p-[direction]_[size]`

### Sizing
- **Sizing** — Fractional widths, responsive breakpoints, full width/height

### Typography
- **Text** — Headings, body text, alignment, colors, transforms
- **Truncate** — Single-line ellipsis, container-based truncation
- **Line Clamp** — Multi-line truncation (2, 3, 5, 7 lines)
- **Hyphenation** — Word breaking for long text

### Visual Styling
- **Color** — Text and background grays (prefer styling hooks)
- **Borders** — Directional borders: `slds-border_top/bottom/left/right`
- **Box** — Container styling with padding variants
- **Visibility** — Show/hide, responsive display, screen reader utilities
- **Themes** — Semantic surface theming: `slds-theme_default`, `slds-theme_inverse`, success/error/warning backgrounds
- **Dark Mode** — Future dark mode support (currently use styling hooks)

### Specialized
- **Media Object** — Image/icon with text layout pattern
- **Vertical List** — Lists with dividers, selection states
- **Horizontal List** — Inline list layouts
- **Description List** — Name-value pair layouts
- **Name Value List** — Structured data display

### Special Purpose
- **Interactions** — Link styling, focus patterns
- **Print** — Print-specific visibility

> For detailed usage guidance, code examples, and best practices for each category, refer to the [per-category utility reference documentation](ref:slds.guidance.utilities).

---

## Related Documentation

For detailed implementation guidance, refer to:

- **Utility Reference Documentation** (`slds.guidance.utilities`) — Individual category guides with complete class listings and code examples
- **Spacing and Sizing Styling Hooks** (`slds.guidance.hooks.spacing`) — For density-aware spacing and when to use hooks vs. utilities
- **Typography Overview** (`slds.guidance.overview.typography`) — For understanding type hierarchy that utilities implement
- **Borders Overview** (`slds.guidance.overview.borders`) — For understanding when borders are appropriate in SLDS 2
- **Accessibility Overview** (`slds.guidance.accessibility.overview`) — For comprehensive accessibility requirements across all utilities

# Bundled Guidance Index

Source: `packages/guidance/` -- SLDS domain knowledge for deep reference.

Read these files when the workflow phases in SKILL.md point you here. The Knowledge Map in SKILL.md tells you which file to read for each task.

---

## Root Files

| File | Read When | Description |
|------|-----------|-------------|
| `slds-development-guide.md` | Need comprehensive SLDS development patterns | Full development guide -- component hierarchy, framework patterns, code generation rules. SKILL.md has the core; this is the deep reference. |
| `blueprints-index.md` | Selecting a blueprint component | All SLDS blueprints mapped to categories and LBC equivalents |
| `icons-guidance.md` | Implementing icons | Icon implementation patterns, categories, accessibility |

## Overviews (`overviews/`)

Foundational concepts for each SLDS domain. Read when you need to understand the rules behind a domain before using specific hooks or utilities.

| File | Read When | Description |
|------|-----------|-------------|
| `color.md` | Making any color decision | 85-5-10 density rule, color role taxonomy, hook selection hierarchy, numerical color system |
| `spacing.md` | Setting spacing or sizing | 4-point spacing grid, semantic sizing scale, spacing-to-hook mappings |
| `typography.md` | Setting fonts, sizes, weights | Typography scale, heading hierarchy, font family hooks |
| `shadows.md` | Adding elevation or depth | Shadow levels, elevation system, when to use which shadow |
| `borders.md` | Adding borders or dividers | SLDS 2 minimal-border philosophy, border hooks and utility classes |
| `display-density.md` | Supporting comfy/compact modes | Display density utility patterns, density-responsive components |
| `illustrations.md` | Showing empty/error/info states | SLDS illustration markup, when to use which illustration |
| `icons.md` | Understanding icon system | Icon categories overview, sprite structure, sizing conventions |
| `utilities.md` | Understanding utility class system | Utility class philosophy, naming patterns, when to use utilities vs. hooks |

## Styling Hooks (`styling-hooks/`)

CSS custom property guidance. Read when applying `--slds-g-*`, `--slds-s-*`, or `--slds-c-*` hooks.

| File | Read When | Description |
|------|-----------|-------------|
| `index.md` | Starting any styling hooks work | Entry point: three-tier hierarchy (global/shared/component), core categories, decision trees |
| `color/index.md` | Working with color hooks | Color hook organization, palettes, selection hierarchy |
| `color/system-hooks.md` | Need system-level color hooks | Low-level palette hooks (`--slds-g-color-palette-*`) |
| `color/expressive-palette-hooks.md` | Need expressive/brand colors | Expressive palette hooks for brand-aligned color usage |
| `color/semantic/accent-hooks.md` | Need accent/brand colors | `--slds-g-color-accent-*` hooks for interactive and brand elements |
| `color/semantic/feedback-hooks.md` | Need success/warning/error colors | `--slds-g-color-error-*`, `--slds-g-color-success-*`, `--slds-g-color-warning-*` |
| `color/semantic/surface-hooks.md` | Need surface/background colors | `--slds-g-color-surface-*` and `--slds-g-color-on-surface-*` for surfaces and text |
| `typography.md` | Setting typography with hooks | Typography hooks: font-family, font-size, font-weight, line-height |
| `spacing.md` | Setting spacing/sizing with hooks | Spacing hooks: `--slds-g-spacing-*`, sizing hooks |
| `borders.md` | Setting borders with hooks | Border hooks: width, color, radius |
| `shadows.md` | Setting shadows with hooks | Shadow hooks: `--slds-g-shadow-*` levels |

## Utilities (`utilities/`)

Individual utility class categories. Read when you need specific classes for a layout or styling task.

| File | Read When | Description |
|------|-----------|-------------|
| `index.md` | Need utility class overview | All 26 categories with class counts and common patterns |
| `grid.md` | Building grid layouts | `slds-grid`, `slds-col`, `slds-size_*`, responsive sizing |
| `margin.md` | Adding margin | `slds-m-*` margin utilities by direction and size |
| `padding.md` | Adding padding | `slds-p-*` padding utilities by direction and size |
| `sizing.md` | Setting widths | `slds-size_*` fractional and absolute width utilities |
| `layout.md` | Page-level layout | Page layout containers and regions |
| `alignment.md` | Aligning content | Flex alignment, text alignment, vertical centering |
| `borders.md` | Adding border utilities | Border direction, radius, and removal utilities |
| `box.md` | Box model utilities | Box-sizing, overflow, display utilities |
| `color.md` | Color utility classes | Text and background color utilities |
| `dark-mode.md` | Dark mode support | Dark mode utility classes and patterns |
| `description-list.md` | Description lists | `dl`/`dt`/`dd` styling utilities |
| `floats.md` | Float layout | Float and clearfix utilities |
| `horizontal-list.md` | Horizontal lists | Inline list layout utilities |
| `hyphenation.md` | Word breaking | Hyphenation and word-break utilities |
| `interactions.md` | Pointer/cursor styles | Interaction and cursor utilities |
| `line-clamp.md` | Text line limiting | Line clamping utilities |
| `media-object.md` | Media object pattern | Figure + body layout utilities |
| `name-value-list.md` | Name-value pairs | Key-value display utilities |
| `position.md` | Positioning | Position, z-index, and sticky utilities |
| `print.md` | Print styles | Print-specific visibility and layout |
| `scrollable.md` | Scroll containers | Scrollable area utilities |
| `themes.md` | Theme containers | Theme override container utilities |
| `truncate.md` | Text truncation | Ellipsis and text truncation |
| `typography.md` | Text styling | Font size, weight, alignment utilities |
| `vertical-list.md` | Vertical lists | Stacked list layout utilities |
| `visibility.md` | Show/hide elements | Responsive and state visibility utilities |

---
id: slds.guidance.development
title: SLDS Development Guide
description: Root-level guidance for generating or optimizing SLDS-compliant code
summary: "Comprehensive development guide covering the component selection hierarchy (LBC → Blueprints → Hooks → Custom), framework-specific patterns, styling hooks usage, linter resolution, naming conventions, and code generation best practices."

artifact_type: guide
domain: development
topic: development

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [learn, implement, choose]

refs:
  - slds.guidance.hooks.typography
  - slds.guidance.hooks.spacing
  - slds.guidance.uplift
  - slds.guidance.hooks
  - slds.guidance.hooks.color
  - slds.guidance.blueprints
  - slds.guidance.utilities
  - slds.guidance.icons
  - slds.guidance.design

tags: [development, lwc, slds, theming, styling-hooks]
keywords: [component hierarchy, Lightning Base Components, SLDS Blueprints, styling hooks, utility classes, code generation, linter, naming conventions]
---

# SLDS Development Guide

Root-level guidance for AI coding agents generating or optimizing SLDS-compliant code.

---

## What is SLDS?

The **Salesforce Lightning Design System** provides:

| Resource | Description |
|----------|-------------|
| **Lightning Base Components** | Pre-built LWC components with accessibility and theming built-in |
| **SLDS Blueprints** | CSS/HTML patterns for any framework (React, Vue, Angular, vanilla JS) |
| **Styling Hooks** | CSS custom properties (`--slds-g-*`) for theming |
| **Utility Classes** | Rapid styling classes for spacing, layout, visibility |
| **Icons** | SVG icons across action, utility, standard, custom, and doctype categories |

> **Version Note:** This guide targets **SLDS v2**. Legacy `--lwc-*` tokens and `slds-*--modifier` class syntax are deprecated.

---

## Component Selection Hierarchy

**Always follow this order when building UI:**

```text
┌─────────────────────────────────────────────────────────────┐
│ 1. Lightning Base Components (LWC only)                     │
├─────────────────────────────────────────────────────────────┤
│ 2. SLDS Blueprints (any framework)                          │
├─────────────────────────────────────────────────────────────┤
│ 3. Custom with Styling Hooks                                │
├─────────────────────────────────────────────────────────────┤
│ 4. Custom CSS (last resort, still use hooks for values)     │
└─────────────────────────────────────────────────────────────┘
```

### Level 1: Lightning Base Components (LWC Only)

Pre-built, accessible, themed components. **Always check first for LWC projects.**

| Component | Use Case |
|-----------|----------|
| `lightning-button` | All button actions |
| `lightning-input` | Text, email, number, date inputs |
| `lightning-combobox` | Dropdown selection |
| `lightning-datatable` | Tabular data with sorting/selection |
| `lightning-card` | Content containers |
| `lightning-modal` | Dialog overlays |

### Level 2: SLDS Blueprints

HTML/CSS patterns for non-LWC frameworks or when no Lightning Base Component exists.

### Level 3: Styling Hooks

CSS custom properties for theming. Use when customizing appearance.

```css
.my-card {
  background: var(--slds-g-color-surface-1);
  padding: var(--slds-g-spacing-4);
  border-radius: var(--slds-g-radius-border-2);
}
```

### Level 4: Custom CSS

**Only when no hook exists for the property.** See [When Hooks Don't Exist](#when-hooks-dont-exist).

---

## Framework-Specific Patterns

### LWC Layout

```html
<!-- Use lightning-layout for responsive grids -->
<lightning-layout multiple-rows>
  <lightning-layout-item size="12" medium-device-size="6">
    <lightning-card title="Card 1">Content</lightning-card>
  </lightning-layout-item>
</lightning-layout>
```

### Non-LWC Layout (React, Vue, Angular)

```html
<!-- Use SLDS grid classes -->
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
    <!-- Content -->
  </div>
</div>
```

---

## Common Patterns Quick Reference

| Pattern | LWC Component | Blueprint |
|---------|---------------|-----------|
| Forms | `lightning-input`, `lightning-combobox` | Input, Combobox |
| Data Tables | `lightning-datatable` | Data Tables |
| Modals | `lightning-modal` | Modals |
| Cards | `lightning-card` | Cards |

**Form validation pattern (LWC):**
```javascript
handleSubmit() {
  const allValid = [...this.template.querySelectorAll('lightning-input')]
    .reduce((valid, input) => input.reportValidity() && valid, true);
  if (allValid) { /* submit */ }
}
```

**Modal pattern (LWC):**
```javascript
import LightningModal from 'lightning/modal';
export default class MyModal extends LightningModal {
  handleClose() { this.close('result'); }
}
```

---

## Core Rules

### Do
- Follow hierarchy: LBC → Blueprints → Styling Hooks → Custom CSS
- Use `var(--slds-g-*)` with fallbacks for all themeable values
- Create custom classes (e.g., `my-*`) instead of overriding `.slds-*`
- Verify components/hooks exist before implementing

### Don't
- Hard-code colors, spacing, or typography
- Override `.slds-*` classes directly
- Use deprecated `--lwc-*` tokens as primary values
- Use color alone to convey meaning

---

## When Hooks Don't Exist

Not all CSS properties have styling hooks. Use this decision tree:

```text
Does a styling hook exist for this property?
├─ YES → Use the hook with fallback: var(--slds-g-*, fallback)
├─ NO → Is there a utility class?
│       ├─ YES → Use the utility class
│       └─ NO → Use minimal custom CSS with:
│               1. Custom class (my-*, c-*)
│               2. Document why no hook/utility exists
│               3. Use hooks for related values (e.g., colors in gradients)
```

**Properties without hooks (examples):**
- `transform`, `transition` (use `--slds-g-timing-*` for duration only)
- `z-index` (use SLDS utility classes when possible)
- `cursor`
- `overflow`
- Complex gradients (use hook colors within gradient syntax)

**Example - gradient with hook colors:**
```css
.my-gradient-bg {
  /* No gradient hook exists, but use hook colors */
  background: linear-gradient(
    to bottom,
    var(--slds-g-color-surface-1),
    var(--slds-g-color-surface-2)
  );
}
```

---

## Naming Conventions

### Custom Class Names

Use a consistent prefix to avoid collision with SLDS:

| Pattern | Use Case | Example |
|---------|----------|---------|
| `my-*` | General custom styling | `my-card-header` |
| `c-*` | LWC component-specific | `c-accountList-row` |
| `[namespace]-*` | Package/app namespace | `acme-dashboard-widget` |

**Avoid:**
- Generic names: `container`, `wrapper`, `header`
- SLDS-like names: `custom-slds-button`
- BEM on SLDS classes: `slds-card__custom-header`

### Custom Hook Names (for app-level theming)

```css
:root {
  /* Namespace your custom hooks */
  --my-app-primary: var(--slds-g-color-brand-1);
  --my-app-card-padding: var(--slds-g-spacing-4);
}
```

---

## Code Generation Style

When generating SLDS code, follow these patterns:

### Minimal HTML + Classes

```html
<!-- Prefer utility classes over custom CSS for common patterns -->
<div class="slds-card slds-p-around_medium slds-m-bottom_small">
  <h2 class="slds-text-heading_medium">Title</h2>
</div>
```

### Avoid Unnecessary JavaScript

Use CSS/HTML solutions when possible:
- `slds-hide` instead of `{if}` for simple visibility
- `slds-is-selected` class toggling instead of complex state

### Component Structure (LWC)

```html
<template>
  <lightning-card title="Title">
    <div class="slds-p-around_medium">
      <!-- Content uses utility classes for spacing -->
    </div>
  </lightning-card>
</template>
```

```css
/* Component CSS only for truly custom styles */
.my-custom-element {
  /* Use hooks */
  background: var(--slds-g-color-surface-2);
}
```

---

## Resources

| Resource | URL |
|----------|-----|
| SLDS Linter | https://developer.salesforce.com/docs/platform/slds-linter/guide |
| Lightning Components | https://developer.salesforce.com/docs/component-library/overview/components |
| SLDS Website | https://www.lightningdesignsystem.com/ |
| Styling Hooks Index | https://www.lightningdesignsystem.com/2e1ef8501/p/591960-global-styling-hooks |

# Styling Decision Guide

How to apply SLDS styling correctly using hooks, utilities, and custom CSS.

---

## Styling Hook Hierarchy

SLDS hooks follow a three-tier naming system:

| Tier | Prefix | Use |
|------|--------|-----|
| **Global Semantic** | `--slds-g-*` | System-wide. Use these by default. |
| **Shared** | `--slds-s-*` | Private/internal. **DO NOT USE.** Reserved for Salesforce. |
| **Component** | `--slds-c-*` | Scoped to specific LBCs. Use to customize LBC appearance. |

**Rule: Always use `--slds-g-*` hooks unless `--slds-c-*` hooks exist for your specific LBC.**

### Discovering `--slds-c-*` Hooks

Component hooks are scoped to specific Lightning Base Components. To find available hooks for an LBC:

1. **Inspect the LBC docs**: Check the component's [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components) page — look for "Styling Hooks" or "Custom Properties" sections
2. **Browser DevTools**: Render the LBC, inspect the element, and look for `--slds-c-*` properties in the computed styles
3. **Known patterns**: Component hooks follow `--slds-c-{component}-{property}-{state}` naming, e.g., `--slds-c-button-success-shadow-hover`

There is no centralized metadata file for `--slds-c-*` hooks — they are documented per-component. Some examples exist in `references/overviews/shadows.md` and `references/styling-hooks/index.md`.

---

## Hook Syntax

Always use `var()` with a fallback value:

```css
.my-card {
  background: var(--slds-g-color-surface-1, #ffffff);
  padding: var(--slds-g-spacing-4, 1rem);
  border-radius: var(--slds-g-radius-border-2, 0.25rem);
}
```

**Never reassign hook values.** Salesforce controls them and can change them.

### Choosing Fallback Values

The fallback in `var(--slds-g-*, fallback)` is used when the hook isn't loaded (e.g., outside Lightning Experience, in static HTML previews, or during SSR). Use the **light-mode default** value:

1. **Look up the value in `assets/hooks-index.json`** — each hook has a `value` field showing its resolved default
2. **Use the search script**: `node scripts/search-hooks.cjs --prefix "--slds-g-color-surface-"` shows values
3. **Common defaults**: `#ffffff` for surfaces, `#181818` for text, `1rem` for spacing-4, `0.25rem` for radius-border-2

Always use the light-mode default. Dark-mode values are applied automatically when the hook is active — the fallback only matters when hooks aren't loaded at all.

---

## Color: The 85-5-10 Rule

All SLDS UIs should maintain this approximate color distribution:

| % | Role | What to use |
|---|------|-------------|
| **85%** | Foundation | Surfaces, backgrounds, containers. Neutral colors: whites, grays. Hooks: `--slds-g-color-surface-*` |
| **5%** | Accents | Primary actions, selected states, key CTAs. Hooks: `--slds-g-color-accent-*` |
| **10%** | Expressive | Data viz, custom branding. Use sparingly. Hooks: `--slds-g-color-palette-*` |

### Color Role Selection

Before picking a hook, classify what the color is for:

| Role | Hook prefix | Examples |
|------|-------------|----------|
| Surface (backgrounds) | `--slds-g-color-surface-*` | Page bg, modal bg, top-level panels |
| Surface container (nested surfaces) | `--slds-g-color-surface-container-*` | Card bg, embedded panels, list items |
| On-surface (text on surfaces) | `--slds-g-color-on-surface-*` | Body text, headings, icons |
| Accent (emphasis) | `--slds-g-color-accent-*` | Primary emphasis, selected state text/icons |
| Accent container (accent backgrounds) | `--slds-g-color-accent-container-*` | Buttons, selected tabs, emphasized controls |
| Border | `--slds-g-color-border-*` | Dividers, card borders |
| Error | `--slds-g-color-error-*` | Validation errors |
| Success | `--slds-g-color-success-*` | Confirmation states |
| Warning | `--slds-g-color-warning-*` | Caution messages |

**Always pair surfaces with on-surfaces.** Example: `surface-1` background + `on-surface-2` text.

**CRITICAL:** All color hooks require a numbered variant. There is no unnumbered base form (e.g., `--slds-g-color-on-surface` does not exist -- use `on-surface-1`, `-2`, or `-3`):

| Variant | Emphasis | Use for |
|---------|----------|---------|
| `-1` | Low | Captions, placeholder text, de-emphasized content |
| `-2` | Medium | Body text, labels, standard content |
| `-3` | High | Page titles, headings, primary emphasis |

### How to search hooks

```bash
# By prefix
node scripts/search-hooks.cjs --prefix "--slds-g-color-surface-"

# By category
node scripts/search-hooks.cjs --category "color"

# By CSS property
node scripts/search-hooks.cjs --property "background-color"

# Find hook for a hardcoded value
node scripts/search-hooks.cjs --value "#0176d3"
```

---

## Spacing: 4-Point Grid

SLDS uses a numbered scale, not named sizes:

| Hook | Value | Pixels | Use for |
|------|-------|--------|---------|
| `--slds-g-spacing-1` | 0.25rem | 4px | Tight inline spacing |
| `--slds-g-spacing-2` | 0.5rem | 8px | Between related items |
| `--slds-g-spacing-3` | 0.75rem | 12px | Small gaps |
| `--slds-g-spacing-4` | 1rem | 16px | Standard padding/margin |
| `--slds-g-spacing-5` | 1.5rem | 24px | Section gaps |
| `--slds-g-spacing-6` | 2rem | 32px | Between sections |
| `--slds-g-spacing-8` | 3rem | 48px | Large separations |
| `--slds-g-spacing-12` | 5rem | 80px | Page-level spacing |

---

## Typography Hooks (Naming Exception)

Typography hooks break from the `{prefix}-{number}` pattern used by spacing and color:

| Hook | Pattern | Use |
|------|---------|-----|
| `--slds-g-font-size-base` | Single value | Base application font size (13px / 0.8125rem) |
| `--slds-g-font-scale-*` | Numbered scale | All other sizes: `font-scale-1` (14px) through `font-scale-10` |
| `--slds-g-font-scale-neg-*` | Negative scale | Smaller sizes: `font-scale-neg-1` through `neg-4` |
| `--slds-g-font-scale-var-*` | Density-aware | Adapts to compact/comfy display density settings |

**Common mappings:**

| Size | Hook | Approximate value |
|------|------|-------------------|
| Small body text | `--slds-g-font-scale-neg-1` | 12px |
| Default body | `--slds-g-font-size-base` | 13px |
| Larger body | `--slds-g-font-scale-1` | 14px |
| Subheading | `--slds-g-font-scale-2` | 16px |
| Heading | `--slds-g-font-scale-4` | 20px |
| Page title | `--slds-g-font-scale-6` | 28px |
| Display | `--slds-g-font-scale-8` | 40px |

**CRITICAL:** `--slds-g-font-size-3`, `--slds-g-font-size-4`, etc. do NOT exist. Only `--slds-g-font-size-base` is valid. For numbered sizes, use `--slds-g-font-scale-*`.

---

## When Hooks Don't Exist

Not all CSS properties have styling hooks. Not all values have hook equivalents either (e.g., `min-width: 7rem` for label alignment). Use this decision tree:

```text
Does a hook exist for this property?
├─ YES → Use it: var(--slds-g-*, fallback)
├─ NO → Is there a utility class?
│       ├─ YES → Use the utility class
│       └─ NO → Use minimal custom CSS with:
│               1. Custom class prefix (my-*, c-*)
│               2. Use hooks for related values (e.g., hook colors in gradients)
│               3. Document why no hook/utility exists
```

**Properties without hooks (use custom CSS):**
- `transform`, `transition` (use `--slds-g-duration-*` for timing only)
- `z-index` (use SLDS utility classes when possible)
- `cursor`, `overflow`
- Complex gradients (use hook colors within gradient syntax)

**Values without hook equivalents (acceptable hardcoding):**

Some dimension values have no SLDS hook (e.g., `min-width: 7rem` for label alignment, `max-height: 20rem` for scrollable panels). This is acceptable when:
1. No SLDS sizing hook or utility class covers the value
2. A comment explains the value is intentional
3. SLDS grid utilities (`slds-size_*`) were considered as alternatives

```css
.c-field-label {
  /* No SLDS hook exists for this width; intentional for label alignment */
  min-width: 7rem;
}
```

**Example -- gradient with hook colors:**
```css
.my-gradient-bg {
  background: linear-gradient(
    to bottom,
    var(--slds-g-color-surface-1, #ffffff),
    var(--slds-g-color-surface-2, #f3f3f3)
  );
}
```

---

## Hook vs. Utility vs. Custom CSS

| Need | First choice | Fallback |
|------|-------------|----------|
| Color (bg, text, border) | Hook: `var(--slds-g-color-*)` | -- |
| Spacing (margin, padding) | Utility: `slds-m-*`, `slds-p-*` | Hook: `var(--slds-g-spacing-*)` |
| Layout (grid, columns) | Utility: `slds-grid`, `slds-col` | -- |
| Typography (size) | Hook: `var(--slds-g-font-scale-*)` or `var(--slds-g-font-size-base)` | Utility: `slds-text-*` |
| Typography (weight) | Hook: `var(--slds-g-font-weight-*)` | -- |
| Visibility (show/hide) | Utility: `slds-hide`, `slds-show` | -- |
| Borders (width, radius) | Hook: `var(--slds-g-radius-*)` | Utility: `slds-border-*` |
| Shadows | Hook: `var(--slds-g-shadow-*)` | -- |
| Anything else | Custom CSS with custom class prefix | Use hook values where possible |

---

## Deep Reference

- Styling hooks index: `references/styling-hooks/index.md`
- Color hooks deep dive: `references/styling-hooks/color/`
- Color overview (85-5-10 rule): `references/overviews/color.md`
- Spacing overview: `references/overviews/spacing.md`
- Typography hooks: `references/styling-hooks/typography.md`
- Borders overview: `references/overviews/borders.md`
- Shadows overview: `references/overviews/shadows.md`
- All 523 hooks searchable: `assets/hooks-index.json`

---
id: slds.guidance.hooks.borders
title: Borders and Radius Styling Hooks
description: Styling hooks for border width, border radius, and structural separation
summary: "Guidance for border and radius styling hooks. Covers border width hooks for interactive boundaries, radius hooks for corner rounding, and SLDS 2 philosophy of minimal border usage."

artifact_type: reference
domain: styling-hooks
topic: borders

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

refs:
  - slds.guidance.hooks.color.feedback
  - slds.guidance.hooks.color
  - slds.guidance.hooks
  - slds.guidance.hooks.spacing
  - slds.guidance.hooks.shadows
tags: [styling-hooks, borders, radius, corners, visual-structure]
keywords: [border width, border radius, corners, interactive boundaries, focus states, visual separation]
---

# Borders and Radius Styling Hooks

## Overview

Borders and radius styling hooks establish structure, clarity, and visual consistency in UI interfaces. All border styling hooks are prefixed with `--slds-g-` and are followed by a border-related property name. These hooks ensure that border treatments remain consistent, themeable, and aligned with SLDS design principles.

**Important:** Border and radius hooks are NOT density-aware. Unlike spacing and typography hooks, border values remain constant regardless of comfy or compact display density settings.

---

## `--slds-g-sizing-border-*`

### Description

Border width hooks specify the thickness of borders. Use these hooks to define the thickness of lines that outline components, containers, and other visual elements. The scale ranges from subtle separation to strong emphasis.

**Hook Pattern:** `--slds-g-sizing-border-*`

### Usage

####  Do

- Use border width hooks to specify the pixel width of borders
- Use border width hooks for creating visual separation between content areas without overwhelming the interface
- Use border width hooks for indicating interactive boundaries on form elements like inputs and textareas
- Use `--slds-g-sizing-border-1` for standard interactive elements such as buttons, inputs, and badges
- Use `--slds-g-sizing-border-3` specifically for focus states where additional visual emphasis is needed
- SLDS 2 favors minimal border usage — use borders purposefully for structure and meaning

####  Don't

- Avoid using borders decoratively around cards and containers in SLDS 2 (this is a design philosophy shift from SLDS 1)
- Avoid hard-coded pixel values instead of border width hooks
- Avoid inconsistent border widths across similar elements

#### Context: When to Use Border Width Hooks

**Use border width hooks when building:**

| Component Type | Border Application | Recommended Hook |
|----------------|-------------------|------------------|
| Form inputs (text, textarea, combobox) | Interactive boundary | `--slds-g-sizing-border-1` |
| Buttons | Interactive boundary | `--slds-g-sizing-border-1` |
| Badges | Subtle outline | `--slds-g-sizing-border-1` |
| Focus states | Emphasis ring | `--slds-g-sizing-border-3` |
| Divider lines | Content separation | `--slds-g-sizing-border-1` |

**SLDS 2 Philosophy:** Apply borders sparingly. Use consistent thickness and color. Prefer light/subtle borders for separation without overwhelming the interface.

### Accessibility

- Use `--slds-g-sizing-border-3` for focus states to ensure sufficient visibility for keyboard users
- Borders must maintain minimum 3:1 contrast ratio with adjacent surfaces (40-point separation in SLDS grade system)
- Accessibility requirements apply — consult your project's accessibility standards

---

## `--slds-g-radius-border-*`

### Description

Border radius hooks manage the curvature of UI elements' corners, impacting the perceived softness or hardness of components. Use these hooks to establish consistent rounded corner styles across components. The scale provides options from subtle rounding to fully circular shapes.

**Hook Patterns:**
- `--slds-g-radius-border-*` — Numbered radius scale
- `--slds-g-radius-border-circle` — Circular elements
- `--slds-g-radius-border-pill` — Pill-shaped elements

### Usage

### Component Radius Reference

| Hook | Components |
|------|------------|
| `--slds-g-radius-border-1` | Badges, Checkboxes |
| `--slds-g-radius-border-2` | Text Inputs, Comboboxes, Text Areas, Tooltips |
| `--slds-g-radius-border-3` | Menus, Popovers |
| `--slds-g-radius-border-4` | Cards, Modals, Docked Composers |
| `--slds-g-radius-border-circle` | Buttons, Button Icons, Avatars, Radios, Pills |

### Usage

####  Do

- Apply consistent radius to create a cohesive design throughout the interface
- Match radius scale to content density — smaller radius for dense content, larger for spacious elements

####  Don't

- Avoid mixing sharp corners (0 radius) with rounded corners within the same component — mixing these styles can create a visually jarring experience and reduce design harmony
- Avoid hard-coded pixel or rem values instead of radius hooks
- Avoid inconsistent radius values across similar elements
- Avoid radius values that conflict with the brand's visual identity

#### Context

- Establish a consistent style for rounded corners across components such as cards, modals, and buttons
- Create a modern, approachable aesthetic that aligns with the brand identity
- Improve usability by subtly guiding users' focus to key interface elements

### Accessibility

- Rounded corners must not obscure focus indicators or reduce visible border contrast
- Ensure focus states remain clearly visible regardless of radius value

---

## `--slds-g-color-border-*` (Summary)

### Description

Border color hooks are part of the SLDS semantic color system. They define colors for borders based on semantic meaning rather than specific color values. Use these hooks to ensure border colors adapt to themes, maintain accessibility, and communicate appropriate meaning.

> **For complete border color documentation**, see the Color Overview and [Feedback Hooks](ref:slds.guidance.hooks.color.feedback) for error/warning/success border patterns.

**Key Border Color Hook Patterns:**

- `--slds-g-color-border-*` — Neutral borders for functional structure, separation, and dividers
- `--slds-g-color-border-accent-*` — Branded emphasis and thematic exceptions
- `--slds-g-color-border-error-*` — Error states and destructive actions
- `--slds-g-color-border-success-*` — Success states
- `--slds-g-color-border-warning-*` — Warning states
- `--slds-g-color-border-disabled-*` — Disabled elements
- `--slds-g-color-border-inverse-*` — Dark backgrounds

### Usage

####  Do

- Use `--slds-g-color-border-1` for decorative borders and divider lines between content
- Use `--slds-g-color-border-2` as the standard choice for functional or interactive components
- Use accent border colors only for branded containers or specific thematic emphasis where neutral borders are insufficient
- Use error/warning/success border colors exclusively for communicating system feedback states
- Use inverse border colors when placing elements on dark backgrounds
- Border colors should reinforce semantic meaning, not serve as decoration

####  Don't

- Avoid using feedback border colors (error, warning, success) for general styling — reserve for actual states
- Avoid hard-coded color values instead of border color hooks
- Avoid border colors that don't meet contrast requirements with adjacent surfaces
- Avoid using accent border colors for standard interactive elements where neutral hooks are the established system pattern
- Avoid using accent border colors when the element doesn't represent a specific branded or thematic exception
- Avoid mixing border color semantics inconsistently (e.g., error border on non-error element)
- Avoid using inverse borders on light backgrounds (they won't be visible)

#### Context

- Form field borders (neutral for default, accent for focus, error for validation)
- Card and container borders (neutral, typically subtle)
- Status indicator borders (error, warning, success as appropriate)
- Disabled state borders
- Dark theme and inverse context borders
- Divider lines between content sections

### Accessibility

- **Interactive elements** (buttons, inputs): Use `--slds-g-color-border-2` for higher contrast
- **Non-interactive elements** (dividers): Use `--slds-g-color-border-1`
- Border colors must maintain minimum 3:1 contrast with adjacent surfaces (40-point separation)
- Color alone must not be the only indicator of state — combine with icons, text, or other cues
- Focus borders must use high-contrast colors; pair with `--slds-g-sizing-border-3` for visibility

---

### SLDS 2 Philosophy Reminder

SLDS 2 favors minimal border usage. Before applying borders, ask:
- Can spacing achieve the same visual separation?
- Can shadows create the desired depth?
- Is this a holdover from SLDS 1 patterns?

Use borders purposefully for structure, interactivity indication, and state communication — not as default decoration.

> **Complete Philosophy:** SLDS 2 favors minimal border usage — apply borders purposefully for structure, interactivity indication, and state communication.

---
id: slds.guidance.hooks.color.expressive-palette
title: Expressive Palette Color Styling Hooks
description: Extended color palettes for data visualization and expressive interfaces
summary: "Guidance for expressive palette hooks including cool tones (cloud blue, indigo, purple, violet) and warm tones (green, orange, hot orange, red). Use for data visualization and highlighting—not standard UI."

artifact_type: reference
domain: styling-hooks
topic: color
subtopic: expressive

content_format: structured
complexity: advanced
audience: [implementer]

tasks: [choose, implement]

refs:
  - slds.guidance.hooks.color
  - slds.guidance.hooks.color.accent
  - slds.guidance.hooks.color.surface
  - slds.guidance.hooks.color.feedback
  - slds.guidance.hooks.color.system
tags: [styling-hooks, color, palette, expressive, visualization, data]
keywords: [expressive colors, data visualization, cool tones, warm tones, cloud blue, indigo, purple, orange, green]
---

# Expressive Palette Color Styling Hooks

> **Hook Selection:** Palette hooks provide raw color access for rare cases. For standard UI, use semantic hooks first. See [Hook Selection Hierarchy](ref:slds.guidance.hooks.color).

## Overview

Expressive palette color styling hooks contain an extended range of colors beyond the core system palette. These palettes are useful for displaying data, visualizations, and highlighting important areas in your user experience. The expressive palettes offer variety while maintaining cohesion with the design system's overall aesthetic.

---

## Available Expressive Palette Categories

### Cool Tone Palettes (Recommended)

#### Cloud Blue
Useful for data visualization and cool-toned accents. A calm, professional blue palette. Use intentionally to avoid confusion with info feedback colors (blue).

**Hook Pattern:** `--slds-g-color-palette-cloud-blue-{grade}`

#### Indigo
A rich purple-blue palette similar to the brand color. Use intentionally to avoid disrupting button hierarchy.

**Hook Pattern:** `--slds-g-color-palette-indigo-{grade}`

#### Purple
A vibrant purple palette suitable for expressive, data-heavy interfaces.

**Hook Pattern:** `--slds-g-color-palette-purple-{grade}`

#### Violet
A deep, saturated purple palette that works well for accent and emphasis in visualizations.

**Hook Pattern:** `--slds-g-color-palette-violet-{grade}`

### Warm Tone Palettes (Use with Caution)

#### Green
Use to draw attention to important information. Use sparingly to avoid confusion with success feedback colors (teal).

**Hook Pattern:** `--slds-g-color-palette-green-{grade}`

#### Orange
A warm, energetic orange palette effective for highlighting critical areas. Use sparingly to avoid confusion with warning feedback colors (yellow). 

**Hook Pattern:** `--slds-g-color-palette-orange-{grade}`

#### Hot Orange
A bright, intense orange effective for maximum attention-grabbing. Reserve for truly critical states.

**Hook Pattern:** `--slds-g-color-palette-hot-orange-{grade}`

#### Red
A bold red palette effective for highlighting issues or important information. Use intentionally and sparingly to avoid confusion with error feedback colors (pink).

**Hook Pattern:** `--slds-g-color-palette-red-{grade}`

---

## Usage

###  Do
- Use expressive palette colors for data visualization and charts
- Use cool tones (cloud blue, indigo, purple, violet) as your primary choices
- Use warm tones (orange, hot orange, red, green) strategically to draw attention
- Combine multiple palettes in visualization scenarios when each color needs semantic meaning
- Use expressive palettes when you need colors beyond the semantic system (accent, surface, feedback)
- Proper contrast ratios are important when layering expressive colors over backgrounds
- Use a consistent palette approach to unify similar data visualizations

###  Don't
- Avoid using expressive palettes as a first choice—prefer semantic colors (accent, surface, feedback) first
- Avoid overusing warm colors like orange, red, and green—they work best for highlighting critical information
- Avoid using indigo in ways that could confuse users with the brand color (buttons, interactive states)
- Avoid mixing expressive palette colors with feedback colors without clear visual distinction
- Avoid using expressive colors where neutral grays or system colors would be more appropriate
- Avoid relying on color alone to convey meaning—pair colors with icons, labels, or patterns
- Avoid overriding accessibility requirements for visual appeal

### Context
- Data visualization and charting
- Complex dashboards with multiple data categories
- Highlighting specific data points or trends
- Geographic or hierarchical data representation
- Educational materials and infographics
- Scenario-based UI variations

## When to Use Semantic Colors Instead

Before choosing expressive palette colors, evaluate these alternatives:

- **For interactive elements:** Use `--slds-g-color-accent-*` instead of expressive palettes
- **For backgrounds and containers:** Use `--slds-g-color-surface-*` or `--slds-g-color-surface-container-*`
- **For feedback states:** Use `--slds-g-color-error-*`, `--slds-g-color-warning-*`, or `--slds-g-color-success-*` instead of palette colors
- **For text and icons:** Use `--slds-g-color-on-surface-*` or `--slds-g-color-on-accent-*` for proper contrast

## Palette Selection Guidelines

### Color Tone Recommendations

**Cool Tone Priority (Recommended for most designs):**
- Cloud Blue: Professional, calm, data-forward
- Indigo: Similar to brand, use intentionally
- Purple: Expressive, creative
- Violet: Accent, emphasis

**Warm Tone Use (Use when attention is needed):**
- Green: Issues, highlights (use sparingly to distinguish from teal success)
- Orange: Warnings, important data
- Hot Orange: Critical warnings, maximum emphasis
- Red: Errors, urgent information (use sparingly to distinguish from pink error state)

## Accessibility

- Expressive palette colors do not guarantee accessible contrast—manual verification required
- **Contrast requirements:** 50-point separation for text (4.5:1), 40-point for UI elements (3:1)
- **CVD warning:** Avoid Red+Green and Blue+Purple as sole differentiators
- Use patterns, icons, or labels in addition to color to convey meaning
- Test with colorblind simulation tools when using multiple palette colors
- Semantic color hooks are preferred when accessibility guarantees are required
- Accessibility requirements apply — consult your project's accessibility standards

## Color Grade Scale

> **Grade Scale:** SLDS uses a 0-100 grade scale where 0 is darkest and 100 is lightest. Point separations guarantee accessibility: 50-point = 4.5:1 contrast (text), 40-point = 3:1 contrast (UI).
>
> For complete grade scale documentation and the numerical color system, see the [Color Hooks Index](ref:slds.guidance.hooks.color).

---
id: slds.guidance.hooks.color
title: SLDS Color Styling Hooks
description: Index and decision guide for color styling hooks - semantic, system, and expressive palettes
summary: "Entry point for color styling hooks. Provides hook selection hierarchy (semantic 85%, system 5-10%, palette 5%), quick decision guide, and pointers to detailed documentation for accent, surface, feedback, system, and expressive colors."

artifact_type: index
domain: styling-hooks
topic: color

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, explore]

children:
  - slds.guidance.hooks.color.accent
  - slds.guidance.hooks.color.surface
  - slds.guidance.hooks.color.feedback
  - slds.guidance.hooks.color.system
  - slds.guidance.hooks.color.expressive-palette

refs:
  - slds.guidance.hooks
  - slds.guidance.hooks.color.accent
  - slds.guidance.hooks.color.surface
  - slds.guidance.hooks.color.feedback
  - slds.guidance.hooks.color.system
  - slds.guidance.hooks.color.expressive-palette
tags: [styling-hooks, color, index, semantic, system, palette]
keywords: [color hooks, accent, surface, feedback, system colors, expressive palette, color selection]
---

# SLDS Color Styling Hooks

## Overview

SLDS color styling hooks provide a systematic approach to applying colors that maintain accessibility, support theming (including dark mode), and create consistent visual hierarchy across all Salesforce interfaces.

## Hook Selection Hierarchy

When choosing color hooks, follow this priority order:

1. **Semantic Hooks (85% of use cases)** - First choice for standard UI
2. **System Hooks (5-10%)** - Edge cases where semantic hooks don't apply
3. **Palette Hooks (5%)** - Data visualization and decorative purposes

---

## Semantic Color Hooks

Semantic hooks are purpose-driven and automatically handle accessibility and theming.

### Accent Colors

Brand identity and interactive elements like links, buttons, and icons.

**Hook patterns:** `--slds-g-color-accent-*`, `--slds-g-color-accent-container-*`, `--slds-g-color-border-accent-*`, `--slds-g-color-on-accent-*`

**Use for:** Links, brand buttons, interactive icons, selected states

> **Detailed guidance:** [Accent Color Hooks](ref:slds.guidance.hooks.color.accent)

### Surface Colors

Backgrounds and canvases that establish visual stacking context and enable theming.

**Hook patterns:** `--slds-g-color-surface-*`, `--slds-g-color-surface-container-*`, `--slds-g-color-on-surface-*`

**Use for:** Page backgrounds, modals, cards, panels, popovers

> **Detailed guidance:** [Surface Color Hooks](ref:slds.guidance.hooks.color.surface)

### Feedback Colors

Visual feedback for status and state communication.

**Hook patterns:** `--slds-g-color-error-*`, `--slds-g-color-warning-*`, `--slds-g-color-success-*`, `--slds-g-color-info-*`, `--slds-g-color-disabled-*`

**Use for:** Error messages, warnings, success confirmations, informational alerts, disabled states

> **Detailed guidance:** [Feedback Color Hooks](ref:slds.guidance.hooks.color.feedback)

---

## System Color Hooks

Direct access to brand, neutral, and feedback color palettes for edge cases.

**Hook patterns:** `--slds-g-color-neutral-base-{grade}`, `--slds-g-color-brand-base-{grade}`, `--slds-g-color-error-base-{grade}`, `--slds-g-color-warning-base-{grade}`, `--slds-g-color-success-base-{grade}`

**Use for:** Data visualization, custom brand elements, legacy migration, specialized UI

**Important:** System colors bypass built-in accessibility guarantees. Manual verification required.

> **Detailed guidance:** [System Color Hooks](ref:slds.guidance.hooks.color.system)

---

## Expressive Palette Hooks

Extended color palettes for data visualization and highlighting.

### Cool Tones (Recommended)

- **Cloud Blue:** `--slds-g-color-palette-cloud-blue-{grade}` - Professional, calm
- **Indigo:** `--slds-g-color-palette-indigo-{grade}` - Similar to brand
- **Purple:** `--slds-g-color-palette-purple-{grade}` - Expressive, creative
- **Violet:** `--slds-g-color-palette-violet-{grade}` - Accent, emphasis

### Warm Tones (Use with caution)

- **Green:** `--slds-g-color-palette-green-{grade}` - Highlights (avoid confusion with success)
- **Orange:** `--slds-g-color-palette-orange-{grade}` - Attention-grabbing
- **Hot Orange:** `--slds-g-color-palette-hot-orange-{grade}` - Maximum emphasis
- **Red:** `--slds-g-color-palette-red-{grade}` - Urgent (avoid confusion with error)

**Use for:** Charts, graphs, dashboards, data categories, infographics

> **Detailed guidance:** [Expressive Palette Hooks](ref:slds.guidance.hooks.color.expressive-palette)

---

## The Numerical Color System

SLDS uses a 0-100 grade scale where:

- **0** = Darkest
- **100** = Lightest

### Accessibility Guarantees

| Separation | Contrast Ratio | Use Case             |
| ---------- | -------------- | -------------------- |
| 50 points  | 4.5:1          | Text (WCAG AA)       |
| 40 points  | 3:1            | UI elements, borders |

### Common Pairings

| Background           | Foreground         | Purpose          |
| -------------------- | ------------------ | ---------------- |
| `surface-1`          | `on-surface-1/2/3` | Standard content |
| `accent-container-1` | `on-accent-1`      | Brand buttons    |
| `error-container-1`  | `on-error-1`       | Error alerts     |

---

## Quick Decision Guide

| Need              | Hook Category      | Example                                |
| ----------------- | ------------------ | -------------------------------------- |
| Link color        | Accent             | `--slds-g-color-accent-2`              |
| Page background   | Surface            | `--slds-g-color-surface-1`             |
| Card background   | Surface Container  | `--slds-g-color-surface-container-1`   |
| Button background | Accent Container   | `--slds-g-color-accent-container-1`    |
| Error message     | Feedback           | `--slds-g-color-error-1`               |
| Chart colors      | Expressive Palette | `--slds-g-color-palette-cloud-blue-50` |
| Body text         | On Surface         | `--slds-g-color-on-surface-2`          |

---

## Detailed Guidance

For implementation details on specific color types, see:

1. **Accent colors:** [Accent Color Hooks](ref:slds.guidance.hooks.color.accent)
2. **Surface colors:** [Surface Color Hooks](ref:slds.guidance.hooks.color.surface)
3. **Feedback colors:** [Feedback Color Hooks](ref:slds.guidance.hooks.color.feedback)
4. **System colors:** [System Color Hooks](ref:slds.guidance.hooks.color.system)
5. **Expressive palette:** [Expressive Palette Hooks](ref:slds.guidance.hooks.color.expressive-palette)

---
id: slds.guidance.hooks.color.accent
title: Accent Color Styling Hooks
description: Semantic hooks for brand identity, interactive elements, and visual emphasis
summary: "Guidance for accent color hooks used for links, buttons, and brand emphasis. Covers accent, accent-container, border-accent, and on-accent hooks with state progression and accessibility pairing."

artifact_type: reference
domain: styling-hooks
topic: color
subtopic: semantic

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

refs:
  - slds.guidance.hooks.color.surface
  - slds.guidance.hooks.color
  - slds.guidance.hooks.color.feedback

tags: [styling-hooks, color, semantic, accent, brand, interactive, links, buttons]
keywords: [accent color, brand color, links, buttons, interactive elements, visual hierarchy, hover states]
---

# Accent Color Styling Hooks

> **Hook Selection:** Semantic hooks like accent are the first choice (85% of use cases). See [Hook Selection Hierarchy](ref:slds.guidance.hooks.color).

## Overview

Accent colors express a brand's accent color throughout the user interface or to draw attention to an action. Brand colors highlight actions on the page through buttons and links.

---

## `--slds-g-color-accent-*`

### Description
Accent colors that are generally used for text or icons.

### Available Hooks
- `--slds-g-color-accent-1` - Lightest accent color
- `--slds-g-color-accent-2` - Medium accent color
- `--slds-g-color-accent-3` - Darkest accent color

### State Progression Logic

The variant number you use depends on the default state's contrast requirements:
- **If default state uses `accent-1`**: Use `accent-2` for hover states
- **If default state uses `accent-2`**: Use `accent-3` for hover states

**Why this matters**: `accent-2` is often the default for links and interactive text because `accent-1` may not meet accessibility contrast requirements on non-white backgrounds. The hover state then uses the next darker variant.

### Usage

####  Do
- Use accent colors for brand identity and interactive elements (links, buttons, icons)
- Use accent colors for emphasizing key actions and content
- Use accent colors to create visual hierarchy with brand colors
<!-- - Consider brand-base-90 and 80 for backgrounds and hover states for menu type components using the brand-base styling hook -->

####  Don't
- Avoid using for large background areas
- Avoid using for container backgrounds
- Avoid for body text or long-form content
- Avoid using without ensuring proper contrast
- Avoid using as the only color indicator for status
- Avoid using system colors or colors from another group like surface colors in combination with accent colors

#### Context
- Links and interactive text (commonly use accent-2 by default, accent-3 on hover)
- Brand elements and identity
- Icon fills and accents
- Icon Buttons and interactive text
- Indicates active or selected states in components
- **Note**: Interactive icons that respond to hover are treated as Button Icon components and handle the state changes on their own.

### Accessibility
- All accent colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-accent colors for foreground text and icons. Choose on-accent level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-accent-1` with `--slds-g-color-on-accent-1` for consistency, though other on-accent levels may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-accent-container-*`

### Description
Background fills using accent colors for containers.

### Available Hooks
- `--slds-g-color-accent-container-1` - Lightest accent container background
- `--slds-g-color-accent-container-2` - Medium accent container background
- `--slds-g-color-accent-container-3` - Darkest accent container background

### State Progression Logic

Container variants follow a straightforward state progression pattern:
- **If default state uses `accent-container-1`**: Use `accent-container-2` for hover/active states
- **If default state uses `accent-container-2`**: Use `accent-container-3` for hover/active states

**Why this pattern**: Higher numbered variants provide increased visual emphasis and contrast, making interactive states clearly distinguishable from default states.

### Usage

####  Do
- Use accent container colors for containers such as brand buttons and their hover and active states
- Use accent container colors for interactive container backgrounds that need accent color emphasis
- Use accent container colors for interactive element backgrounds
- Use accent container colors for hover/focus/active states of interactive containers

####  Don't
- Avoid using for non-interactive decorative elements
- Avoid using as primary or secondary brand colors outside interactive container contexts
- Avoid for subtle interactions where less emphasis is needed
- Avoid using for large areas without specific interaction requirements
- Avoid without proper interaction context
- Avoid using system colors or colors from another group like surface colors in combination with accent container colors

**Important**: Accent containers carry brand significance indicating interaction and should only be used for interactive elements, not for non-interactive decorative purposes.

#### Context
- Brand button backgrounds and their interactive states
- Interactive element backgrounds
- Hover/focus/active state backgrounds for interactive containers
- Interactive content areas requiring brand emphasis

### Accessibility
- All container colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-accent colors for foreground text and icons. Choose on-accent level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-accent-container-1` with `--slds-g-color-on-accent-1` for consistency, though other on-accent levels may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-border-accent-*`

### Description
Accent border colors for brand-colored outlines when higher visual emphasis is required beyond neutral borders.

### Available Hooks
- `--slds-g-color-border-accent-1` - Lightest accent border color
- `--slds-g-color-border-accent-2` - Medium accent border color
- `--slds-g-color-border-accent-3` - Darkest accent border color

### Usage

####  Do
- Use neutral border hooks (`--slds-g-color-border-2`) as the primary choice for standard interactive elements to ensure cross-component consistency
- Use border-accent hooks only when explicit brand-colored outlines are required by the design
- Use border-accent hooks for high-emphasis brand identity elements that need to stand out from standard UI
- Pair with accent container colors for unified brand treatments

####  Don't
- Avoid using border-accent hooks as the default border choice — prefer neutral borders unless brand emphasis is explicitly needed
- Avoid using as the default border for interactive elements unless a high-contrast brand treatment is specifically required
- Avoid using for large background areas (borders should define, not fill)
- Avoid for body text or long-form content
- Avoid using without ensuring proper contrast
- Avoid using as the only color indicator for status
- Avoid using non-border accent colors on borders to achieve a border with an accent color

#### Context
- Brand button outlines
- Interactive element outlines

**Note**: To align with current design patterns, most interactive components—including brand-variant buttons—rely on neutral border hooks (`--slds-g-color-border-2`) or are borderless. Border-accent hooks are primarily reserved for specialized theming, custom brand components, or specific focus indicators where standard neutral borders do not provide sufficient emphasis.

### Accessibility
- All border accent colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background
- Works best on neutral backgrounds or paired with matching accent container colors.
- Maintains visibiltiy and consisteny when paired with `--slds-g-sizing-border-*` sizing hooks

---

## `--slds-g-color-on-accent-*`

### Description
Foreground colors for content placed on accent color backgrounds, such as text and icons.

### Available Hooks
- `--slds-g-color-on-accent-1` - Lightest foreground color for accent backgrounds
- `--slds-g-color-on-accent-2` - Medium foreground color for accent backgrounds
- `--slds-g-color-on-accent-3` - Darkest foreground color for accent backgrounds

### Usage

####  Do
- Use on-accent colors for text placed on accent color backgrounds
- Use on-accent colors for icons displayed on accent color backgrounds
- Use on-accent colors for any content that needs to be readable on accent backgrounds
- Pair on-accent colors with the corresponding accent background color

####  Don't
- Avoid using on light or non-accent backgrounds
- Avoid using without the corresponding accent background
- Avoid using for decorative elements that don't require readability
- Avoid mixing with non-matching accent backgrounds

#### Context
- Text on accent backgrounds
- Icons on accent surfaces

### Accessibility
- All on-accent colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background
- Works best paired with a corresponding accent background color. Choose on-accent level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-on-accent-1` with `--slds-g-color-accent-1` or `--slds-g-color-accent-container-1` for consistency, though other pairings may be used based on emphasis needs while maintaining accessibility compliance

---
id: slds.guidance.hooks.color.feedback
title: Feedback Color Styling Hooks
description: Semantic hooks for error, warning, success, info, and disabled states
summary: "Guidance for feedback color hooks that convey status and state. Covers error, warning, success, info, and disabled colors with their strict semantic meanings and proper usage contexts."

artifact_type: reference
domain: styling-hooks
topic: color
subtopic: semantic

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

refs:
  - slds.guidance.hooks.color
  - slds.guidance.hooks.color.accent
  - slds.guidance.hooks.color.surface
  - slds.guidance.hooks.borders
tags: [styling-hooks, color, semantic, feedback, error, warning, success, info, disabled]
keywords: [error color, warning color, success color, info color, disabled color, status indicators, form validation, alerts]
---

# Feedback Color Styling Hooks

> **Hook Selection:** Semantic hooks like feedback are the first choice (85% of use cases). See [Hook Selection Hierarchy](ref:slds.guidance.hooks.color).

## Overview

Feedback or alert colors provide visual feedback to the user regarding the status of an action or event. These colors are intentionally reserved to convey specific associations throughout the Salesforce UI. Only use feedback colors for their intended meaning so users have clear color associations throughout all of Salesforce products.

| **Color**   | **Meaning**                                                                |
|-------------|---------------------------------------------------------------------------|
| Error       | An error that needs to be addressed before progressing                     |
| Warning     | A warning of potential issues the user needs to be aware of                |
| Success     | A positive or successful action or outcome                                 |
| Info        | Convey non-critical information to users                                   |
| Disabled    | Indicates that a component is unavailable                                  |

---

## Understanding Feedback Hook Variants

### The 1-2 Pattern
Feedback hooks that include `-1` and `-2` variants follow this pattern:
- **`-1`**: Default state (lighter color, lower emphasis)
- **`-2`**: Hover/active state OR higher emphasis state (darker color, higher emphasis)

### Why Some Feedback Types Lack Variants

Not all feedback categories have `-2` variants. This is **intentional** and based on component availability in SLDS2:

| Feedback Type | Has `-2` Variant? | Reason |
|--------------|-------------------|--------|
| Error |  Yes (container, border, on-error) | SLDS2 includes error/destructive buttons requiring hover states |
| Success |  Yes (container, border, on-success) | SLDS2 includes success buttons requiring hover states |
| Warning |  No (except border-1) | SLDS2 has no warning buttons; used for form validation and static alerts |
| Info |  No | SLDS2 has no info buttons; only static badges, icons, and alert containers |
| Disabled |  Yes (container, on-disabled) | Multiple disabled states for different visual weights |

**Future-proofing**: If interactive warning or info components (such as warning buttons) are added to SLDS2 in future releases, corresponding `-2` variants may be introduced for hover states.

---

## `--slds-g-color-error-1`

### Description
Primary error color that indicates errors requiring user attention before progressing.

### Usage

####  Do
- Use error-1 for indicating errors in forms and validation messages
- Use error-1 for critical error states requiring immediate attention
- Use error-1 for error icons and text on neutral backgrounds
- Use error-1 to signal blocking issues that prevent progression
- Use error-1 for destructive action text (delete, remove)

####  Don't
- Avoid using for large background areas (use error-container instead)
- Avoid using for non-error contexts or decorative purposes
- Avoid using without ensuring proper contrast
- Avoid using as the only indicator of an error (always pair with text or icons)
- Avoid using system colors or colors from another group like surface colors in combination with error colors

#### Context
- Form validation error text
- Error icons on neutral backgrounds
- Destructive action button text or icons
- Error message text on light backgrounds
- Critical system notification text

### Accessibility
- All error colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-error colors for foreground text and icons on error backgrounds. When used as foreground on neutral surfaces, ensure proper contrast is maintained

---

## `--slds-g-color-error-container-*`

### Description
Error background colors for containers that communicate error states with varying levels of emphasis.

### Available Hooks
- `--slds-g-color-error-container-1` - Light error background for subtle emphasis
- `--slds-g-color-error-container-2` - Medium error background for higher emphasis

### State Progression Logic

Error container variants follow a state progression pattern for interactive destructive elements:
- **`error-container-1`**: Light error background for non-interactive error messages, alerts, and banners
- **`error-container-2`**: Medium error background for destructive button default states, or hover states when starting from container-1

**Typical pattern for destructive buttons**: Use `error-container-2` as the default background, with darker borders or overlays for hover/active states (handled by component-level hooks).

### Usage

####  Do
- Use error container colors for error alert backgrounds and error message containers
- Use error container colors for error banners and toast notifications
- Use error-container-2 for destructive button backgrounds
- Use error container colors for hover/focus/active states of error-related containers

####  Don't
- Avoid using for non-error contexts
- Avoid using without specific error communication requirements
- Avoid mixing with non-error semantic colors
- Avoid using system colors or colors from another group like surface colors in combination with error container colors

#### Context
- Error alert backgrounds
- Error message containers
- Destructive button backgrounds
- Error banner backgrounds
- Error toast notifications

### Accessibility
- All container colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-error colors for foreground text and icons. Choose on-error level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-error-container-1` with `--slds-g-color-on-error-1` for consistency, though other on-error levels may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-border-error-*`

### Description
Error border colors for visual emphasis of error states with varying levels of emphasis.

### Available Hooks
- `--slds-g-color-border-error-1` - Primary error border color
- `--slds-g-color-border-error-2` - Darker error border for increased emphasis

### State Progression Logic

Border error variants follow standard emphasis patterns:
- **`border-error-1`**: Default error border for standard error states
- **`border-error-2`**: Higher emphasis error border for increased visual weight or interactive hover states

**Typical usage**: Use `-1` for default error borders, and `-2` when higher visual emphasis is needed or for interactive state changes.

### Usage

####  Do
- Use border-error hooks for error form field borders
- Use border-error hooks for error container outlines
- Use border-error hooks to create visual emphasis for error states
- Use border-error hooks for focus indicators on error elements
- Use border-error hooks independently or paired with an error container color
- Use border-error-2 for high-emphasis error borders and destructive actions

####  Don't
- Avoid using for large background areas (borders should define, not fill)
- Avoid using without ensuring proper contrast
- Avoid using as the only indicator of an error
- Avoid using non-border error colors on borders to achieve a border with an error color

#### Context
- Error form field borders
- Error container outlines
- Error element indicators
- Validation error borders
- Destructive button outlines (border-error-2)

### Accessibility
- All border error colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background
- Works best on neutral backgrounds or paired with matching error container colors
- Maintains visibility and consistency when paired with `--slds-g-sizing-border-*` sizing hooks

---

## `--slds-g-color-on-error-*`

### Description
Foreground colors for content placed on error backgrounds, with varying emphasis levels.

### Available Hooks
- `--slds-g-color-on-error-1` - Foreground for error-container-1 backgrounds
- `--slds-g-color-on-error-2` - Darker foreground for error-container-2 backgrounds

### Usage

####  Do
- Use on-error colors for text placed on error container backgrounds
- Use on-error colors for icons displayed on error backgrounds
- Use on-error-1 as error text color on neutral surfaces
- Pair on-error colors with the corresponding error container color
- Use on-error-2 for destructive button text on error-container-2

####  Don't
- Avoid using on non-error backgrounds without verification
- Avoid using for decorative elements that don't require readability
- Avoid mixing on-error-1 with error-container-2 or vice versa
- Avoid mixing with non-matching error backgrounds

#### Context
- Text on error container backgrounds
- Icons on error surfaces
- Error message text
- Destructive button text

### Accessibility
- All on-error colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background
- Works best paired with a corresponding error background color. Choose on-error level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-on-error-1` with `--slds-g-color-error-1` or `--slds-g-color-error-container-1` for consistency, though other pairings may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-warning-1`

### Description
Primary warning color that indicates potential issues requiring user awareness.

> **Why no `-2` variant?** Warning hooks lack a `-2` variant because SLDS2 currently has no interactive warning button components. The `-1` variant serves non-interactive elements like static warning icons, badges, and alert containers. If warning buttons become interactive in future releases, a `-2` variant may be added for hover states.

### Usage

####  Do
- Use warning-1 for indicating warnings and cautions
- Use warning-1 for alerting users to potential issues
- Use warning-1 for warning icons and text on neutral backgrounds
- Use warning-1 to signal non-blocking issues requiring attention
- Use warning-1 for informing users of consequences before actions

####  Don't
- Avoid using for large background areas (use warning-container instead)
- Avoid using for non-warning contexts or decorative purposes
- Avoid using without ensuring proper contrast
- Avoid using as the only indicator of a warning (always pair with text or icons)
- Avoid using system colors or colors from another group like surface colors in combination with warning colors

#### Context
- Warning message text
- Caution indicators
- Warning icons on neutral backgrounds
- Pre-action warning text
- Non-critical system notification text
- **Note**: If a warning icon is interactive (clickable, shows tooltip), it should be treated as a **button icon** component and use button icon coloring for hover states, not these standalone warning hooks

### Accessibility
- All warning colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-warning colors when used on warning backgrounds

---

## `--slds-g-color-warning-container-1`

### Description
Light warning background color for containers that communicate warning states.

### Usage

####  Do
- Use warning-container-1 for warning alert backgrounds
- Use warning-container-1 for warning banners and toast notifications
- Use warning-container-1 for caution message containers
- Pair warning-container-1 with `--slds-g-color-on-warning-1` for foreground content

####  Don't
- Avoid using for non-warning contexts
- Avoid using without specific warning communication requirements
- Avoid mixing with non-warning semantic colors
- Avoid using system colors or colors from another group like surface colors in combination with warning container colors

#### Context
- Warning alert backgrounds
- Warning message containers
- Caution banner backgrounds
- Warning toast notifications

### Accessibility
- AA compliant when paired with on-warning-1
- Best paired with on-warning colors for foreground text and icons. Choose on-warning level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-warning-container-1` with `--slds-g-color-on-warning-1` for consistency, though other on-warning levels may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-border-warning-1`

### Description
Warning border color for visual emphasis of warning states.

### Usage

####  Do
- Use border-warning-1 for warning form field borders
- Use border-warning-1 for warning container outlines
- Use border-warning-1 to create visual emphasis for warning states
- Use border-warning-1 for focus indicators on warning elements
- Use border-warning-1 independently or paired with a warning container color

####  Don't
- Avoid using for large background areas (borders should define, not fill)
- Avoid using without ensuring proper contrast
- Avoid using as the only indicator of a warning
- Avoid using non-border warning colors on borders to achieve a border with a warning color

#### Context
- Warning form field borders
- Warning container outlines
- Warning element indicators
- Caution borders
- **Note**: This hook was added to support form validation patterns. Unlike error/success, there is no `border-warning-2` since warning states don't typically have interactive hover requirements in current SLDS2 components.

### Accessibility
- All border warning colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background
- Works best on neutral backgrounds or paired with matching warning container colors
- Maintains visibility and consistency when paired with `--slds-g-sizing-border-*` sizing hooks

---

## `--slds-g-color-on-warning-1`

### Description
Foreground color for content placed on warning backgrounds or for warning text on light surfaces.

### Usage

####  Do
- Use on-warning-1 for text placed on `--slds-g-color-warning-container-1` backgrounds
- Use on-warning-1 for icons displayed on warning backgrounds
- Use on-warning-1 as warning text color on neutral surfaces
- Pair on-warning-1 with the corresponding warning background color

####  Don't
- Avoid using on non-warning backgrounds without verification
- Avoid using for decorative elements that don't require readability
- Avoid mixing with non-matching warning backgrounds

#### Context
- Text on warning-container-1 backgrounds
- Icons on warning surfaces
- Warning message text

### Accessibility
- AA compliant when paired with warning-container-1 backgrounds
- Works best paired with a corresponding warning background color. Choose on-warning level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-on-warning-1` with `--slds-g-color-warning-1` or `--slds-g-color-warning-container-1` for consistency, though other pairings may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-success-1`

### Description
Primary success color that indicates positive outcomes and successful actions.

### Usage

####  Do
- Use success-1 for indicating successful operations and confirmations
- Use success-1 for positive feedback and completion states
- Use success-1 for success icons and text on neutral backgrounds
- Use success-1 to signal successful outcomes and achievements
- Use success-1 for confirming actions were completed

####  Don't
- Avoid using for large background areas (use success-container instead)
- Avoid using for non-success contexts or decorative purposes
- Avoid using without ensuring proper contrast
- Avoid using as the only indicator of success (always pair with text or icons)
- Avoid using system colors or colors from another group like surface colors in combination with success colors

#### Context
- Success message text
- Confirmation indicators
- Success icons on neutral backgrounds
- Completion state text
- Positive system notification text

### Accessibility
- All success colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-success colors when used on success backgrounds

---

## `--slds-g-color-success-container-*`

### Description
Success background colors for containers that communicate success states with varying levels of emphasis.

### Available Hooks
- `--slds-g-color-success-container-1` - Light success background for subtle emphasis
- `--slds-g-color-success-container-2` - Medium success background for higher emphasis

### State Progression Logic

Success container variants follow a state progression pattern for interactive confirmation elements:
- **`success-container-1`**: Light success background for non-interactive success messages, alerts, and banners
- **`success-container-2`**: Medium success background for confirmation button default states, or hover states when starting from container-1

**Typical pattern for confirmation buttons**: Use `success-container-2` as the default background, with darker borders or overlays for hover/active states (handled by component-level hooks).

### Usage

####  Do
- Use success container colors for success alert backgrounds and success message containers
- Use success container colors for success banners and toast notifications
- Use success-container-2 for confirmation button backgrounds
- Use success container colors for hover/focus/active states of success-related containers

####  Don't
- Avoid using for non-success contexts
- Avoid using without specific success communication requirements
- Avoid mixing with non-success semantic colors
- Avoid using system colors or colors from another group like surface colors in combination with success container colors

#### Context
- Success alert backgrounds
- Success message containers
- Confirmation button backgrounds
- Success banner backgrounds
- Success toast notifications

### Accessibility
- All container colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-success colors for foreground text and icons. Choose on-success level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-success-container-1` with `--slds-g-color-on-success-1` for consistency, though other on-success levels may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-border-success-*`

### Description
Success border colors for visual emphasis of success states with varying levels of emphasis.

### Available Hooks
- `--slds-g-color-border-success-1` - Primary success border color
- `--slds-g-color-border-success-2` - Darker success border for increased emphasis

### State Progression Logic

Border success variants follow standard emphasis patterns:
- **`border-success-1`**: Default success border for standard success states
- **`border-success-2`**: Higher emphasis success border for increased visual weight or interactive hover states

**Typical usage**: Use `-1` for default success borders, and `-2` when higher visual emphasis is needed or for interactive state changes.

### Usage

####  Do
- Use border-success hooks for success form field borders
- Use border-success hooks for success container outlines
- Use border-success hooks to create visual emphasis for success states
- Use border-success hooks for focus indicators on success elements
- Use border-success hooks independently or paired with a success container color
- Use border-success-2 for high-emphasis success borders

####  Don't
- Avoid using for large background areas (borders should define, not fill)
- Avoid using without ensuring proper contrast
- Avoid using as the only indicator of success
- Avoid using non-border success colors on borders to achieve a border with a success color

#### Context
- Success form field borders
- Success container outlines
- Success element indicators
- Confirmation borders
- Emphasized confirmation outlines (border-success-2)

### Accessibility
- All border success colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background
- Works best on neutral backgrounds or paired with matching success container colors
- Maintains visibility and consistency when paired with `--slds-g-sizing-border-*` sizing hooks

---

## `--slds-g-color-on-success-*`

### Description
Foreground colors for content placed on success backgrounds, with varying emphasis levels.

### Available Hooks
- `--slds-g-color-on-success-1` - Foreground for success-container-1 backgrounds
- `--slds-g-color-on-success-2` - Darker foreground for success-container-2 backgrounds

### Usage

####  Do
- Use on-success colors for text placed on success container backgrounds
- Use on-success colors for icons displayed on success backgrounds
- Use on-success-1 as success text color on neutral surfaces
- Pair on-success colors with the corresponding success container color
- Use on-success-2 for confirmation button text on success-container-2

####  Don't
- Avoid using on non-success backgrounds without verification
- Avoid using for decorative elements that don't require readability
- Avoid mixing on-success-1 with success-container-2 or vice versa
- Avoid mixing with non-matching success backgrounds

#### Context
- Text on success container backgrounds
- Icons on success surfaces
- Success message text
- Confirmation button text

### Accessibility
- All on-success colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background
- Works best paired with a corresponding success background color. Choose on-success level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-on-success-1` with `--slds-g-color-success-1` or `--slds-g-color-success-container-1` for consistency, though other pairings may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-info-1`

### Description
Primary info color that conveys non-critical information to users.

> **Why no `-2` variant?** Info hooks lack a `-2` variant because SLDS2 currently has no interactive info button components. The `-1` variant serves non-interactive elements like static info badges, icons, and alert containers. If info buttons become interactive in future releases, a `-2` variant may be added for hover states.

### Usage

####  Do
- Use info-1 for indicating informational messages
- Use info-1 for helpful tips and guidance
- Use info-1 for info icons and text on neutral backgrounds
- Use info-1 to signal non-critical information
- Use info-1 for educational or contextual content

####  Don't
- Avoid using for large background areas (use info-container instead)
- Avoid using for non-informational contexts or decorative purposes
- Avoid using without ensuring proper contrast
- Avoid using as the only indicator of information (always pair with text or icons)
- Avoid using system colors or colors from another group like surface colors in combination with info colors

#### Context
- Informational message text
- Help text and tooltips
- Info icons on neutral backgrounds
- Contextual guidance text
- Educational notification text
- **Note**: If an info icon is interactive (clickable, shows tooltip), it should be treated as a **button icon** component and use button icon coloring for hover states, not these standalone info hooks

### Accessibility
- All info colors are AA compliant and maintain a 4.5:1 contrast using semantic colors with a 50 gradepoint difference between the background and foreground
- Best paired with on-info colors when used on info backgrounds

---

## `--slds-g-color-info-container-1`

### Description
Light info background color for containers that communicate informational states.

### Usage

####  Do
- Use info-container-1 for info alert backgrounds
- Use info-container-1 for info banners and toast notifications
- Use info-container-1 for help panel backgrounds
- Pair info-container-1 with `--slds-g-color-on-info-1` for foreground content

####  Don't
- Avoid using for non-informational contexts
- Avoid using without specific informational communication requirements
- Avoid mixing with non-info semantic colors
- Avoid using system colors or colors from another group like surface colors in combination with info container colors

#### Context
- Info alert backgrounds
- Info message containers
- Help panel backgrounds
- Info banner backgrounds
- Info toast notifications

### Accessibility
- AA compliant when paired with on-info-1
- Best paired with on-info colors for foreground text and icons. Choose on-info level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-info-container-1` with `--slds-g-color-on-info-1` for consistency, though other on-info levels may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-on-info-1`

### Description
Foreground color for content placed on info backgrounds or for info text on light surfaces.

### Usage

####  Do
- Use on-info-1 for text placed on `--slds-g-color-info-container-1` backgrounds
- Use on-info-1 for icons displayed on info backgrounds
- Use on-info-1 as info text color on neutral surfaces
- Pair on-info-1 with the corresponding info background color

####  Don't
- Avoid using on non-info backgrounds without verification
- Avoid using for decorative elements that don't require readability
- Avoid mixing with non-matching info backgrounds

#### Context
- Text on info-container-1 backgrounds
- Icons on info surfaces
- Info message text
- Help text on info backgrounds

### Accessibility
- AA compliant when paired with info-container-1 backgrounds
- Works best paired with a corresponding info background color. Choose on-info level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-on-info-1` with `--slds-g-color-info-1` or `--slds-g-color-info-container-1` for consistency, though other pairings may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-disabled-1`

### Description
Primary disabled color that indicates components are unavailable for interaction.

### Usage

####  Do
- Use disabled-1 for indicating disabled or inactive elements
- Use disabled-1 for non-interactive states
- Use disabled-1 for disabled borders and backgrounds
- Use disabled-1 to signal unavailable functionality
- Use disabled-1 for inactive form fields and buttons

####  Don't
- Avoid using for active or interactive elements
- Avoid using for decorative purposes
- Avoid using without ensuring users understand the disabled state
- Avoid using as the only indicator of disabled state (pair with `aria-disabled` or `disabled` attributes)
- Avoid using system colors or colors from another group like surface colors in combination with disabled colors

#### Context
- Disabled form field borders
- Inactive button backgrounds
- Unavailable menu items
- Non-interactive element styling
- Grayed-out content

### Accessibility
- All disabled colors maintain proper contrast ratios, though they intentionally appear de-emphasized
- Always use proper ARIA attributes (`aria-disabled="true"` or `disabled` attribute) in addition to visual styling

---

## `--slds-g-color-disabled-container-*`

### Description
Disabled container background colors for unavailable states with varying levels of emphasis.

### Available Hooks
- `--slds-g-color-disabled-container-1` - Light disabled background
- `--slds-g-color-disabled-container-2` - Medium emphasis disabled background

### Understanding Disabled Container Variants

Disabled container variants provide different visual weights for unavailable states:
- **`disabled-container-1`**: Light disabled background for subtle de-emphasis
- **`disabled-container-2`**: Medium disabled background for stronger visual de-emphasis

**These are NOT state progressions**: Disabled elements have no interactive states. The variant numbers represent different levels of visual de-emphasis based on component needs, not hover/active states.

**Typical usage**: Choose based on desired visual weight—`disabled-container-1` for subtle de-emphasis (common in form fields and neutral buttons), `disabled-container-2` for stronger de-emphasis (common in filled branded buttons).

### Usage

####  Do
- Use disabled container colors for disabled button backgrounds
- Use disabled container colors for inactive form field backgrounds
- Use disabled container colors for unavailable container states
- Use disabled container colors for grayed-out panel backgrounds

####  Don't
- Avoid using for active or interactive containers
- Avoid for elements that should remain visually prominent
- Avoid using without proper disabled state indicators
- Avoid mixing with active state semantic colors
- Avoid using system colors or colors from another group like surface colors in combination with disabled container colors

#### Context
- Disabled button backgrounds
- Inactive form field backgrounds
- Unavailable container backgrounds
- Grayed-out panels
- Non-interactive element backgrounds

### Accessibility
- All container colors maintain proper contrast ratios appropriate for disabled states
- Best paired with on-disabled colors for foreground text and icons. Choose on-disabled level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-disabled-container-1` with `--slds-g-color-on-disabled-1` for consistency, though other on-disabled levels may be used based on emphasis needs while maintaining accessibility compliance
- Always include proper semantic HTML and ARIA attributes to communicate disabled state to assistive technologies

---

## `--slds-g-color-border-disabled-1`

### Description
Disabled border color for visual emphasis of unavailable states.

### Usage

####  Do
- Use border-disabled-1 for disabled form field borders
- Use border-disabled-1 for inactive container outlines
- Use border-disabled-1 to create visual emphasis for disabled states
- Use border-disabled-1 independently or paired with a disabled container color

####  Don't
- Avoid using for active or interactive elements
- Avoid using without proper disabled state communication
- Avoid using as the only indicator of disabled state
- Avoid using non-border disabled colors on borders

#### Context
- Disabled form field borders
- Inactive container outlines
- Unavailable element borders
- Grayed-out element borders

### Accessibility
- Maintains appropriate contrast for disabled states
- Works best on neutral backgrounds or paired with matching disabled container colors
- Maintains visibility and consistency when paired with `--slds-g-sizing-border-*` sizing hooks
- Must be accompanied by proper semantic HTML and ARIA attributes

---

## `--slds-g-color-on-disabled-*`

### Description
Foreground colors for content placed on disabled backgrounds, with varying emphasis levels.

### Available Hooks
- `--slds-g-color-on-disabled-1` - Foreground for disabled-container-1 backgrounds
- `--slds-g-color-on-disabled-2` - Darker foreground for disabled content requiring more emphasis

### Usage

####  Do
- Use on-disabled colors for text placed on disabled container backgrounds
- Use on-disabled colors for icons displayed on disabled backgrounds
- Pair on-disabled colors with the corresponding disabled container color
- Use on-disabled-2 for disabled content requiring better readability

####  Don't
- Avoid using on active or interactive backgrounds
- Avoid using without the corresponding disabled background
- Avoid using for elements that should appear fully interactive
- Avoid mixing with non-matching disabled backgrounds

#### Context
- Text on disabled container backgrounds
- Icons on disabled surfaces
- Disabled button text
- Inactive form field text

### Accessibility
- All on-disabled colors maintain appropriate contrast ratios for disabled states while appearing visually de-emphasized
- Works best paired with a corresponding disabled background color. Choose on-disabled level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-on-disabled-1` with `--slds-g-color-disabled-1` or `--slds-g-color-disabled-container-1` for consistency, though other pairings may be used based on emphasis needs while maintaining accessibility compliance
- Always ensure proper semantic HTML and ARIA attributes are present to communicate disabled state to assistive technologies

---

id: slds.guidance.hooks.color.surface
title: Surface Color Styling Hooks
description: Semantic hooks for page backgrounds, containers, and visual stacking contexts
summary: "Guidance for surface color hooks that express visual stacking context. Covers surface vs surface-container decision guide, elevation patterns, and dark mode compatibility."

artifact_type: reference
domain: styling-hooks
topic: color
subtopic: semantic

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

refs:

- slds.guidance.hooks.color.accent
- slds.guidance.hooks.color
- slds.guidance.hooks.color.feedback
- slds.guidance.hooks.color.system
- slds.guidance.utilities.dark-mode

## tags: [styling-hooks, color, semantic, surface, container, backgrounds, dark-mode]
keywords: [surface color, container color, page background, modal background, stacking context, elevation, dark mode]

# Surface Color Styling Hooks

> **Hook Selection:** Semantic hooks like surface are the first choice (85% of use cases). See [Hook Selection Hierarchy](ref:slds.guidance.hooks.color).

## Overview

A surface is a canvas that UI elements sit on. Surface colors express the visual stacking context of an app. Surface colors work together to enable sweeping changes, like dark mode. Surface colors are reserved for the bottom layer of a surface and establish the foundation for visual depth in the application.

---

## Surface vs Surface-Container: Decision Guide

### The Core Question

**Does this element create a visually isolated context, or does it exist within an existing context?**


| Characteristic                        | Use `surface-`* | Use `surface-container-*` |
| ------------------------------------- | --------------- | ------------------------- |
| Creates new stacking context          | Yes             | No                        |
| Elevated/overlays other content       | Yes             | No                        |
| Acts as foundation for child elements | Yes             | No                        |
| Exists within page's content flow     | No              | Yes                       |
| Sits on top of an existing surface    | No              | Yes                       |


### Quick Decision Tree

1. **Is this a page-level background or app canvas?** → `surface-`*
2. **Does this element overlay/elevate above the page (modal, popover, dropdown)?** → `surface-`*
3. **Does this element sit within the normal content flow on an existing background?** → `surface-container-`*

### Common Patterns


| Element             | Hook                  | Reasoning                       |
| ------------------- | --------------------- | ------------------------------- |
| Page background     | `surface-*`           | Foundational canvas             |
| Modal dialog        | `surface-*`           | Creates isolated visual context |
| Popover             | `surface-*`           | Elevated, creates new context   |
| Dropdown menu       | `surface-*`           | Elevated overlay                |
| Card on a page      | `surface-container-*` | Sits on page surface            |
| Card inside a modal | `surface-container-*` | Sits on modal surface           |
| Button              | `surface-container-*` | Sits on a surface               |
| List item           | `surface-container-*` | Part of content flow            |


### Edge Cases

- **Full-page card layout**: If a card-like element serves as the entire page background (no parent surface beneath it), use `surface-`* despite its card-like appearance.
- **Panel that overlays**: A slide-out panel that overlays page content creates a new context → `surface-`*. A panel embedded in the page flow → `surface-container-*`.
- **Nested modals**: Each modal creates its own surface. A confirmation dialog inside a modal uses `surface-`* for its background.

### Warning: CSS Class Names Are Irrelevant

The element's class name (e.g., `.card-container`, `.modal-content`, `.panel-wrapper`) does **not** determine hook choice. An element named `.card-container` might use `surface-`* if it's the page-level background, or `surface-container-*` if it's a card sitting on a surface.

**Always base the decision on visual stacking context, not naming conventions.**

---

## `--slds-g-color-surface-`*

### Description

Surface colors used for backgrounds and large areas of the application that express a new visual stacking context to create visual depth.

### Available Hooks

- `--slds-g-color-surface-1` - Primary page background (lightest, typically white)
- `--slds-g-color-surface-2` - Secondary page background (light gray, for visual distinction)
- `--slds-g-color-surface-3` - Tertiary page background (medium gray, for additional hierarchy)
- `--slds-g-color-surface-inverse-1` - Primary inverse surface background color
- `--slds-g-color-surface-inverse-2` - Secondary inverse surface background color

> **Note on Inverse Hooks:** Inverse hooks provide dark background colors designed for dark mode or inverted color schemes. They enable light content on dark backgrounds, as opposed to standard hooks which provide dark content on light backgrounds. Use inverse hooks for dark mode implementations, high-contrast sections, or visual emphasis through color inversion.

### Understanding Surface Numbering: NOT State-Based

**Critical Distinction**: Unlike accent or feedback hooks, surface variant numbers (1-2-3) do **NOT** represent interaction states (default/hover/active). They represent:

1. **Color progression from light to dark** (1 = lightest, 3 = darkest)
2. **Designer's aesthetic choice** for visual hierarchy or separation
3. **Contextual background needs** (e.g., white cards need gray backgrounds to stand out)

**When to choose which:**

- `**surface-1` (white)**: Clean, high-contrast base; use when cards/containers need strong definition
- `**surface-2` (light gray)**: Softer separation; use when layering elements without harsh white backgrounds
- `**surface-3` (medium gray)**: Additional depth; rare in practice, used for specific hierarchical needs

**NOT a rule**: There is no algorithmic decision tree. Designers choose based on composition, not function.

### Usage

#### Do

- Use surface colors for application backgrounds to establish the base canvas
- Use surface colors for panels that create new visual contexts
- Use surface colors for modal/dialog backgrounds (modals create isolated visual contexts, making them surfaces despite containing content)
- Apply surface colors to docked surfaces that establish surfaces
- Use surface colors for popovers and other elevated UI elements
- Anything that comes into the application's view with a higher stacking context establishes a new surface

#### Don't

- Avoid applying any decoration, brand bands, or textures to application backgrounds
- Avoid using for container elements that sit on top of surfaces (use surface-container instead)
- Avoid mixing surface colors with container colors in the same layer
- Don't use surface colors for text or icon fills
- **Don't assume numbering indicates states**: Surface variants are NOT for hover/active states—those typically use surface-container variants, accent colors, or component-level styling hooks depending on the theme

#### Context

- Application background (base canvas)
- Panels that establish new surfaces
- Modals and dialog backgrounds
- Docked containers
- Popovers and elevated UI elements
- Any element with a higher stacking context than previous surfaces

### Accessibility

- Surface colors are designed to work with on-surface colors for proper contrast
- Ensure WCAG 2.1 color contrast requirements by pairing with appropriate on-surface values
- Use `--slds-g-color-on-surface-`* for text and icons on surface backgrounds. Choose on-surface level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-surface-1` with `--slds-g-color-on-surface-1` for consistency, though other on-surface levels may be used based on emphasis needs while maintaining accessibility compliance

---

## `--slds-g-color-surface-container-*`

### Description

Surface container colors reserved for elements that sit on top of a surface and contain other UI elements or artifacts, such as text or icons.

### Available Hooks

- `--slds-g-color-surface-container-1` - Lightest container background (typically white)
- `--slds-g-color-surface-container-2` - Light gray container background
- `--slds-g-color-surface-container-3` - Medium gray container background for additional hierarchy
- `--slds-g-color-surface-container-inverse-1` - Primary inverse surface container background
- `--slds-g-color-surface-container-inverse-2` - Secondary inverse surface container background

> **Note on Inverse Hooks:** Inverse hooks provide dark background colors for containers in dark mode or inverted color schemes. They work with on-surface-inverse hooks to maintain proper contrast for light content on dark container backgrounds.

### Overlap with Surface Hooks

Surface and surface-container hooks use the **same color values** (e.g., `surface-1` and `surface-container-1` are both white). The distinction is **semantic**, not visual.

See [Surface vs Surface-Container: Decision Guide](#surface-vs-surface-container-decision-guide) for comprehensive guidance on when to use each.

### State Progression Logic

**Design Intent-Dependent Patterns**: Unlike semantic accent or feedback containers with universal state progressions, surface-container state behavior varies based on design intent and interaction context:

- **For neutral hover states**: Use `surface-container-2` for hover states when default is `surface-container-1`
- **For brand-emphasized hover states**: Use brand colors (e.g., `brand-base-90` from the color palette) instead of surface-container variants
- **Context-Dependent**: Choice also depends on parent surface color and desired contrast level

**Why the variation**: Surface containers serve as neutral, foundational backgrounds for UI elements. Interactive hover states can either maintain neutral emphasis (using surface-container progression) or add brand emphasis (using brand colors from the palette), depending on the design's intent for that specific component.

**Best Practice**: Refer to component-level styling hooks for specific interactive patterns. Button, card, and list item components each have their own hover state definitions that may use surface-container variants, brand colors, accent colors, or component-specific styling hooks based on design requirements.

### Usage

#### Do

- Use surface container colors for cards that sit on an established surface (page, modal, panel)
- Apply surface container colors to button icons that contain content
- Use surface container colors for button backgrounds
- Use surface container colors for tabset backgrounds
- One of the clearest signals for using surface container colors is if the element contains text or icons

#### Don't

- Avoid using for the base application background
- Avoid using for elements that don't contain other UI elements
- Avoid mixing with surface colors on the same visual layer
- Avoid using for decorative elements that don't establish containers

#### Context

- Cards within a page or modal (not full-page card layouts)
- Button backgrounds
- Button icon containers
- Tabset backgrounds
- Any element that contains text, icons, or other UI artifacts
- Interactive containers that sit above surfaces

### Accessibility

- All surface container colors are designed to work with `--slds-g-color-on-surface-`* values for proper contrast
- Ensures proper WCAG 2.1 color contrast requirements are met
- Choose on-surface level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-surface-container-3` with `--slds-g-color-on-surface-3` for consistency, though other on-surface levels may be used based on emphasis needs while maintaining accessibility compliance
- Valid to use accent or feedback colors for text/icons on top of surface containers as alternatives (e.g., `--slds-g-color-accent-1`)

---

## `--slds-g-color-on-surface-*`

### Description

Foreground colors for text or icons that appear on top of a surface or surface container, ensuring proper color contrast requirements.

### Available Hooks

- `--slds-g-color-on-surface-1` - De-emphasized text (lowest emphasis, for captions and secondary content)
- `--slds-g-color-on-surface-2` - Body text (medium emphasis, for standard content and labels)
- `--slds-g-color-on-surface-3` - High-emphasis text (highest emphasis, for headings and primary content)
- `--slds-g-color-on-surface-inverse-1` - Primary inverse foreground color for inverse surfaces
- `--slds-g-color-on-surface-inverse-2` - Secondary inverse foreground color for inverse surfaces

> **Note on Inverse Hooks:** Inverse hooks provide light foreground colors (text/icons) designed for use on dark surface or surface-container inverse backgrounds. They ensure proper contrast when displaying content in dark mode or inverted color schemes.

### Pairing Logic: Contrast Over Number-Matching

While the naming suggests pairing `on-surface-1` with `surface-1`, this is **NOT a strict rule**. Choose on-surface variants based on:

1. **Content importance**: Headlines use `on-surface-3` (highest contrast), body text uses `on-surface-2`, labels/captions use `on-surface-1`
2. **Accessibility requirements**: Always maintain 4.5:1 contrast ratio
3. **Visual hierarchy needs**: NOT the surface variant number

All three `on-surface` variants can appear on the same `surface-container-1` background.

### Usage

#### Do

- Use on-surface colors for text that appears on surface or surface container backgrounds
- Use on-surface colors for icons displayed on surfaces
- Use on-surface colors for any content that needs to meet WCAG 2.1 color contrast requirements

#### Don't

- Avoid using on accent color backgrounds (use on-accent colors instead)
- Avoid using on feedback color backgrounds (use on-feedback colors instead)
- Avoid using for large background areas
- Avoid using as standalone colors without appropriate surface backgrounds

#### Context

- Text on surface backgrounds
- Icons on surface or container backgrounds
- Body copy and content text
- UI labels and descriptive text
- Any foreground content requiring readability

#### Typography-Specific Usage


| Use Case         | Description                         |
| ---------------- | ----------------------------------- |
| Body text        | Standard paragraph text and content |
| Placeholder text | Input field placeholders            |
| Field labels     | Form field labels and descriptions  |
| Sub-headings     | Minor headings below primary titles |
| Taglines         | Supporting text and captions        |


**Background Requirements**: Use on backgrounds with lightness values 90-100 for optimal contrast.

**Applies to**: `--slds-g-color-on-surface-1`


| Use Case            | Description                                       |
| ------------------- | ------------------------------------------------- |
| Secondary text      | Supporting content and descriptions               |
| Tertiary headings   | Lower-hierarchy headings                          |
| Dark body copy      | Content requiring more emphasis than on-surface-1 |
| Filled input fields | Text entered by users in form fields              |


**Background Requirements**: Use on backgrounds with lightness values 70-100 for optimal contrast.

**Applies to**: `--slds-g-color-on-surface-2`


| Use Case              | Description                                |
| --------------------- | ------------------------------------------ |
| Page titles           | Primary titles for pages or major sections |
| Component titles      | Headings for cards, modals, and containers |
| High-emphasis content | Content requiring maximum visual weight    |


**Background Requirements**: Use on backgrounds with lightness values 65-100 for optimal contrast.

**Applies to**: `--slds-g-color-on-surface-3`


| Use Case                       | Description                                 |
| ------------------------------ | ------------------------------------------- |
| Title text on dark backgrounds | Page and component titles on dark surfaces  |
| Body text on dark backgrounds  | Content text on dark or colored backgrounds |


**Background Requirements**: Use on backgrounds with lightness values 0-50 for optimal contrast.

**Applies to**: `--slds-g-color-on-surface-inverse-1`

### Accessibility

- All on-surface colors are AA compliant and maintain a 4.5:1 contrast ratio with their corresponding surface backgrounds
- Designed specifically to meet Web Content Accessibility Guidelines (WCAG) 2.1
- Best paired with matching surface or surface-container colors. Choose on-surface level based on content importance and required contrast, not strict number matching. For example, pair `--slds-g-color-on-surface-1` with `--slds-g-color-surface-1` or `--slds-g-color-surface-container-1` for consistency, though other pairings may be used based on emphasis needs while maintaining accessibility compliance
- Text links use `--slds-g-color-accent-2` (not accent-1) on surface backgrounds for accessibility compliance
- Disabled text uses `--slds-g-color-on-disabled-2`
- Feedback text uses appropriate `--slds-g-color-on-error-`*, `--slds-g-color-on-warning-*`, etc.

---
id: slds.guidance.hooks.color.system
title: System Color Styling Hooks
description: Direct access to brand, neutral, and feedback color palettes for edge cases
summary: "Guidance for system color hooks providing direct palette access. Covers neutral, brand, error, warning, and success base colors. Use only when semantic hooks don't apply (5-10% of cases)."

artifact_type: reference
domain: styling-hooks
topic: color
subtopic: system

content_format: structured
complexity: advanced
audience: [implementer] 

tasks: [choose, implement, troubleshoot]

refs:
  - slds.guidance.hooks.color
  - slds.guidance.hooks.color.accent
  - slds.guidance.hooks.color.surface
  - slds.guidance.hooks.color.feedback
  - slds.guidance.uplift
  - slds.guidance.hooks.color.expressive-palette
tags: [styling-hooks, color, system, neutral, brand, feedback, palette]
keywords: [system colors, neutral palette, brand colors, error colors, warning colors, success colors, edge cases]
---

# System Color Styling Hooks

> **Hook Selection:** System hooks are for edge cases (5-10% of use). For standard UI, use semantic hooks first. See [Hook Selection Hierarchy](ref:slds.guidance.hooks.color).

## Overview

System color styling hooks contain the complete set of values based on their semantics: brand, neutral, and feedback colors. These hooks provide direct access to the underlying color palette values and should only be used in edge cases where a semantic UI color does not make sense.

### Internal Hooks (Not for External Use)

| Prefix | Audience |
|--------|----------|
| `--slds-s-*` | Internal Salesforce only |
| `--slds-c-*` | Internal Salesforce only |

---

## Available System Color Categories

### Neutral Colors
Used for various UI elements such as text, surfaces, and non-functional UI.

**Hook Pattern:** `--slds-g-color-neutral-base-{grade}`

### Brand Colors
Electric-blue colors used for buttons, hover states, and selected or active states. Do not use for decorative purposes.

**Hook Pattern:** `--slds-g-color-brand-base-{grade}`

### Feedback Colors

#### Error Colors
Pink colors only to be used for error feedback or alert states.

**Hook Pattern:** `--slds-g-color-error-base-{grade}`

#### Warning Colors
Yellow colors only to be used for warning feedback or alert states.

**Hook Pattern:** `--slds-g-color-warning-base-{grade}`

#### Success Colors
Teal colors only to be used for success feedback or alert states.

**Hook Pattern:** `--slds-g-color-success-base-{grade}`

---

## Usage

###  Do
- Use system colors only in edge cases where semantic UI colors (accent, surface, feedback) do not make sense
- Use neutral-base colors for various UI elements such as text, surfaces, and non-functional UI
- Use brand-base colors (electric-blue) for buttons, hover states, and selected or active states
- Use feedback colors (error-base, warning-base, success-base) for their intended feedback or alert states
- Use system colors when building custom components that need direct palette access
- System colors provide precise color control for specific design scenarios

###  Don't
- Avoid using system colors as a first choice—always prefer semantic UI colors (accent, surface, feedback) when available
- Avoid using brand-base colors for decorative purposes
- Avoid using error-base, warning-base, or success-base colors outside of their designated feedback contexts
- Avoid mixing system colors with semantic colors unnecessarily
- Avoid using system colors when a semantic color hook would provide the same result
- Avoid overriding the design system's intended color semantics

### Context: When to Use System Colors

**System colors are appropriate for:**

| Scenario | Example | Why System Colors |
|----------|---------|-------------------|
| Data visualization | Charts, graphs, heatmaps | Need precise color control beyond semantic meaning |
| Custom brand elements | Product-specific features | Require exact palette values |
| Legacy migration | Updating older components | Matching specific existing colors |
| Edge case UI | Specialized indicators | No semantic color fits the use case |

**Decision flow:** Before using a system color, verify that no semantic color (accent, surface, feedback) serves the same purpose. System colors bypass the design system's built-in accessibility guarantees.

## When to Use Semantic Colors Instead

Before using system colors, always consider if one of these semantic options would be more appropriate:

- **For brand elements and interactive states:** Use `--slds-g-color-accent-*` instead of `--slds-g-color-brand-base-*`
- **For backgrounds and surfaces:** Use `--slds-g-color-surface-*` or `--slds-g-color-surface-container-*` instead of `--slds-g-color-neutral-base-*`
- **For feedback states:** Use `--slds-g-color-error-*`, `--slds-g-color-warning-*`, or `--slds-g-color-success-*` instead of the base feedback colors
- **For text and icons:** Use `--slds-g-color-on-surface-*`, `--slds-g-color-on-accent-*`, or appropriate on-feedback colors

## Accessibility

- System colors do not inherently guarantee accessible contrast ratios
- **Manual verification required:** Ensure 50-point separation for text (4.5:1) and 40-point for UI (3:1)
- When using system colors, you must manually verify WCAG 2.1 color contrast requirements
- Semantic color hooks (accent, surface, feedback) are designed to maintain proper contrast when used as intended
- Always test custom combinations of system colors for accessibility compliance
- Prefer semantic color hooks which handle contrast ratios automatically

## Color Grade Scale

> **Grade Scale:** SLDS uses a 0-100 grade scale where 0 is darkest and 100 is lightest. Point separations guarantee accessibility: 50-point = 4.5:1 contrast (text), 40-point = 3:1 contrast (UI).
>
> For complete grade scale documentation and the numerical color system, see the [Color Hooks Index](ref:slds.guidance.hooks.color).

---
id: slds.guidance.hooks
title: SLDS Styling Hooks - Agent Guidance
description: Comprehensive guidance for using SLDS styling hooks in component development
summary: "Entry point for all styling hooks guidance. Covers the three-tier hook hierarchy (global, shared, component), core categories (color, spacing, typography, shadows, borders), usage patterns, decision trees, and accessibility requirements. Use styling hooks instead of hard-coded values for theme-aware, maintainable components."

artifact_type: index
domain: styling-hooks

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

children:
  - slds.guidance.hooks.color
  - slds.guidance.hooks.typography
  - slds.guidance.hooks.spacing
  - slds.guidance.hooks.borders
  - slds.guidance.hooks.shadows

refs:
  - slds.guidance.hooks.shadows
  - slds.guidance.hooks.borders
tags: [styling-hooks, index, color, spacing, typography, shadows, borders, theming]
keywords: [styling hooks, CSS custom properties, theming, accessibility, design tokens, SLDS]
---

# SLDS Styling Hooks: Guidance for Coding Agents

## Overview

The Salesforce Lightning Design System (SLDS) styling hooks are CSS custom properties that provide a theme-aware, maintainable styling system. When generating or optimizing SLDS components, **always use styling hooks instead of hard-coded values** to ensure components adapt automatically to:

- Brand themes and customizations
- Light/dark mode switches
- Density settings (compact, comfy, spacious)
- Accessibility requirements
- Future design system updates

**Critical Rule:** Reference styling hooks using `var()` — never reassign their values. Salesforce controls these values and can change them at any time.

---

## Styling Hook Hierarchy

SLDS styling hooks follow a three-tier naming convention:

1. **Global Semantic** (`--slds-g-*`): System-wide hooks for universal use across all components
2. **Shared** (`--slds-s-*`): Private/internal hooks — **DO NOT USE** (reserved for Salesforce)
3. **Component-Specific** (`--slds-c-*`): Hooks scoped to individual component types for fine-tuning

**Always use global hooks (`--slds-g-*`) unless component-specific hooks exist for your use case.**

---

## Core Categories

### 1. Color Hooks (`--slds-g-color-*`)

SLDS provides a comprehensive color system organized into three tiers:

#### **Tier 1: Semantic UI Colors (PREFERRED)**

Purpose-driven colors that automatically adapt to themes and modes:

- **Surface** (`surface-*`): Page backgrounds, panels, modal overlays
- **Container** (`container-*`): Buttons, cards, tabs, input fields
- **Accent** (`accent-*`): Brand emphasis and selection states
- **Border** (`border-*`): Component borders, dividers, separators
- **Feedback** (`feedback-*`): Alerts, notifications, validation states
- **On-Colors** (`on-*`): Text and icons on colored backgrounds

#### **Tier 2: System Colors**

Accessible, system-wide colors for edge cases where semantic colors don't apply.

#### **Tier 3: Palette Colors (Use Sparingly)**

Raw color values for data visualization and custom scenarios.

> **💡 Detailed color guidance:** See [Color Styling Hooks Index](ref:slds.guidance.hooks.color) for the complete color system documentation.

---

### 2. Spacing Hooks (`--slds-g-spacing-*`)

SLDS uses a numbered scale (NOT named like "small/medium/large"):

| Hook Name             | Value   | Pixels | Legacy Equivalent |
| --------------------- | ------- | ------ | ----------------- |
| `--slds-g-spacing-1`  | 0.25rem | 4px    | xx-small          |
| `--slds-g-spacing-2`  | 0.5rem  | 8px    | x-small           |
| `--slds-g-spacing-3`  | 0.75rem | 12px   | small             |
| `--slds-g-spacing-4`  | 1rem    | 16px   | medium            |
| `--slds-g-spacing-5`  | 1.5rem  | 24px   | large             |
| `--slds-g-spacing-6`  | 2rem    | 32px   | x-large           |
| `--slds-g-spacing-7`  | 2.5rem  | 40px   | xx-large          |
| `--slds-g-spacing-8`  | 3rem    | 48px   | xxx-large         |
| `--slds-g-spacing-9`  | 3.5rem  | 56px   | -                 |
| `--slds-g-spacing-10` | 4rem    | 64px   | -                 |
| `--slds-g-spacing-11` | 4.5rem  | 72px   | -                 |
| `--slds-g-spacing-12` | 5rem    | 80px   | -                 |

**Usage:**

```css
/* Use numbered hooks - NOT named ones */
margin: var(--slds-g-spacing-4); /* ✅ Correct */
padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4); /* ✅ Correct */

/* DON'T use named hooks - they don't exist */
margin: var(--slds-g-spacing-medium); /* ❌ Wrong - hook doesn't exist */
```

> **💡 Detailed spacing guidance:** See [Spacing and Sizing Hooks](ref:slds.guidance.hooks.spacing) for complete documentation.

---

### 3. Typography Hooks (`--slds-g-font-*`)

#### Font Families

- `--slds-g-font-family` - Default font family
- `--slds-g-font-family-base` - Base font family
- `--slds-g-font-family-monospace` - For code snippets

#### Font Weights (Numbered 1-7)

| Hook Name                | Typical Value | Common Name |
| ------------------------ | ------------- | ----------- |
| `--slds-g-font-weight-1` | 300           | Light       |
| `--slds-g-font-weight-2` | 300           | Light       |
| `--slds-g-font-weight-3` | 400           | Regular     |
| `--slds-g-font-weight-4` | 400           | Regular     |
| `--slds-g-font-weight-5` | 500           | Medium      |
| `--slds-g-font-weight-6` | 600           | Semi-Bold   |
| `--slds-g-font-weight-7` | 700           | Bold        |

**Usage:**

```css
/* Use numbered hooks */
font-weight: var(--slds-g-font-weight-7); /* Bold */

/* DON'T use named hooks - they don't exist */
font-weight: var(--slds-g-font-weight-bold); /* ❌ Wrong */
```

> **💡 Detailed typography guidance:** See [Typography Styling Hooks](ref:slds.guidance.hooks.typography) for complete documentation.

---

### 4. Other Styling Hooks

- **Sizing** (`--slds-g-sizing-*`): Component dimensions, icon sizes, border widths
- **Shadow** (`--slds-g-shadow-*`): Elevation and depth effects
- **Radius** (`--slds-g-radius-*`): Border radius values for rounded corners

---

## Usage Patterns

### Pattern 1: Interactive Component States (Accent Colors)

```css
.button {
  background: var(--slds-g-color-accent-container-1);
  color: var(--slds-g-color-on-accent-1);
  border: 1px solid var(--slds-g-color-border-accent-1);
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4);
  border-radius: var(--slds-g-radius-border-1);
}

.button:hover {
  background: var(--slds-g-color-accent-container-2);
  color: var(--slds-g-color-on-accent-2);
  border-color: var(--slds-g-color-border-accent-2);
}

.button:active {
  background: var(--slds-g-color-accent-container-3);
  color: var(--slds-g-color-on-accent-3);
  border-color: var(--slds-g-color-border-accent-3);
}
```

### Pattern 2: Semantic Surfaces

```css
.card {
  background: var(--slds-g-color-surface-container-1);
  color: var(--slds-g-color-on-surface-1);
  padding: var(--slds-g-spacing-4);
  border: 1px solid var(--slds-g-color-border-1);
  border-radius: var(--slds-g-radius-border-1);
}
```

### Pattern 3: Feedback States

```css
.alert-error {
  background: var(--slds-g-color-error-container-1);
  color: var(--slds-g-color-on-error-1);
  border-left: 4px solid var(--slds-g-color-error-1);
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4);
}

.alert-success {
  background: var(--slds-g-color-success-container-1);
  color: var(--slds-g-color-on-success-1);
  border-left: 4px solid var(--slds-g-color-success-1);
}
```

---

## Decision Tree for Coding Agents

### Step 1: Check for Component-Specific Hooks

Search for `--slds-c-[component-name]-*` hooks first (highest specificity).

### Step 2: Use Semantic UI Colors (Preferred)

For colors, prefer semantic hooks:

- **Surface/Container**: `surface-1/2/3`, `surface-container-1/2/3`, `on-surface-1/2/3`
- **Accent**: `accent-1/2/3`, `accent-container-1/2/3`, `border-accent-1/2/3`, `on-accent-1/2/3`
- **Feedback**: `error-1`, `success-1`, `warning-1`, `info-1` with their container and on-color variants

### Step 3: Use Numbered Spacing & Typography

Always use numbered hooks where available:

```css
padding: var(--slds-g-spacing-4);
font-weight: var(--slds-g-font-weight-5);
font-size: var(--slds-g-font-size-base); /* Or use rem values */
```

---

## Critical Rules

### DO:

- Reference hooks with `var()`: `color: var(--slds-g-color-accent-1);`
- Use numbered spacing: `spacing-4` not `spacing-medium`
- Use numbered font weights: `font-weight-5` not `font-weight-medium`
- Prefer semantic UI colors over system colors and palette colors
- Pair container colors with on-colors for text/icons
- Follow the 50-point rule for text contrast, 40-point rule for UI elements

### DON'T:

- Reassign hook values: `--slds-g-color-accent-1: #ff0000;` ❌
- Use private hooks (`--_slds-*` or `--slds-s-*`)
- Use `@layer` syntax (reserved for Salesforce)
- Use named spacing hooks (`spacing-small`, `spacing-medium`) - they don't exist
- Use named font hooks (`font-weight-medium`, `font-weight-bold`) - they don't exist
- Hard-code values when hooks exist

---

## Accessibility Compliance

### Color Contrast Rules

| Separation | Contrast Ratio | Use Case                   |
| ---------- | -------------- | -------------------------- |
| 50 points  | 4.5:1          | Text (WCAG AA)             |
| 40 points  | 3:1            | UI elements, borders       |

### Automatic Compliance with Semantic Colors

When using semantic accent colors, SLDS ensures contrast automatically:

```css
/* ✅ ALWAYS COMPLIANT when using matching pairs */
.accent-button {
  background: var(--slds-g-color-accent-container-1);
  color: var(--slds-g-color-on-accent-1); /* Pre-validated pairing */
}
```

---

## Troubleshooting

### Problem: Hook name not working

**Solution:** Verify naming convention:

- Use numbered spacing: `spacing-4` NOT `spacing-medium`
- Use numbered fonts: `font-weight-5` NOT `font-weight-medium`

### Problem: Colors have poor contrast

**Solution:**

- Use semantic hooks with paired on-colors
- For palette: 50-point separation for text, 40-point for UI elements

### Problem: Spacing inconsistent

**Solution:**

- Use numbered spacing hooks: `spacing-2`, `spacing-4`
- Check spacing scale: 8px=spacing-2, 16px=spacing-4, 24px=spacing-5

---

## Summary

When generating or optimizing SLDS components:

1. **Use semantic hooks first** — Prefer semantic UI colors over system/palette
2. **Use numbered hooks** — spacing-4, font-weight-5 (NOT named like "medium")
3. **Font sizes** — Use `font-size-base` or rem values
4. **Follow the three-tier color system** — Semantic UI → System Colors → Expressive Palette
5. **Pair containers with on-colors** — Use `on-surface-*`, `on-accent-*`, `on-error-*` for text/icons
6. **Test accessibility** — Verify contrast ratios and keyboard navigation

**The goal:** Build theme-aware, accessible components that adapt automatically to brand customizations, light/dark modes, and density settings.

---
id: slds.guidance.hooks.shadows
title: Shadows Styling Hooks
description: Styling hooks for depth shadows, directional shadows, and inset shadows
summary: "Guidance for shadow styling hooks that establish visual hierarchy and elevation. Covers depth shadows (1-4), directional shadows, and inset shadows for pressed/focused states."

artifact_type: reference
domain: styling-hooks
topic: shadows

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

refs:
  - slds.guidance.hooks
  - slds.guidance.hooks.borders
  - slds.guidance.hooks.color.surface
tags: [styling-hooks, shadows, elevation, depth, visual-hierarchy]
keywords: [shadow depth, elevation, stacking order, directional shadow, inset shadow, focus shadow]
---

# Shadows Styling Hooks

## Overview

Shadow styling hooks establish visual hierarchy, depth, and elevation in UI interfaces. All shadow styling hooks are prefixed with `--slds-g-` for global scope, `--slds-s-` for shared scope, or `--slds-c-` for component scope, followed by the shadow name. For example, `--slds-g-shadow-1` is the styling hook for a shadow depth of 1.

---

## `--slds-g-shadow-*`

### Description

Depth shadow hooks communicate elevation and visual hierarchy. Use these hooks to indicate which elements appear above others in the stacking order. Higher shadow values indicate elements that are visually higher in the stacking order.

**Hook Pattern:** `--slds-g-shadow-{n}` where `{n}` is the depth level

### Usage

####  Do

- Match shadow values to stacking order — elements with higher stacking order should have higher shadow values
- Leverage z-index to manage stacking order alongside shadow values
- Use depth shadows for elements that need to appear above the base surface

####  Don't

- Avoid applying shadows to base level components — components that sit on the surface and don't cover other components should not have shadows in SLDS 2

#### Context

| Shadow Hook | Components |
|-------------|------------|
| `--slds-g-shadow-1` | Page headers, joined tables, filter panels, dropdowns, inline edit, images, slider handles |
| `--slds-g-shadow-2` | Menu, docked form footer, docked utility bar, color picker, notifications |
| `--slds-g-shadow-3` | Panel, docked composer, tooltip, toast |
| `--slds-g-shadow-4` | Modal, popover, App Launcher |

**Note:** `shadow-5` and `shadow-6` are aliases that inherit from `shadow-4`.

---

## `--slds-g-shadow-{direction}-*`

### Description

Directional shadow hooks allow shadows to be cast in specific directions. Use these hooks for components positioned against edges of the screen where the shadow direction matters.

**Hook Pattern:** `--slds-g-shadow-{direction}-{n}` where `{direction}` is the shadow direction and `{n}` is the depth level

**Available Directions:**
- `block-start` — Upward shadow
- `block-end` — Downward shadow (inherits from base `shadow-{n}`)
- `inline-start` — Left shadow
- `inline-end` — Right shadow

### Usage

####  Do

- Use directional shadows for panels and side-docked components
- Use directional shadows when components are positioned against screen edges
- Use `shadow-3 left` or `shadow-3 right` on panels depending on screen position

#### Context

- Panels use directional shadows based on which side of the screen they are placed
- `block-start` and `block-end` follow CSS logical properties (vertical axis)
- `inline-start` and `inline-end` follow CSS logical properties (horizontal axis)

---

## `--slds-g-shadow-{type}-focus-*`

### Description

Focus shadow hooks provide visual feedback for keyboard navigation and accessibility. Use these hooks to ensure focus states meet accessibility requirements across all backgrounds.

**Hook Pattern:** `--slds-g-shadow-{type}-focus-{n}` where `{type}` is the focus style and `{n}` is the focus level

**Available Types:**
- `outline-focus` — Simple outline focus
- `outset-focus` — Double ring outset focus (white inner ring, brand outer ring)
- `inset-focus` — Single ring inset focus
- `inset-inverse-focus` — Double ring inset focus (brand inner, white outer)

### Usage

####  Do

- Focus states within SLDS 2 consist of a white border outline surrounded by a dark blue border outline
- This style ensures that the focus state passes accessibility requirements on any background

#### Context

- Focus states within enhanced Lightning UI are applied via shadow
- The double-ring focus pattern provides sufficient contrast on both light and dark backgrounds

### Accessibility

- Focus shadows ensure minimum 3:1 contrast against any background color
- The white + dark blue double-ring pattern guarantees visibility on both light and dark backgrounds
- Focus visibility is required for WCAG 2.1 keyboard navigation compliance
- Accessibility requirements apply — consult your project's accessibility standards

---

## `--slds-s-button-shadow-*`

### Description

Button shadow hooks control the visual states for button interactions. Use these hooks for focus, active (pressed), and hover states on buttons.

**Available Hooks:**
- `--slds-s-button-shadow-focus` — Focus state for neutral buttons
- `--slds-s-button-shadow-focus-inverse` — Focus state for inverse buttons
- `--slds-s-button-shadow-active` — Pressed/active state (inset shadow)
- `--slds-s-button-brand-shadow-hover` — Hover lift effect for brand buttons
- `--slds-s-button-bordered-shadow-hover` — Hover lift effect for bordered/neutral buttons

### Usage

####  Do

- Button components use a hover bevel and inner shadow on click that is separate from the elevation system
- `button-shadow-active` is used on all buttons when pressed, regardless of color or border

####  Don't

- Avoid using bevel and inset shadows in custom situations — they are only used on buttons and inputs where specified

#### Context

- Active state uses inset shadows to create a "pressed in" appearance
- Hover state uses drop shadows with transform for a "lift" effect
- Focus state uses the standard focus ring pattern

---

## `--slds-s-input-shadow-*`

### Description

Input shadow hooks control the visual states for input field interactions. Use these hooks for focus and validation states on input containers.

**Available Hooks:**
- `--slds-s-input-shadow-focus` — Focus state for input containers (includes inset shadow + focus ring)
- `--slds-s-input-shadow-invalid` — Error state for input containers

### Usage

####  Do

- Input focus combines an inset shadow with the standard focus ring
- Use input shadow hooks for text inputs, comboboxes, and text areas

####  Don't

- Avoid using input inset shadows in custom situations — they are only used where specified in the design system

#### Context

- Focus state combines visual depth (inset shadow) with accessibility (focus ring)
- Invalid state may remove shadows to emphasize the error border treatment

---

## `--slds-s-mark-shadow-*`

### Description

Mark shadow hooks control the visual states for checkbox, radio button, and toggle interactions. Use these hooks for focus and checked states on mark elements.

**Available Hooks:**
- `--slds-s-mark-shadow-focus` — Focus state for checkboxes, radios, and toggles
- `--slds-s-mark-shadow-checked` — Checked/selected state (inset shadow)

### Usage

####  Do

- `mark-shadow-checked` is used on selected or active checkboxes, radio buttons, and checkbox toggles
- Use mark shadow hooks for indicating the selected state with visual depth

####  Don't

- Avoid using mark inset shadows in custom situations — they are only used on marks where specified

#### Context

- Checked state uses inset shadow to create visual depth indicating selection
- Focus state uses the standard focus ring pattern for accessibility

---

## `--slds-c-button-{variant}-shadow-hover`

### Description

Component-level button variant shadow hooks provide hover effects for specific button variants. Use these hooks when implementing success, destructive, or inverse button variants.

**Available Hooks:**
- `--slds-c-button-success-shadow-hover` — Hover shadow for success buttons
- `--slds-c-button-destructive-shadow-hover` — Hover shadow for destructive buttons
- `--slds-c-button-inverse-shadow-hover` — Hover shadow for inverse buttons

### Usage

#### Context

- These hooks provide variant-specific hover lift effects
- Each uses a tinted shadow that matches the button's color scheme
- Used in combination with transform for the lift animation effect

---
id: slds.guidance.hooks.spacing
title: Spacing and Sizing Styling Hooks
description: Styling hooks for margins, padding, gaps, and element dimensions
summary: "Guidance for spacing and sizing hooks including spacing scale for margins/padding/gaps and sizing scale for element dimensions. Covers the 4-point grid system, density-aware sizing, and touch target requirements."

artifact_type: reference
domain: styling-hooks
topic: spacing-and-sizing

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

refs:
  - slds.guidance.hooks
  - slds.guidance.hooks.borders
  - slds.guidance.hooks.typography
  - slds.guidance.utilities.margin
  - slds.guidance.utilities.padding
  - slds.guidance.utilities.sizing
tags: [styling-hooks, spacing, sizing, margins, padding, gaps, dimensions]
keywords: [spacing scale, sizing scale, 4-point grid, density-aware, touch targets, layout spacing]
---

# Spacing and Sizing Styling Hooks

## Overview

Spacing and sizing styling hooks establish harmony and hierarchy through deliberate spacing and sizing. Spacing controls the empty areas around or within components, while sizing defines the dimensions of elements. These hooks ensure visual consistency, create balance, and guide user focus across the interface.

---

## `--slds-g-spacin`g`-*`

### Description
Base spacing values that create space between elements. The styling hook values are relative to the root font size and follow a modular scale of 4 to align with the 4-point grid system. Use these hooks to set values for margins and padding.

### Usage

####  Do
- Use spacing hooks for margins and padding to create consistent spacing between elements
- Use spacing hooks to establish visual hierarchy through deliberate use of space
- Use spacing hooks for proper alignment of components
- Use spacing hooks to create clear differentiation between grouped and unrelated elements
- Use smaller values (1-4) for compact layouts and tight spacing
- Use medium values (5-8) for standard component spacing
- Use larger values (9-12) for section spacing and major divisions

####  Don't
- Avoid using spacing properties to establish an element's dimensions targeting width and height
- Avoid hard-coded pixel values instead of using spacing hooks
- Avoid breaking the 4-point grid system with custom values
- Avoid inconsistent spacing patterns that disrupt visual rhythm
- Avoid using spacing hooks for element dimensions (use sizing hooks instead)

#### Context
- Margins between components
- Padding within containers
- Gaps in flexbox and grid layouts
- Consistent spacing patterns throughout the interface
- Visual rhythm and balance

### Accessibility
- Consistent spacing improves scanability and readability for all users
- Adequate spacing between interactive elements supports users with motor impairments
- Clear visual grouping through spacing helps users with cognitive disabilities understand relationships between elements
- Padding is the primary method for achieving minimum target sizes on interactive elements
- **Target Size Requirements (WCAG 2.2):**
  - **Desktop/Pointer inputs:** Minimum 24×24 CSS pixels (Level AA required), 44×44 CSS pixels recommended (Level AAA)
  - **Mobile/Touch inputs:** Minimum 44×44 pt/dp/px (industry standard and WCAG 2.1 AAA)
  - **Salesforce applications (mixed environments):** Default to 44×44 for consistency across touch and pointer interactions
- **Spacing Exception:** Targets smaller than 24×24 CSS pixels may be acceptable if sufficient spacing ensures a 24 CSS pixel diameter circle around each target does not intersect another target
- Accessibility requirements apply — consult your project's accessibility standards

---

## `--slds-g-spacing-var-*`

### Description
Density-aware styling hooks that control spacing applied equally to all sides of an element when the system switches between comfy and compact display density settings. The spacing corresponds to the top, bottom, left, and right margins or paddings. Use these hooks to ensure components adapt correctly to the user's chosen density setting.

### Usage

####  Do
- Use density-aware hooks for components that need to adapt to user density preferences
- Use density-aware hooks for padding and margin values that should adjust based on density settings
- Use density-aware hooks for creating responsive spacing that maintains usability in both comfy and compact modes
- Use density-aware hooks when spacing needs to be applied equally to all sides (top, bottom, left, right)
- Density-aware hooks automatically adapt spacing values between comfy and compact display modes

####  Don't
- Avoid using density-aware hooks when fixed spacing is required regardless of density
- Avoid mixing density-aware and fixed spacing hooks inconsistently within the same component
- Avoid assuming only one density mode will be used
- Avoid using when directional spacing (vertical or horizontal only) is more appropriate

#### Context: When to Use Density-Aware Spacing Hooks

**Components that benefit from density-aware hooks:**

| Component Category | Specific Components | Why Density Matters |
|--------------------|---------------------|---------------------|
| Data-dense displays | Tables, lists, grids | More rows visible in compact |
| Form layouts | Form elements, field arrangements | Label positioning changes |
| Containers | Cards, panels | Padding adjusts with density |
| Navigation | Toolbars, tabs | Spacing affects click targets |

**SLDS Components with Built-in Density Support:**
- Cards
- File selector
- Tabs
- Feed
- Page header
- Path
- Split view

**Use density-aware hooks (`--slds-g-spacing-var-*`) when building custom versions of these component types.**

### Accessibility
- Density-aware spacing supports user preferences for information density
- Compact mode maintains usability while maximizing screen space
- Comfy mode provides generous spacing for users who benefit from more breathing room
- Both density modes must maintain minimum target sizes through appropriate padding hook selection:
  - Desktop/Pointer: 24×24 CSS pixels minimum (AA), 44×44 recommended (AAA)
  - Mobile/Touch: 44×44 pt/dp/px minimum
  - Salesforce default: 44×44 for consistency
- Compact mode requires careful padding selection to ensure targets remain accessible in both pointer and touch contexts

---

## `--slds-g-spacing-var-block-*`

### Description
Density-aware styling hooks that control spacing along the vertical (block) axis when the system switches between comfy and compact display density settings. This spacing corresponds to top and bottom margins or paddings. Use these hooks for vertical spacing that needs to adapt to density preferences.

### Usage

####  Do
- Use block spacing hooks for top and bottom margins or padding
- Use block spacing hooks for vertical rhythm and spacing between stacked elements
- Use block spacing hooks for section spacing that adapts to density
- Use block spacing hooks with padding-block or margin-block CSS properties
- Use block spacing hooks for list item vertical spacing, card stack spacing, or form field vertical margins

####  Don't
- Avoid using block spacing hooks for horizontal (left/right) spacing
- Avoid mixing block and inline spacing inconsistently
- Avoid when all-sides spacing would be more appropriate
- Avoid when fixed vertical spacing is required regardless of density

#### Context
- Vertical spacing between list items
- Top and bottom padding in containers
- Section spacing in stacked layouts
- Form field vertical margins
- Vertical rhythm in content areas

### Accessibility
- Vertical spacing supports readability and scanability
- Adequate vertical spacing helps users navigate through content
- Density-aware vertical spacing maintains usability while adapting to user preferences
- Both density modes must maintain clear visual separation between elements
- Vertical padding (top/bottom) contributes to interactive element height and must support minimum target sizing:
  - Desktop/Pointer: 24×24 CSS pixels minimum height (AA), 44×44 recommended (AAA)
  - Mobile/Touch: 44×44 pt/dp/px minimum height
  - Salesforce default: 44×44 height for consistency

---

## `--slds-g-spacing-var-inline-*`

### Description
Density-aware styling hooks that control spacing along the horizontal (inline) axis when the system switches between comfy and compact display density settings. This spacing corresponds to left and right margins or paddings. Use these hooks for horizontal spacing that needs to adapt to density preferences.

### Usage

####  Do
- Use inline spacing hooks for left and right margins or padding
- Use inline spacing hooks for horizontal spacing between adjacent elements
- Use inline spacing hooks for button padding, icon spacing, or horizontal layouts
- Use inline spacing hooks with padding-inline or margin-inline CSS properties
- Use inline spacing hooks for horizontal gaps in flex or grid layouts

####  Don't
- Avoid using inline spacing hooks for vertical (top/bottom) spacing
- Avoid mixing inline and block spacing inconsistently
- Avoid when all-sides spacing would be more appropriate
- Avoid when fixed horizontal spacing is required regardless of density

#### Context
- Horizontal spacing between buttons
- Left and right padding in containers
- Icon and text spacing
- Horizontal gaps in navigation
- Side margins in content layouts

### Accessibility
- Horizontal spacing supports readability and clear visual separation
- Adequate horizontal spacing helps users distinguish between interactive elements
- Density-aware horizontal spacing maintains usability while adapting to user preferences
- Horizontal padding (left/right) contributes to interactive element width and must support minimum target sizing:
  - Desktop/Pointer: 24×24 CSS pixels minimum width (AA), 44×44 recommended (AAA)
  - Mobile/Touch: 44×44 pt/dp/px minimum width
  - Salesforce default: 44×44 width for consistency
- Both density modes must maintain minimum target sizes through appropriate inline padding selection across pointer and touch contexts

---

## `--slds-g-sizing-*`

### Description
Sizing values used to create dimensions of an element, using height and width-based properties. Use these styling hooks for elements such as icons to set their height and width relative to the root element's font-size. Sizing in SLDS uses values with multiples of 8 to align with the 8-point grid system.

### Usage

####  Do
- Use sizing hooks for element dimensions like height and width
- Use sizing hooks for icon sizes, button heights, and component dimensions
- Use sizing hooks for creating consistent, predictable component sizes
- Use sizing hooks for min-width, max-width, min-height, and max-height properties
- Use smaller values (1-9) for icons, buttons, and small elements
- Use larger values (10-16) for containers, panels, and layout widths
- Sizing values scale relative to root font-size for responsive behavior

####  Don't
- Avoid using sizing hooks for margins or padding (use spacing hooks instead)
- Avoid hard-coded pixel values instead of using sizing hooks
- Avoid breaking the 8-point grid alignment with custom dimension values
- Avoid using sizing hooks for spacing between elements
- Avoid mixing sizing and spacing hooks inappropriately

#### Context
- Icon dimensions (width and height)
- Button heights
- Avatar sizes
- Component fixed dimensions
- Container widths and max-widths
- Minimum and maximum element sizes
- Thumbnail dimensions

### Accessibility
- Consistent sizing creates predictable interfaces that are easier to navigate
- Fixed dimensions (height/width) must support target size requirements for interactive elements like icon-only buttons:
  - **Desktop/Pointer:** Minimum 24×24 CSS pixels (WCAG 2.2 Level AA), 44×44 CSS pixels recommended (Level AAA)
  - **Mobile/Touch:** Minimum 44×44 pt/dp/px (industry standard and WCAG 2.1 AAA)
  - **Salesforce applications:** Default to 44×44 for consistency across mixed pointer and touch environments
- Icon sizes must be large enough to be perceivable by users with low vision
- Interactive element sizing should support users with motor impairments
- Account for responsive sizing across different viewport contexts
- **Important:** Most interactive elements achieve target sizing through padding (spacing hooks) rather than fixed dimensions. Sizing hooks are primarily used for icon-only buttons, avatars, and elements where explicit dimensions are required

---
id: slds.guidance.hooks.typography
title: Typography Styling Hooks
description: Styling hooks for font size, weight, line height, and content width constraints
summary: "Guidance for typography styling hooks including font-scale, font-weight, line-height, and max-read hooks. Covers systematic text sizing, weight selection, and readability optimization."

artifact_type: reference
domain: styling-hooks
topic: typography

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [choose, implement, troubleshoot]

refs:
  - slds.guidance.hooks
  - slds.guidance.hooks.spacing
  - slds.guidance.utilities.typography
tags: [styling-hooks, typography, font-scale, font-weight, line-height, text-sizing]
keywords: [font size, text scale, font weight, line height, typography hierarchy, readable content]
---

# Typography Styling Hooks

## Overview

Typography styling hooks provide systematic control over font properties including size, weight, line height, and content width constraints. These hooks ensure visual consistency, establish clear content hierarchy, and maintain readability across all interfaces. Use typography styling hooks to create scalable, accessible text that adapts to different contexts, devices, and user preferences.

---

## `--slds-g-font-scale-*`

### Description

Font scale values that control text size throughout the interface. The styling hook values are relative to the root font size and create a systematic scale from small text to large display text.

**Hook Pattern:** `--slds-g-font-scale-{size}` where `{size}` is the scale step

**Base Size:** `--slds-g-font-size-base` sets the default application font size.

**Scale Categories:**
- **Body text:** Scales `neg-2` through `2`
- **Headings/Titles:** Scales `3` through `6`
- **Display text:** Scales `6` through `8`

### Usage

####  Do

- Use font-scale hooks for all text sizing to maintain typographic consistency
- Use font-scale hooks to establish clear visual hierarchy through systematic size progression
- Use body text scales (neg-2 through 2), heading scales (3-6), and display text scales (7-8) for their intended purposes
- Combine font-scale hooks with appropriate font weights to create distinct type styles
- Use smaller scales (neg-2 through 2) for data-dense interfaces
- Use larger scales (3 through 8) for headings, titles, and prominent text
- Font scales are relative to root font size, enabling global scaling

####  Don't

- Avoid hard-coded pixel or point font sizes instead of using font-scale hooks
- Avoid using scales smaller than neg-1 for body text (readability concerns)
- Avoid using display scales (7-8) for anything other than short, prominent text
- Avoid inconsistent scale selection that breaks typographic hierarchy
- Avoid mixing font-scale hooks with fixed pixel values in the same component
- Avoid using font-scale for spacing or sizing properties (use spacing/sizing hooks instead)

#### Context

- All text content requiring size specification
- Body text and paragraph content
- Headings and titles at all levels
- Form labels and input text
- Button text and interactive element labels
- Display text and hero sections
- Data tables and list content

### Accessibility

- **Regular text**: Minimum 4.5:1 contrast ratio (50-point separation in SLDS grade system)
- **Large text** (18pt or 14pt bold): Minimum 3:1 contrast ratio (40-point separation)
- Use font-scale-1 or larger for all body text to ensure readability
- Smaller scales (neg-2, neg-1): Only for non-essential secondary text with sufficient contrast
- Test text at all scales with actual system fonts (SF Pro, Segoe UI, Roboto)
- Accessibility requirements apply — consult your project's accessibility standards

---

## `--slds-g-font-size-base`

### Description

The base font size property that establishes the foundational text size for the application. All other font scales are calculated relative to this base value.

**Hook Pattern:** `--slds-g-font-size-base`

This is the starting point for the entire typographic system. This is the default size for standard body text.

### Usage

####  Do

- Use font-size-base as the reference point for understanding the scale system
- Use font-size-base as the default size for standard body text in data-dense applications
- Use font-size-base to establish a baseline that other scales build upon
- Use font-size-base directly when base-level text sizing is appropriate

####  Don't

- Avoid modifying the base font size value itself (use scale variants instead)
- Avoid using base size for headings or emphasized content (use larger scales)
- Avoid assuming base is always the right choice (font-scale-1 provides more readable body text)

#### Context

- Default application text size
- Body text in compact interfaces
- Reference point for scale calculations
- Foundational typography sizing

### Accessibility

- 13px (0.8125rem) is at the lower limit for comfortable reading
- Use font-scale-1 (14px equivalent) or larger for primary body text when readability is critical
- Ensure sufficient contrast when using base size text
- Account for user preferences and viewport context when selecting text sizes

---

## `--slds-g-font-weight-*`

### Description

Font weight values that control text thickness and visual emphasis. SLDS 2 uses four primary weights to maintain clarity and consistency across all platforms.

**Hook Pattern:** `--slds-g-font-weight-{weight}` where `{weight}` is the font weight level

**Primary Weights Used in SLDS 2:**
- **Light (weight-3):** Display text at `font-scale-7` and above
- **Regular (weight-4):** Titles (`font-scale-3` through `font-scale-6`) and all body text
- **Semibold (weight-6):** Buttons and smaller body titles (`font-size-base` through `font-scale-2`)
- **Bold (weight-7):** Emphasis within body text only, never for headings

> **Note:** Weights 1, 2, and 5 are available but not commonly used in SLDS 2.

### Usage

####  Do

- Use font-weight-4 (regular) as the default for most body text
- Use font-weight-6 (semibold) for buttons, labels, and minor headings
- Use font-weight-3 (light) for large display text (scales 7-8)
- Use font-weight-7 (bold) sparingly for emphasis within body content
- Pair lighter weights with larger font scales for elegant typography
- Use heavier weights (semibold, bold) for smaller text that needs emphasis

####  Don't

- Avoid using font weights lighter than regular (400) for body text or small sizes
- Avoid using bold (700) for all headings (use semibold instead)
- Avoid using ultra-thin, thin, or medium weights (not part of SLDS 2 standard)
- Avoid inconsistent weight usage that breaks visual hierarchy
- Avoid overusing bold weight (reduces its effectiveness for emphasis)
- Avoid mixing too many different weights in a single interface section

#### Context

- All text requiring weight specification
- Body text (regular weight)
- Headings and titles (regular or semibold)
- Buttons and interactive labels (semibold)
- Display text (light weight for large sizes)
- Emphasis within paragraphs (bold, sparingly)
- Form labels and field text

### Accessibility

- Font weights lighter than regular (400) may be difficult to read, especially at small sizes
- Light weight (300) should only be used for large text (scale 6 and above)
- Ensure sufficient contrast is maintained at all font weights
- Heavier weights (semibold, bold) improve readability for users with low vision
- Regular weight (400) provides optimal readability for most body text
- Test all font weights with actual system fonts across different operating systems

---

## `--slds-g-font-lineheight-*`

### Description

Line height values that control vertical spacing between lines of text. These unitless values are multiplied by the font size to calculate the actual line height.

**Hook Pattern:** `--slds-g-font-lineheight-{level}` where `{level}` is the line height level

**Usage Guidance:**
- **Tight spacing (1-2):** Single-line text, headings
- **Standard spacing (3-4):** Body text, paragraphs (lineheight-4 recommended for body)
- **Spacious (5-6):** Enhanced readability, special cases

### Usage

####  Do

- Use lineheight-4 (1.5) as the default for most body text and paragraphs
- Use lineheight-2 or lineheight-3 (1.25-1.375) for headings and titles
- Use lineheight-1 (1) for single-line text or badges
- Use lineheight-5 (1.75) for enhanced readability in long-form content
- Use tighter line heights for larger font scales (headings)
- Use more generous line heights for smaller font scales (body text)
- Unitless values scale proportionally with font size

####  Don't

- Avoid using lineheight-1 (1) for multi-line text (reduces readability)
- Avoid using lineheight-6 (2) for standard body text (excessive spacing)
- Avoid inconsistent line height values within related content
- Avoid line heights that create awkward vertical rhythm
- Avoid tight line heights (below 1.25) for body text
- Avoid overly generous line heights that disrupt reading flow

#### Context

- All multi-line text content
- Body text and paragraphs (lineheight-4 recommended)
- Headings and titles (lineheight-2 or lineheight-3)
- Single-line text elements (lineheight-1)
- Form field text and labels
- List items and table content
- Long-form content and articles

### Accessibility

- Line height significantly impacts readability for all users
- Use minimum 1.5 line height for body text (WCAG 1.4.12 Text Spacing)
- Adequate line height helps users with dyslexia and other reading difficulties
- Line heights below 1.25 for multi-line text may fail accessibility requirements
- Generous line heights (1.5-1.75) improve scanning and comprehension
- Line height affects the overall vertical rhythm and scanability of content
- Ensure line height accommodates descenders and ascenders without clipping

---

## `--slds-g-sizing-content-*`

### Description

Character-based width constraints for readable text content. These hooks use the `ch` unit to prevent text lines from becoming too long and difficult to read.

**Hook Pattern:** `--slds-g-sizing-content-{level}` where `{level}` is the content width level

**Usage Guidance:**
- **content-1:** Very narrow content, short text blocks
- **content-2:** Narrow columns, captions and descriptions
- **content-3:** Optimal reading width for body text (recommended)

### Usage

####  Do

- Use sizing-content-3 (60ch) for optimal paragraph readability
- Use sizing-content-2 (45ch) for narrower columns or sidebars
- Use sizing-content-1 (20ch) for very short text blocks or labels
- Apply sizing-content hooks as max-width on text containers to prevent overly long lines
- 45-75 characters per line is optimal for readability
- Combine sizing-content hooks with appropriate padding for comfortable reading experience

####  Don't

- Avoid using content sizing hooks for non-text elements (use sizing hooks instead)
- Avoid letting body text extend beyond 75-80 characters per line
- Avoid using content sizing for headings (use heading sizing hooks)
- Avoid applying rigid width constraints where responsive behavior is needed
- Avoid very narrow widths (below 20ch) for multi-line body text
- Avoid using ch units for layouts unrelated to text content

#### Context

- Paragraph text and body content containers
- Article or blog post content areas
- Text blocks within cards or panels
- Description text and longer form labels
- Caption and secondary text containers
- Long-form content that needs readable line lengths

### Accessibility

- Optimal line length (45-75 characters) significantly improves readability
- Overly long lines force excessive eye movement and reduce comprehension
- Character-based width constraints adapt naturally to font size changes
- Appropriate line length helps users with dyslexia and reading difficulties
- Ensures comfortable reading experience for all users regardless of viewport size
- Test content widths with actual text content at various font scales

---

## `--slds-g-sizing-heading-*`

### Description

Character-based width constraints for heading text. Headings typically require shorter line lengths than body text for optimal readability and visual impact.

**Hook Pattern:** `--slds-g-sizing-heading-{level}` where `{level}` is the heading width level

**Usage Guidance:**
- **heading-1:** Very short headings, compact spaces
- **heading-2:** Standard heading width (recommended)
- **heading-3:** Longer headings, subheadings

### Usage

####  Do

- Use sizing-heading-2 (25ch) as the default for most headings
- Use sizing-heading-1 (20ch) for short, punchy headings in cards or panels
- Use sizing-heading-3 (35ch) for longer headings or subheadings
- Apply sizing-heading hooks as max-width on heading elements to prevent awkward line breaks
- Shorter line lengths enhance heading scannability
- Combine sizing-heading hooks with appropriate font scales and weights for clear hierarchy

####  Don't

- Avoid using heading sizing hooks for body text (use content sizing hooks)
- Avoid letting headings extend beyond 35-40 characters
- Avoid rigid width constraints that create awkward wrapping
- Avoid applying heading widths to non-heading text elements
- Avoid very narrow constraints that force single-word lines
- Avoid using heading sizing for display text (large scales 7-8)

#### Context

- Page titles and section headings
- Card and panel headings
- Modal and dialog titles
- Component headings and labels
- Subheadings and secondary titles
- Navigation headers

### Accessibility

- Appropriate heading width improves scannability for all users
- Short, focused headings are easier to process and remember
- Character-based constraints scale naturally with font size and user preferences
- Headings serve as navigation landmarks for screen reader users
- Ensure headings remain readable and don't wrap awkwardly at different viewport sizes
- Test heading widths with various lengths and languages for internationalization

---

## `--slds-g-font-scale-var-*`

### Description

Density-aware font scale hooks that automatically adapt text size when the system switches between comfy and compact display density settings.

**Hook Pattern:** `--slds-g-font-scale-var-{size}` where `{size}` is the density-aware scale step

These hooks provide the same scale categories as fixed font-scale hooks but respond to user density preferences.

### Usage

####  Do

- Use density-aware font scales for components in data-dense contexts (tables, lists, forms)
- Use density-aware font scales when users need control over information density and text size
- Use density-aware font scales for components that appear differently in comfy vs. compact settings
- Use density-aware font scales when text sizing should respond to user preferences automatically
- Density-aware hooks maintain readability across both density modes
- Use density-aware font scales for form labels, table text, and list content that benefits from density control

####  Don't

- Avoid using density-aware scales when fixed sizing is required for consistency
- Avoid mixing density-aware and fixed font scales inconsistently within the same component
- Avoid assuming only one density mode will be used
- Avoid using density-aware hooks for display text or hero sections (remain fixed)
- Avoid applying density-aware scales to branding elements that must remain consistent

#### Context

- Data tables and grid text
- Form field labels and input text
- List items and navigation text
- Card content that adapts to density
- Toolbar and action bar text
- Any component where density-aware sizing improves usability

### Accessibility

- Density-aware fonts support user preferences for information density
- Compact mode must maintain minimum readable font sizes (12px+)
- Ensure text remains legible at the smallest density-aware scale values
- Both comfy and compact modes must meet WCAG 2.1 text size requirements
- Test density-aware typography with actual content in both modes
- Users with low vision may prefer comfy mode for larger text

> **For complete density-aware font scale details** including comfy and compact values, see the [Spacing and Sizing Hooks](ref:slds.guidance.hooks.spacing) for density-aware values.

---

## `--slds-g-font-lineheight-var-base`

### Description

Density-aware line height hook that automatically adjusts vertical text spacing based on user density preferences.

**Hook Pattern:** `--slds-g-font-lineheight-var-base`

This hook provides appropriate line height for body text in both comfy and compact density modes.

### Usage

####  Do

- Use lineheight-var-base for body text in density-aware components
- Use lineheight-var-base for text in tables, lists, and forms that adapt to density
- Use lineheight-var-base when combined with density-aware font scale hooks
- Apply lineheight-var-base to any text that should adjust vertical spacing with density changes
- This hook maintains readability while supporting density preferences

####  Don't

- Avoid using density-aware line height when fixed spacing is required
- Avoid mixing density-aware and fixed line heights inconsistently
- Avoid assuming only one density mode will be used
- Avoid using for headings or display text (typically remain fixed)
- Avoid applying to single-line text elements where line height doesn't impact layout

#### Context

- Body text in density-aware components
- Table cell text and data
- List item content
- Form field text
- Any multi-line text in components that adapt to density settings

### Accessibility

- Appropriate line height is critical for readability in both density modes
- Compact mode must maintain minimum 1.25 line height for multi-line text
- Ensure text remains readable and doesn't feel cramped in compact mode
- Users with reading difficulties benefit from appropriate line height
- Both density modes should provide comfortable reading experience
- Test with actual content to verify readability at both settings

> **For complete density-aware line height details** including specific values and implementation patterns, see the [Spacing and Sizing Hooks](ref:slds.guidance.hooks.spacing) for density-aware values.

# Utilities Quick Reference

SLDS utility classes for rapid styling. 1,147 classes across 27 categories.

---

## When to Use Utilities vs. Hooks

| Need | Use utility class | Use hook |
|------|------------------|----------|
| Margin/padding | `slds-m-bottom_medium`, `slds-p-around_small` | `var(--slds-g-spacing-4)` in custom CSS |
| Grid layout | `slds-grid`, `slds-col`, `slds-size_*` | -- |
| Visibility | `slds-hide`, `slds-show_*` | -- |
| Text styling | `slds-text-heading_medium` | `var(--slds-g-font-*)` |
| Borders | `slds-border_bottom` | `var(--slds-g-color-border-*)` |
| Colors | `slds-theme_*` | `var(--slds-g-color-*)` |

**Prefer utility classes for layout and spacing in markup.** Use hooks in custom CSS for colors, typography values, and dynamic theming.

---

## Most-Used Categories

### Grid (`slds-grid`, 80 classes)

```html
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
    <!-- Column content -->
  </div>
</div>
```

Key classes:
- `slds-grid` -- flex container
- `slds-wrap` -- allow wrapping
- `slds-gutters` -- column spacing
- `slds-col` -- flex column
- `slds-size_1-of-N` -- fractional width (1-of-1 through 1-of-12)
- `slds-medium-size_*`, `slds-large-size_*` -- responsive breakpoints
- `slds-grid_vertical` -- column direction
- `slds-grid_align-center` -- center alignment

### Margin (`slds-m-*`, 119 classes)

Pattern: `slds-m-{direction}_{size}`

| Direction | Class pattern |
|-----------|--------------|
| All | `slds-m-around_*` |
| Top | `slds-m-top_*` |
| Bottom | `slds-m-bottom_*` |
| Left | `slds-m-left_*` |
| Right | `slds-m-right_*` |
| Vertical | `slds-m-vertical_*` |
| Horizontal | `slds-m-horizontal_*` |

Sizes: `none`, `xxx-small`, `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`

### Padding (`slds-p-*`, 120 classes)

Same pattern as margin: `slds-p-{direction}_{size}`

### Sizing (`slds-size_*`, 613 classes)

Fractional widths for columns and elements:
- `slds-size_1-of-2` -- 50%
- `slds-size_1-of-3` -- 33.3%
- `slds-size_2-of-3` -- 66.6%
- `slds-size_1-of-4` -- 25%
- `slds-size_full` -- 100%

Responsive: `slds-small-size_*`, `slds-medium-size_*`, `slds-large-size_*`

### Typography (`slds-text-*`, 24 classes)

- `slds-text-heading_large` -- large heading
- `slds-text-heading_medium` -- medium heading
- `slds-text-heading_small` -- small heading
- `slds-text-body_regular` -- body text
- `slds-text-body_small` -- small body text
- `slds-text-title` -- uppercase label
- `slds-text-color_default` -- default text color
- `slds-text-color_weak` -- secondary text color

### Visibility

- `slds-hide` -- hide element (`display: none`)
- `slds-show` -- show element (`display: block`)
- `slds-show_inline` -- show inline
- `slds-hidden` -- hidden via `visibility: hidden`; occupies space and is not a screen-reader helper
- `slds-assistive-text` -- screen-reader only text

Use `slds-assistive-text`, not `slds-hidden`, when content should remain available to assistive technology.

### Truncation

- `slds-truncate` -- single-line truncation with ellipsis
- `slds-line-clamp_*` -- multi-line truncation (2, 3, 4, 5 lines)

---

## How to Search

```bash
# Browse all categories
node scripts/search-utilities.cjs --category "all"

# Browse a specific category
node scripts/search-utilities.cjs --category "grid"

# Search by class name
node scripts/search-utilities.cjs --search "slds-m-bottom"

# Wildcard pattern
node scripts/search-utilities.cjs --pattern "slds-p-around_*"
```

---

## Deep Reference

- Utility index: `references/utilities/index.md`
- Individual category guides: `references/utilities/{category}.md`
- Full metadata (1,147 classes): `assets/utilities-index.json`

---
id: slds.guidance.utilities.alignment
title: Alignment Utilities
description: SLDS alignment utility classes for centering content
summary: "Utility for absolute centering. Uses flexbox to center content both horizontally and vertically within containers."

artifact_type: reference
domain: utilities
topic: alignment

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities

tags: [utilities, alignment, centering, flexbox]
keywords: [slds-align, absolute-center, center-content, flexbox-center]
---

# Alignment - Content Centering

Utility for absolute centering of content within containers.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-align_absolute-center` | Centers children both horizontally and vertically using flexbox |

## Common Patterns

### Center Content in Container
```html
<!-- Center a single element -->
<div class="slds-align_absolute-center" style="height: 200px;">
  <div class="slds-box">
    Centered Content
  </div>
</div>
```

### Center Modal Dialog
```html
<!-- Center a modal in viewport -->
<div class="slds-backdrop slds-backdrop_open">
  <div class="slds-align_absolute-center" style="height: 100vh;">
    <section class="slds-modal slds-fade-in-open">
      <div class="slds-modal__container">
        <!-- Modal content -->
      </div>
    </section>
  </div>
</div>
```

### Center Loading Spinner
```html
<!-- Center spinner in card -->
<article class="slds-card">
  <div class="slds-align_absolute-center" style="height: 300px;">
    <div class="slds-spinner slds-spinner_medium">
      <span class="slds-assistive-text">Loading</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</article>
```

### Center Empty State Message
```html
<!-- Center illustration and message -->
<div class="slds-align_absolute-center" style="min-height: 400px;">
  <div class="slds-illustration slds-illustration_small">
    <img src="/assets/images/illustrations/empty-state.svg" alt="" />
    <h3 class="slds-text-heading_medium">No items to display</h3>
    <p class="slds-text-body_regular">Get started by creating your first item</p>
  </div>
</div>
```

### Center Icon in Fixed Container
```html
<!-- Center icon in square container -->
<div class="slds-align_absolute-center" style="width: 100px; height: 100px; background: #f3f3f3;">
  <span class="slds-icon_container slds-icon-utility-check">
    <svg class="slds-icon slds-icon_small">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
    </svg>
  </span>
</div>
```

## Best Practices

✅ Use `slds-align_absolute-center` when content needs to be centered both horizontally and vertically
✅ Set explicit height on the container for vertical centering to work properly
✅ Combine with other layout utilities like `slds-box` or `slds-card` for complete designs
✅ Use for centering single elements or grouped content within defined containers

❌ Avoid using on elements without defined height - vertical centering requires container height
❌ Do not use for text alignment - use `slds-text-align_center` for inline text centering
❌ Avoid nesting multiple `slds-align_absolute-center` classes unnecessarily

## Technical Details

The `slds-align_absolute-center` class applies these CSS properties:
- `display: flex` - Creates a flex container
- `justify-content: center` - Centers content horizontally
- `align-content: center` - Centers flex lines
- `align-items: center` - Centers content vertically
- `margin: auto` - Ensures proper centering within parent

This utility leverages flexbox for reliable cross-browser centering without requiring absolute positioning or transform calculations.

---
id: slds.guidance.utilities.borders
title: Borders Utilities
description: SLDS directional border utility classes
summary: "Utilities for applying borders to specific edges of elements."

artifact_type: reference
domain: utilities
topic: borders

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.box
  - slds.guidance.utilities.margin
  - slds.guidance.utilities.padding
  - slds.guidance.hooks.borders

tags: [utilities, borders]
keywords: [slds-border_top, slds-border_bottom, slds-border_left, slds-border_right]
---

# Borders - Directional Border Utilities

Utilities for applying 1px solid borders to specific edges of elements.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-border_top` | Adds a 1px solid border to the top edge |
| `slds-border_bottom` | Adds a 1px solid border to the bottom edge |
| `slds-border_left` | Adds a 1px solid border to the left edge |
| `slds-border_right` | Adds a 1px solid border to the right edge |

**Properties**: All borders use `var(--slds-g-sizing-border-1)` (1px) width and `var(--slds-g-color-border-1)` color.

## Common Patterns

### Section Divider
```html
<!-- Divider between content sections -->
<section class="slds-border_bottom slds-p-vertical_medium">
  <h2>Section Title</h2>
  <p>Section content here</p>
</section>
```

### Accent Bar Card
```html
<!-- Card with colored left accent border -->
<div class="slds-card slds-border_left" style="border-left-width: 4px; border-left-color: var(--slds-g-color-brand-base-60);">
  <div class="slds-card__body">
    <h3>Featured Content</h3>
    <p>Card content with brand accent</p>
  </div>
</div>
```

### Status Message with Border Accent
```html
<!-- Success message with green left border -->
<div class="slds-p-around_medium slds-border_left" style="border-left-width: 4px; border-left-color: var(--slds-g-color-success-base-50);">
  <strong>Success:</strong> Record saved successfully.
</div>
```

### Top Border for Card Header
```html
<!-- Card with top border separator -->
<div class="slds-card">
  <div class="slds-card__header slds-border_top">
    <h2 class="slds-card__header-title">Card Title</h2>
  </div>
  <div class="slds-card__body slds-card__body_inner">
    Card content
  </div>
</div>
```

### Bottom Border for List Items
```html
<!-- List with bottom borders -->
<ul class="slds-has-dividers_bottom-space">
  <li class="slds-item slds-border_bottom slds-p-vertical_small">
    List item one
  </li>
  <li class="slds-item slds-border_bottom slds-p-vertical_small">
    List item two
  </li>
  <li class="slds-item slds-p-vertical_small">
    List item three (no border)
  </li>
</ul>
```

## Best Practices

✅ Use `slds-border_bottom` for section dividers
✅ Use `slds-border_left` with 4px width for accent bars on cards and messages
✅ Combine border utilities with spacing utilities for layout control
✅ Use inline styles with design tokens for custom border colors
✅ Use `slds-border_top` for visual separation in card headers

❌ Never apply multiple directional border classes to the same element
❌ Never use arbitrary color values instead of design tokens
❌ Never override the default 1px width without specific design requirements
❌ Never use border utilities when a component has built-in border styling

## Token Reference

### Border Tokens
- **Width**: `var(--slds-g-sizing-border-1)` (1px)
- **Color**: `var(--slds-g-color-border-1)` (default gray)

### Common Color Overrides
- **Brand**: `var(--slds-g-color-brand-base-60)`
- **Success**: `var(--slds-g-color-success-base-50)`
- **Warning**: `var(--slds-g-color-warning-base-60)`
- **Error**: `var(--slds-g-color-error-base-50)`

## Related Utilities

- **Box Utilities** - For containers with borders and padding, see [Box Utilities](ref:slds.guidance.utilities.box)
- **Spacing Utilities** - For padding and margins, see [Margin](ref:slds.guidance.utilities.margin) and [Padding](ref:slds.guidance.utilities.padding) utilities

---
id: slds.guidance.utilities.box
title: Box Utilities
description: SLDS box utility classes for containers with padding and borders
summary: "Utilities for creating styled containers with padding, borders, and interactive states. Use with theme utilities for semantic colors."

artifact_type: reference
domain: utilities
topic: box

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.themes
  - slds.guidance.utilities.borders
  - slds.guidance.utilities.padding

tags: [utilities, box, containers, padding, borders]
keywords: [slds-box, slds-box_xx-small, slds-box_x-small, slds-box_small, slds-box_link, container, padding]
---

# Box Utilities

Utilities for creating styled containers with consistent padding, borders, and interactive states.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-box` | Creates a container with 16px padding, rounded corners, and subtle border |
| `slds-box_xx-small` | Container with 4px padding for compact layouts |
| `slds-box_x-small` | Container with 8px padding for small content areas |
| `slds-box_small` | Container with 12px padding for slightly reduced spacing |
| `slds-box_link` | Makes box clickable with hover/focus states and accent border |

## Related Utilities

- **Themes Utilities** - For background colors and semantic theming (success, error, warning, info), see [Themes Utilities](ref:slds.guidance.utilities.themes)
- **Borders Utilities** - For directional borders, see [Borders Utilities](ref:slds.guidance.utilities.borders)
- **Spacing Utilities** - For padding control, see [Padding Utilities](ref:slds.guidance.utilities.padding)

## Common Patterns

### Basic Container
```html
<!-- Standard box container with default 16px padding -->
<div class="slds-box">
  <h3 class="slds-text-heading_small">Container Title</h3>
  <p>Content with consistent padding and subtle border styling.</p>
</div>
```

### Themed Notification Box
```html
<!-- Success notification with semantic colors (see themes.md for theme utilities) -->
<div class="slds-box slds-theme_success">
  <div class="slds-media">
    <div class="slds-media__figure">
      <span class="slds-icon_container">
        <svg class="slds-icon slds-icon_small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
        </svg>
      </span>
    </div>
    <div class="slds-media__body">
      <p>Operation completed successfully.</p>
    </div>
  </div>
</div>
```

### Interactive Box Link
```html
<!-- Clickable box that navigates to detail view -->
<a href="/record/detail" class="slds-box slds-box_link">
  <h3 class="slds-text-heading_small">Account Name</h3>
  <dl class="slds-list_horizontal slds-wrap">
    <dt class="slds-item_label">Type:</dt>
    <dd class="slds-item_detail">Customer</dd>
    <dt class="slds-item_label">Revenue:</dt>
    <dd class="slds-item_detail">$1.2M</dd>
  </dl>
</a>
```

### Compact Info Card
```html
<!-- Small padding variant for dense layouts (see themes.md for theme utilities) -->
<div class="slds-box slds-box_x-small slds-theme_shade">
  <div class="slds-grid slds-grid_align-spread">
    <span class="slds-text-body_small">Last Updated</span>
    <span class="slds-text-body_small">2 hours ago</span>
  </div>
</div>
```

### Error Message Box
```html
<!-- Error state with semantic styling (see themes.md for theme utilities) -->
<div class="slds-box slds-theme_error" role="alert">
  <h3 class="slds-text-heading_small">Validation Error</h3>
  <ul class="slds-list_dotted">
    <li>Email address is required</li>
    <li>Phone number format is invalid</li>
  </ul>
</div>
```

## Best Practices

✅ Use `slds-box` for consistent container styling across components
✅ Combine box utilities with theme utilities (see [Themes Utilities](ref:slds.guidance.utilities.themes)) for semantic state communication
✅ Use `slds-box_link` for entire containers that are clickable
✅ Combine size variants with theme classes for flexible layouts
✅ Apply `role="alert"` to error and warning themed boxes for accessibility

❌ Don't nest multiple `slds-box` containers without purpose
❌ Don't apply `slds-box_link` to non-interactive elements
❌ Don't override box padding with inline styles - use the size variants instead

---
id: slds.guidance.utilities.color
title: Color Utilities
description: SLDS color utility classes for text, background, border, and fill properties
summary: "Utilities for applying neutral gray colors. Includes text, background, border, and fill classes across a 12-step neutral palette."

artifact_type: reference
domain: utilities
topic: color

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.color

tags: [utilities, color, neutral-palette, accessibility]
keywords: [slds-color, text-gray, background-gray, border-gray, fill-gray]
---

# Color - Neutral Palette

Utilities for applying neutral gray colors to text, backgrounds, borders, and SVG fills.

## Core Classes

### Text Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__text_gray-1` | Apply lightest gray text color | `--slds-g-color-neutral-base-100` |
| `slds-color__text_gray-2` | Apply gray-2 text color | `--slds-g-color-neutral-base-95` |
| `slds-color__text_gray-3` | Apply gray-3 text color | `--slds-g-color-neutral-base-95` |
| `slds-color__text_gray-4` | Apply gray-4 text color | `--slds-g-color-neutral-base-90` |
| `slds-color__text_gray-5` | Apply gray-5 text color | `--slds-g-color-neutral-base-90` |
| `slds-color__text_gray-6` | Apply gray-6 text color | `--slds-g-color-neutral-base-80` |
| `slds-color__text_gray-7` | Apply gray-7 text color | `--slds-g-color-neutral-base-70` |
| `slds-color__text_gray-8` | Apply gray-8 text color | `--slds-g-color-neutral-base-60` |
| `slds-color__text_gray-9` | Apply gray-9 text color | `--slds-g-color-neutral-base-50` |
| `slds-color__text_gray-10` | Apply gray-10 text color | `--slds-g-color-neutral-base-30` |
| `slds-color__text_gray-11` | Apply gray-11 text color | `--slds-g-color-neutral-base-30` |
| `slds-color__text_gray-12` | Apply darkest gray text color | `--slds-g-color-neutral-base-20` |

### Background Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__background_gray-1` | Apply lightest gray background | `--slds-g-color-neutral-base-100` |
| `slds-color__background_gray-2` | Apply gray-2 background | `--slds-g-color-neutral-base-95` |
| `slds-color__background_gray-3` | Apply gray-3 background | `--slds-g-color-neutral-base-95` |
| `slds-color__background_gray-4` | Apply gray-4 background | `--slds-g-color-neutral-base-90` |
| `slds-color__background_gray-5` | Apply gray-5 background | `--slds-g-color-neutral-base-90` |
| `slds-color__background_gray-6` | Apply gray-6 background | `--slds-g-color-neutral-base-80` |
| `slds-color__background_gray-7` | Apply gray-7 background | `--slds-g-color-neutral-base-70` |
| `slds-color__background_gray-8` | Apply gray-8 background | `--slds-g-color-neutral-base-60` |
| `slds-color__background_gray-9` | Apply gray-9 background | `--slds-g-color-neutral-base-50` |
| `slds-color__background_gray-10` | Apply gray-10 background | `--slds-g-color-neutral-base-30` |
| `slds-color__background_gray-11` | Apply gray-11 background | `--slds-g-color-neutral-base-30` |
| `slds-color__background_gray-12` | Apply darkest gray background | `--slds-g-color-neutral-base-20` |

### Border Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__border_gray-1` | Apply lightest gray border | `--slds-g-color-neutral-base-100` |
| `slds-color__border_gray-2` | Apply gray-2 border | `--slds-g-color-neutral-base-95` |
| `slds-color__border_gray-3` | Apply gray-3 border | `--slds-g-color-neutral-base-95` |
| `slds-color__border_gray-4` | Apply gray-4 border | `--slds-g-color-neutral-base-90` |
| `slds-color__border_gray-5` | Apply gray-5 border | `--slds-g-color-neutral-base-90` |
| `slds-color__border_gray-6` | Apply gray-6 border | `--slds-g-color-neutral-base-80` |
| `slds-color__border_gray-7` | Apply gray-7 border | `--slds-g-color-neutral-base-70` |
| `slds-color__border_gray-8` | Apply gray-8 border | `--slds-g-color-neutral-base-60` |
| `slds-color__border_gray-9` | Apply gray-9 border | `--slds-g-color-neutral-base-50` |
| `slds-color__border_gray-10` | Apply gray-10 border | `--slds-g-color-neutral-base-30` |
| `slds-color__border_gray-11` | Apply gray-11 border | `--slds-g-color-neutral-base-30` |
| `slds-color__border_gray-12` | Apply darkest gray border | `--slds-g-color-neutral-base-20` |

### SVG Fill Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__fill_gray-1` | Apply lightest gray SVG fill | `--slds-g-color-neutral-base-100` |
| `slds-color__fill_gray-2` | Apply gray-2 SVG fill | `--slds-g-color-neutral-base-95` |
| `slds-color__fill_gray-3` | Apply gray-3 SVG fill | `--slds-g-color-neutral-base-95` |
| `slds-color__fill_gray-4` | Apply gray-4 SVG fill | `--slds-g-color-neutral-base-90` |
| `slds-color__fill_gray-5` | Apply gray-5 SVG fill | `--slds-g-color-neutral-base-90` |
| `slds-color__fill_gray-6` | Apply gray-6 SVG fill | `--slds-g-color-neutral-base-80` |
| `slds-color__fill_gray-7` | Apply gray-7 SVG fill | `--slds-g-color-neutral-base-70` |
| `slds-color__fill_gray-8` | Apply gray-8 SVG fill | `--slds-g-color-neutral-base-60` |
| `slds-color__fill_gray-9` | Apply gray-9 SVG fill | `--slds-g-color-neutral-base-50` |
| `slds-color__fill_gray-10` | Apply gray-10 SVG fill | `--slds-g-color-neutral-base-30` |
| `slds-color__fill_gray-11` | Apply gray-11 SVG fill | `--slds-g-color-neutral-base-30` |
| `slds-color__fill_gray-12` | Apply darkest gray SVG fill | `--slds-g-color-neutral-base-20` |

## Common Patterns

### Card with Neutral Background
```html
<!-- Card with gray-2 background and darker text -->
<div class="slds-card slds-color__background_gray-2 slds-p-around_medium">
  <h2 class="slds-text-heading_medium slds-color__text_gray-12">Card Title</h2>
  <p class="slds-color__text_gray-10">Card content with readable contrast</p>
</div>
```

### Status Indicator with Border
```html
<!-- Status box with colored border -->
<div class="slds-box slds-color__border_gray-7 slds-border_top slds-border_bottom">
  <span class="slds-color__text_gray-9">Pending Review</span>
</div>
```

### Icon with Custom Fill Color
```html
<!-- SVG icon with gray fill -->
<svg class="slds-icon slds-icon_small slds-color__fill_gray-8">
  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg>
```

### Alternating Row Colors
```html
<!-- Table rows with alternating backgrounds -->
<table class="slds-table">
  <tbody>
    <tr class="slds-color__background_gray-1">
      <td>Row 1 with gray-1 background</td>
    </tr>
    <tr class="slds-color__background_gray-2">
      <td>Row 2 with gray-2 background</td>
    </tr>
  </tbody>
</table>
```

### Text Hierarchy with Gray Scale
```html
<!-- Content with visual hierarchy using grays -->
<article class="slds-card__body">
  <h3 class="slds-color__text_gray-12">Primary Heading</h3>
  <h4 class="slds-color__text_gray-10">Secondary Heading</h4>
  <p class="slds-color__text_gray-8">Body text content</p>
  <small class="slds-color__text_gray-6">Supporting metadata</small>
</article>
```

## Best Practices

✅ Maintain WCAG AA contrast ratio of 4.5:1 for normal text
✅ Maintain WCAG AA contrast ratio of 3:1 for large text (18pt or 14pt bold)
✅ Use `slds-color__text_gray-12` on light backgrounds for maximum readability
✅ Use `slds-color__text_gray-1` on dark backgrounds for maximum readability
✅ Test color combinations with accessibility tools before deployment
✅ Use consistent gray levels across similar UI elements

❌ Never use gray-1 through gray-5 text on white backgrounds (insufficient contrast)
❌ Avoid using similar gray values for foreground and background
❌ Never rely solely on color to convey information
❌ Avoid using `slds-color__text_gray-6` or lighter for body text

---
id: slds.guidance.utilities.dark-mode
title: Dark Mode Utilities
description: SLDS color scheme utility classes for controlling light, dark, and system color preferences
summary: "Utilities for controlling color scheme preferences. Forces light mode, dark mode, or respects system preference."

artifact_type: reference
domain: utilities
topic: dark-mode

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.color
  - slds.guidance.utilities.themes

tags: [utilities, dark-mode, color-scheme, theme]
keywords: [slds-color-scheme, dark mode, light mode, system preference]
---

# Dark Mode - Color Scheme Control

Utilities for controlling browser color scheme preferences. Uses CSS `color-scheme` property.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-color-scheme--light` | Forces light mode only |
| `slds-color-scheme--dark` | Forces dark mode only |
| `slds-color-scheme--system` | Respects system preference |

## Common Patterns

```html
<!-- Force light mode on entire application -->
<body class="slds-color-scheme--light">
  <!-- All content renders in light mode -->
</body>

<!-- Force dark mode on specific component -->
<div class="slds-card slds-color-scheme--dark">
  <!-- Card content renders in dark mode -->
</div>

<!-- System preference for modal -->
<div class="slds-modal slds-color-scheme--system">
  <!-- Modal adapts to user's OS preference -->
</div>

<!-- Mixed mode layout -->
<div class="slds-page">
  <nav class="slds-color-scheme--dark">
    <!-- Navigation always dark -->
  </nav>
  <main class="slds-color-scheme--system">
    <!-- Content follows system preference -->
  </main>
</div>

<!-- Override system preference locally -->
<body class="slds-color-scheme--system">
  <div class="slds-box slds-color-scheme--light">
    <!-- Box always light even if system is dark -->
  </div>
</body>
```

## Implementation Details

### How It Works
- Uses CSS `color-scheme` property
- Applies to element and descendants
- When on `<body>`, affects entire document via `:has()` selector
- Browser automatically adjusts form controls, scrollbars, and system colors

### Property Values
| Class | CSS Property | Effect |
|-------|--------------|--------|
| `slds-color-scheme--light` | `color-scheme: only light` | Forces light colors |
| `slds-color-scheme--dark` | `color-scheme: only dark` | Forces dark colors |
| `slds-color-scheme--system` | `color-scheme: light dark` | Allows both schemes |

## Best Practices

✅ Apply `slds-color-scheme--system` to `<body>` for app-wide system preference support
✅ Use `slds-color-scheme--dark` for navigation bars and headers
✅ Use `slds-color-scheme--light` for data-heavy tables and forms
✅ Test both light and dark modes for all components
✅ Use modern double-dash syntax (`--`) for new implementations

❌ Don't use deprecated underscore syntax (`_`) in new code
❌ Don't mix color scheme classes on the same element
❌ Don't assume dark mode without testing contrast ratios
❌ Don't override user system preference without clear UI controls

## Deprecated Classes

The following BEM-style classes are deprecated. Use double-dash syntax instead:

| Deprecated | Use Instead |
|------------|-------------|
| `slds-color-scheme_light` | `slds-color-scheme--light` |
| `slds-color-scheme_dark` | `slds-color-scheme--dark` |
| `slds-color-scheme_system` | `slds-color-scheme--system` |

---
id: slds.guidance.utilities.description-list
title: Description List Utilities
description: SLDS description list utility classes for semantic key-value displays
summary: "Utilities for creating description lists with inline and horizontal layout variants."

artifact_type: reference
domain: utilities
topic: description-list

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.spacing

tags: [utilities, description-list, layout, semantic]
keywords: [slds-dl_inline, slds-dl_horizontal, description-list, dl]
---

# Description List - Semantic Key-Value Layouts

Utilities for creating responsive description lists with inline and horizontal layouts.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-dl_inline` | Creates inline layout where terms and descriptions flow horizontally |
| `slds-dl_inline__label` | Marks the term (`<dt>`) in an inline description list |
| `slds-dl_inline__detail` | Marks the description (`<dd>`) in an inline description list |
| `slds-dl_horizontal` | Creates horizontal layout with 30/70 width split |
| `slds-dl_horizontal__label` | Marks the term (`<dt>`) with 30% width |
| `slds-dl_horizontal__detail` | Marks the description (`<dd>`) with 70% width |

## Layout Variants

### Inline Layout
Terms and descriptions display side-by-side in a flowing layout. Responsive at `min-width: 30em`.

| Property | Value |
|----------|-------|
| Term float | `inline-start` with `clear` |
| Description float | `inline-start` |
| Description padding | `--slds-g-spacing-1` (4px) |

### Horizontal Layout
Terms and descriptions align in columns with fixed proportions. Responsive at `min-width: 30em`.

| Property | Value |
|----------|-------|
| Layout | `flex` with `wrap` |
| Term width | 30% |
| Description width | 70% |
| Term padding | `--slds-g-spacing-3` (12px) end |

## Common Patterns

### Basic Inline Description List
```html
<!-- Inline layout: terms and descriptions flow horizontally -->
<dl class="slds-dl_inline">
  <dt class="slds-dl_inline__label">Status:</dt>
  <dd class="slds-dl_inline__detail">Active</dd>

  <dt class="slds-dl_inline__label">Created:</dt>
  <dd class="slds-dl_inline__detail">January 15, 2024</dd>

  <dt class="slds-dl_inline__label">Owner:</dt>
  <dd class="slds-dl_inline__detail">Sarah Johnson</dd>
</dl>
```

### Horizontal Description List with Column Layout
```html
<!-- Horizontal layout: 30/70 column split for structured data -->
<dl class="slds-dl_horizontal">
  <dt class="slds-dl_horizontal__label">Account Name:</dt>
  <dd class="slds-dl_horizontal__detail">Acme Corporation</dd>

  <dt class="slds-dl_horizontal__label">Industry:</dt>
  <dd class="slds-dl_horizontal__detail">Technology</dd>

  <dt class="slds-dl_horizontal__label">Annual Revenue:</dt>
  <dd class="slds-dl_horizontal__detail">$50M - $100M</dd>
</dl>
```

### Inline Layout in Narrow Region
```html
<!-- Inline layout adapts to narrow containers -->
<div class="slds-region_narrow">
  <dl class="slds-dl_inline">
    <dt class="slds-dl_inline__label">Type:</dt>
    <dd class="slds-dl_inline__detail">Customer</dd>

    <dt class="slds-dl_inline__label">Priority:</dt>
    <dd class="slds-dl_inline__detail">High</dd>
  </dl>
</div>
```

### Horizontal Layout in Narrow Region
```html
<!-- Horizontal layout maintains column structure in narrow containers -->
<div class="slds-region_narrow">
  <dl class="slds-dl_horizontal">
    <dt class="slds-dl_horizontal__label">Contact:</dt>
    <dd class="slds-dl_horizontal__detail">John Smith</dd>

    <dt class="slds-dl_horizontal__label">Email:</dt>
    <dd class="slds-dl_horizontal__detail">john.smith@acme.com</dd>

    <dt class="slds-dl_horizontal__label">Phone:</dt>
    <dd class="slds-dl_horizontal__detail">(555) 123-4567</dd>
  </dl>
</div>
```

### Mixed Content Description List
```html
<!-- Horizontal layout with varied content types -->
<dl class="slds-dl_horizontal">
  <dt class="slds-dl_horizontal__label">Description:</dt>
  <dd class="slds-dl_horizontal__detail">
    Enterprise customer with multiple product installations requiring
    dedicated support and quarterly business reviews.
  </dd>

  <dt class="slds-dl_horizontal__label">Products:</dt>
  <dd class="slds-dl_horizontal__detail">
    Sales Cloud, Service Cloud, Marketing Cloud
  </dd>

  <dt class="slds-dl_horizontal__label">Support Level:</dt>
  <dd class="slds-dl_horizontal__detail">Premium</dd>
</dl>
```

## Responsive Behavior

### Breakpoint Activation
All description list utilities activate at `min-width: 30em` (480px):
- Below breakpoint: Standard stacked `<dl>` layout
- Above breakpoint: Applied utility layout (inline or horizontal)

### Narrow Region Support
Use `.slds-region_narrow` container to force responsive styles regardless of viewport:
- Inline layout maintains float behavior
- Horizontal layout maintains flex column structure

## Best Practices

✅ Use `slds-dl_inline` for compact, single-line key-value pairs
✅ Use `slds-dl_horizontal` for detailed information with longer descriptions
✅ Apply matching label and detail classes to all `<dt>` and `<dd>` elements
✅ Wrap in `.slds-region_narrow` for consistent layout in sidebars or modals
✅ Use semantic HTML (`<dl>`, `<dt>`, `<dd>`) for accessibility

❌ Never mix inline and horizontal classes on the same list
❌ Never omit the child classes (`__label`, `__detail`) when using parent classes
❌ Never use for non-semantic layouts (use grid or flexbox utilities instead)
❌ Never override the 30/70 width ratio for horizontal layouts

---
id: slds.guidance.utilities.floats
title: Floats Utilities
description: SLDS float and clearfix utility classes for legacy layouts
summary: "Utilities for floating elements (float left/right/none, clear, clearfix). Mark as legacy - prefer Grid for new implementations."

artifact_type: reference
domain: utilities
topic: floats

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.grid

tags: [utilities, floats, clearfix, legacy]
keywords: [slds-float, slds-clear, slds-clearfix, float-left, float-right]
---

# Floats - Legacy Layout Utilities

Utilities for floating elements and clearing floats. **Legacy approach** - use Grid utilities for new implementations.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-float_left` | Floats element to the left using `inline-start` for RTL support |
| `slds-float_right` | Floats element to the right using `inline-end` for RTL support |
| `slds-float_none` | Removes float from an element with existing float |
| `slds-clear` | Clears floats on both sides with `clear: both` |
| `slds-clearfix` | Contains floats using `::after` pseudo-element technique |

## Common Patterns

### Basic Float Layout
```html
<!-- Image floated left with text wrapping -->
<div class="slds-clearfix">
  <img class="slds-float_left" src="avatar.jpg" alt="User avatar" />
  <p>Content wraps around the floated image on the left side.</p>
</div>
```

### Two-Column Float Layout
```html
<!-- Legacy two-column layout with floats -->
<div class="slds-clearfix">
  <div class="slds-float_left" style="width: 30%;">
    <!-- Sidebar content floated left -->
    <nav>Navigation items</nav>
  </div>
  <div class="slds-float_right" style="width: 65%;">
    <!-- Main content floated right -->
    <main>Main content area</main>
  </div>
</div>
```

### Clear Float After Element
```html
<!-- Clear floats to prevent wrapping -->
<div>
  <div class="slds-float_left">Floated element</div>
  <div class="slds-clear">This element starts below the float</div>
</div>
```

### Remove Float Conditionally
```html
<!-- Remove float at certain breakpoints -->
<div class="slds-float_left slds-medium-float_none">
  <!-- Floats on small screens, no float on medium+ -->
  Responsive float behavior
</div>
```

### Clearfix Container Pattern
```html
<!-- Parent contains all floated children -->
<section class="slds-clearfix">
  <div class="slds-float_left">Left column</div>
  <div class="slds-float_left">Center column</div>
  <div class="slds-float_right">Right column</div>
  <!-- Parent expands to contain all floats -->
</section>
```

## Best Practices

✅ Use [Grid Utilities](ref:slds.guidance.utilities.grid) (`slds-grid`) for new layouts instead of floats
✅ Apply `slds-clearfix` to parent containers of floated elements
✅ Place floated elements first in document flow, even when floating right
✅ Use `slds-float_none` to remove floats at specific breakpoints

❌ Do not use floats for complex multi-column layouts - use [Grid Utilities](ref:slds.guidance.utilities.grid)
❌ Do not forget `slds-clearfix` on parent containers - causes collapse
❌ Do not mix floats with flexbox or grid on the same element

## Migration Note

**Float utilities are legacy.** For new implementations, see [Grid Utilities](ref:slds.guidance.utilities.grid):
- Use `slds-grid` and `slds-col` for multi-column layouts
- Use `slds-grid_align-spread` for spacing elements apart
- Use `slds-grid_pull-padded` for content wrapping patterns

## Technical Details

- **Logical Properties**: Uses `inline-start` and `inline-end` for RTL support
- **Clearfix Method**: Implements `::after` pseudo-element with `display: table`
- **Browser Support**: Works in all supported browsers including IE11

---
id: slds.guidance.utilities.grid
title: Grid Utilities
description: SLDS flexbox grid system utilities
summary: "Utilities for flexible, responsive layouts using CSS Flexbox. Includes grid containers, columns, gutters (2px-96px), alignment, and responsive breakpoints."

artifact_type: reference
domain: utilities
topic: grid

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.sizing

tags: [utilities, grid, flexbox, layout, responsive]
keywords: [slds-grid, slds-col, slds-wrap, slds-gutters, slds-container]
---

# Grid - Flexbox Layout System

Creating flexible, responsive layouts using CSS Flexbox.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-grid` | Initialize flex container (`display: flex`) |
| `slds-col` | Initialize flex item/column (`flex: 1 1 auto`) |
| `slds-wrap` | Allow columns to wrap to new rows (`flex-wrap: wrap`) |
| `slds-nowrap` | Keep columns on single line (`flex-wrap: nowrap`) |

## Grid Flow Modifiers

| Class | Purpose |
|-------|---------|
| `slds-grid_vertical` | Stack columns vertically (`flex-direction: column`) |
| `slds-grid_vertical-reverse` | Stack columns vertically in reverse order (`flex-direction: column-reverse`) |
| `slds-grid_reverse` | Reverse horizontal flow (`flex-direction: row-reverse`) |
| `slds-grid_frame` | Full-viewport grid (`min-width: 100vw; min-height: 100vh`) |
| `slds-grid_overflow` | Create horizontal scrolling grid (`flex-flow: row nowrap`) |

## Gutters

| Class | Gutter Width | Per Side |
|-------|-------------|----------|
| `slds-gutters_xxx-small` | 2px total | 1px |
| `slds-gutters_xx-small` | 4px total | 2px |
| `slds-gutters_x-small` | 8px total | 4px |
| `slds-gutters_small` | 24px total | 12px |
| `slds-gutters` | 24px total (default) | 12px |
| `slds-gutters_medium` | 32px total | 16px |
| `slds-gutters_large` | 48px total | 24px |
| `slds-gutters_x-large` | 64px total | 32px |
| `slds-gutters_xx-large` | 96px total | 48px |

### Gutter Variants
- `slds-gutters_direct` - Apply gutters only to direct child columns (not nested grids)
- `slds-gutters_direct-xxx-small` through `slds-gutters_direct-xx-large` - Direct gutters with size variants

## Alignment

### Horizontal Alignment (Main Axis)
| Class | Purpose |
|-------|---------|
| `slds-grid_align-center` | Center columns horizontally (`justify-content: center`) |
| `slds-grid_align-space` | Equal space around columns (`justify-content: space-around`) |
| `slds-grid_align-spread` | Space columns from edges (`justify-content: space-between`) |
| `slds-grid_align-end` | Right align columns (`justify-content: flex-end`) |

### Vertical Alignment (Cross Axis)
| Class | Purpose |
|-------|---------|
| `slds-grid_vertical-align-start` | Align columns to top (`align-items: flex-start`) |
| `slds-grid_vertical-align-center` | Vertically center columns (`align-items: center`) |
| `slds-grid_vertical-align-end` | Align columns to bottom (`align-items: flex-end`) |
| `slds-grid_vertical-stretch` | Stretch columns to fill height (`align-items: stretch`) |

### Individual Column Alignment
| Class | Purpose |
|-------|---------|
| `slds-align-top` | Align individual column to top (`align-self: flex-start`) |
| `slds-align-middle` | Align individual column to middle (`align-self: center`) |
| `slds-align-bottom` | Align individual column to bottom (`align-self: flex-end`) |

## Column Flex Control

| Class | Purpose |
|-------|---------|
| `slds-grow` | Allow column to grow (`flex-grow: 1`) |
| `slds-grow-none` | Prevent column from growing (`flex-grow: 0`) |
| `slds-shrink` | Allow column to shrink (`flex-shrink: 1`) |
| `slds-shrink-none` | Prevent column from shrinking (`flex-shrink: 0`) |
| `slds-no-flex` | Remove flexbox from column (`flex: none`) |
| `slds-no-space` | Set column to min-width of 0 |
| `slds-has-flexi-truncate` | Enable truncation in flexible container (`flex: 1 1 0%; min-width: 0`) |

## Column Positioning

| Class | Purpose |
|-------|---------|
| `slds-col_bump-top` | Push column to top using `margin-block-start: auto` |
| `slds-col_bump-right` | Push column to right using `margin-inline-end: auto` |
| `slds-col_bump-bottom` | Push column to bottom using `margin-block-end: auto` |
| `slds-col_bump-left` | Push column to left using `margin-inline-start: auto` |

## Column Borders

| Class | Purpose |
|-------|---------|
| `slds-col_rule-top` | Add 1px border to top side (large screens only) |
| `slds-col_rule-right` | Add 1px border to right side (large screens only) |
| `slds-col_rule-bottom` | Add 1px border to bottom side (large screens only) |
| `slds-col_rule-left` | Add 1px border to left side (large screens only) |

## Container Sizing

| Class | Max Width | Purpose |
|-------|-----------|---------|
| `slds-container_small` | 480px | Restrict width for small content |
| `slds-container_medium` | 768px | Restrict width for medium content |
| `slds-container_large` | 1024px | Restrict width for large content |
| `slds-container_x-large` | 1280px | Restrict width for extra large content |
| `slds-container_fluid` | 100% | Full viewport width |

### Container Positioning
| Class | Purpose |
|-------|---------|
| `slds-container_center` | Center container horizontally |
| `slds-container_left` | Left align container |
| `slds-container_right` | Right align container |

## Pull Padded Utilities

| Class | Purpose |
|-------|---------|
| `slds-grid_pull-padded` | Normalize 12px padding when nesting |
| `slds-grid_pull-padded-xxx-small` | Normalize 2px padding |
| `slds-grid_pull-padded-xx-small` | Normalize 4px padding |
| `slds-grid_pull-padded-x-small` | Normalize 8px padding |
| `slds-grid_pull-padded-small` | Normalize 12px padding |
| `slds-grid_pull-padded-medium` | Normalize 16px padding |
| `slds-grid_pull-padded-large` | Normalize 24px padding |
| `slds-grid_pull-padded-x-large` | Normalize 32px padding |
| `slds-grid_pull-padded-xx-large` | Normalize 48px padding |

## Common Patterns

### Basic Three-Column Grid
```html
<!-- Equal width columns with gutters -->
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-3">
    Column 1 content
  </div>
  <div class="slds-col slds-size_1-of-3">
    Column 2 content
  </div>
  <div class="slds-col slds-size_1-of-3">
    Column 3 content
  </div>
</div>
```

### Responsive Card Layout
```html
<!-- Mobile: full width, Tablet: half width, Desktop: third width -->
<div class="slds-grid slds-wrap slds-gutters_small">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
    <article class="slds-card">Card 1</article>
  </div>
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
    <article class="slds-card">Card 2</article>
  </div>
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
    <article class="slds-card">Card 3</article>
  </div>
</div>
```

### Centered Modal Dialog
```html
<!-- Vertically and horizontally centered content -->
<div class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-grid_frame">
  <div class="slds-col slds-container_small">
    <section class="slds-modal__container">
      Modal content here
    </section>
  </div>
</div>
```

### Sidebar Layout with Auto-push
```html
<!-- Sidebar with main content pushed to opposite side -->
<div class="slds-grid slds-gutters">
  <nav class="slds-col slds-size_3-of-12">
    Sidebar navigation
  </nav>
  <main class="slds-col slds-col_bump-left">
    <!-- bump-left creates margin-inline-start: auto -->
    Main content area
  </main>
</div>
```

### Nested Grid with Direct Gutters
```html
<!-- Parent grid with nested grid using direct gutters -->
<div class="slds-grid slds-wrap slds-gutters_direct-medium">
  <div class="slds-col slds-size_1-of-2">
    <div class="slds-grid slds-wrap slds-gutters_direct-small">
      <div class="slds-col slds-size_1-of-2">Nested 1</div>
      <div class="slds-col slds-size_1-of-2">Nested 2</div>
    </div>
  </div>
  <div class="slds-col slds-size_1-of-2">
    Parent column 2
  </div>
</div>
```

## Best Practices

✅ Use `slds-wrap` for responsive card layouts that need to stack on mobile
✅ Start mobile-first with `slds-size_1-of-1` then add breakpoint-specific sizes
✅ Use `slds-gutters_small` (24px) for standard spacing between columns
✅ Apply `slds-has-flexi-truncate` when text needs to truncate within flexible columns
✅ Use `slds-container_center` with `slds-container_large` for centered page layouts
✅ Apply `slds-grid_pull-padded` when nesting grids to maintain visual alignment

❌ Avoid nesting grids more than 2 levels deep
❌ Never use `slds-col` without a parent `slds-grid`
❌ Avoid mixing grid utilities with float-based layouts
❌ Never combine `slds-grid_align-spread` with `slds-gutters` (creates double spacing)

## Deprecated Utilities

The following grid utilities are deprecated. Use the specified replacements.

### Responsive Nowrap Classes
| Deprecated | Replacement |
|------------|-------------|
| `slds-nowrap_small` | Use responsive grid classes instead |
| `slds-nowrap_medium` | Use responsive grid classes instead |
| `slds-nowrap_large` | Use responsive grid classes instead |

### Column Padding Classes
| Deprecated | Replacement |
|------------|-------------|
| `slds-col_padded` | Use `slds-p-horizontal_small` |
| `slds-col_padded-medium` | Use `slds-p-horizontal_medium` |
| `slds-col_padded-large` | Use `slds-p-horizontal_large` |
| `slds-col_padded-around` | Use `slds-p-around_small` |
| `slds-col_padded-around-medium` | Use `slds-p-around_medium` |
| `slds-col_padded-around-large` | Use `slds-p-around_large` |

Note: Column sizing utilities (`slds-size_*`) are defined in the [Sizing Utilities](ref:slds.guidance.utilities.sizing) category, not grid utilities.

---
id: slds.guidance.utilities.horizontal-list
title: Horizontal List Utilities
description: SLDS horizontal list utility classes
summary: "Utilities for horizontal lists with flexbox and divider variants."

artifact_type: reference
domain: utilities
topic: horizontal-list

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities

tags: [utilities, horizontal-list, flexbox, dividers]
keywords: [slds-list_horizontal, slds-has-dividers_left, slds-has-dividers_right, horizontal list, list dividers]
---

# Horizontal List - Flexbox Lists with Dividers

Creating horizontal lists with flexbox layout and optional dividers.

**Note:** Divider classes require the `slds-list_horizontal` base class and must use directional variants (`_left` or `_right`).

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-list_horizontal` | Creates a flex container for horizontal list layout |
| `slds-list_horizontal-large` | Adds padding to child links (12px block, 16px inline) |
| `slds-has-dividers_left` | Adds 2px circular dividers on the left side of items (requires `slds-list_horizontal`) |
| `slds-has-dividers_right` | Adds 2px circular dividers on the right side of items (requires `slds-list_horizontal`) |

## Common Patterns

### Basic Horizontal List
```html
<!-- Simple horizontal list with flexbox layout -->
<ul class="slds-list_horizontal">
  <li class="slds-list__item">Home</li>
  <li class="slds-list__item">Products</li>
  <li class="slds-list__item">Services</li>
  <li class="slds-list__item">Contact</li>
</ul>
```

### Horizontal List with Left Dividers
```html
<!-- Horizontal list with dot dividers on the left of each item -->
<ul class="slds-list_horizontal slds-has-dividers_left">
  <li class="slds-list__item">View All</li>
  <li class="slds-list__item">Recently Viewed</li>
  <li class="slds-list__item">Created by Me</li>
</ul>
```

### Large Horizontal List with Links
```html
<!-- Large variant with padding on anchor elements -->
<ul class="slds-list_horizontal slds-list_horizontal-large">
  <li class="slds-list__item">
    <a href="/home">Home</a>
  </li>
  <li class="slds-list__item">
    <a href="/about">About</a>
  </li>
  <li class="slds-list__item">
    <a href="/contact">Contact</a>
  </li>
</ul>
```

### List with Left-side Dividers and Large Spacing
```html
<!-- Dividers appear on the left of each item with large padding -->
<ul class="slds-list_horizontal slds-list_horizontal-large slds-has-dividers_left">
  <li class="slds-list__item"><a href="/first">First Item</a></li>
  <li class="slds-list__item"><a href="/second">Second Item</a></li>
  <li class="slds-list__item"><a href="/third">Third Item</a></li>
</ul>
```

### List with Right-side Dividers
```html
<!-- Dividers appear on the right of each item except last -->
<ul class="slds-list_horizontal slds-has-dividers_right">
  <li class="slds-list__item">Option A</li>
  <li class="slds-list__item">Option B</li>
  <li class="slds-list__item">Option C</li>
</ul>
```

## Best Practices

✅ Use `slds-list_horizontal` on the list container (`<ul>` or `<ol>`)
✅ Apply `slds-list__item` to each list item for proper structure
✅ Use `slds-has-dividers_left` or `slds-has-dividers_right` with `slds-list_horizontal` for dividers
✅ Use `slds-list_horizontal-large` when links need 12px vertical and 16px horizontal padding
✅ Divider classes always require the `slds-list_horizontal` base class

❌ Do not combine multiple divider classes on the same element
❌ Do not apply horizontal list classes to non-list elements
❌ Do not nest horizontal lists without proper spacing
❌ Do not override the 2px divider size with custom CSS

---
id: slds.guidance.utilities.hyphenation
title: Hyphenation Utilities
description: SLDS hyphenation utility class
summary: "Utility for text wrapping and hyphenation. Enables automatic word breaking in narrow containers."

artifact_type: reference
domain: utilities
topic: hyphenation

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.truncate

tags: [utilities, hyphenation, text-wrapping, word-break]
keywords: [slds-hyphenate, hyphenation, word-wrap, overflow-wrap]
---

# Hyphenation - Text Wrapping

Enabling automatic text hyphenation and word breaking in narrow width containers.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-hyphenate` | Enables text hyphenation with word-wrapping fallbacks for narrow containers |

## Common Patterns

```html
<!-- Long text in narrow column -->
<div class="slds-size_1-of-3">
  <p class="slds-hyphenate">
    Supercalifragilisticexpialidocious text that needs to break appropriately.
  </p>
</div>

<!-- Table cell with potential long words -->
<td class="slds-cell-wrap">
  <span class="slds-hyphenate">
    VeryLongProductNameWithoutSpaces
  </span>
</td>

<!-- Card header with constrained width -->
<div class="slds-card__header">
  <h2 class="slds-text-heading_small slds-hyphenate">
    ExtremelyLongTitleThatMightOverflow
  </h2>
</div>

<!-- Form label in narrow sidebar -->
<div class="slds-form-element">
  <label class="slds-form-element__label slds-hyphenate">
    InternationalizationConfiguration
  </label>
</div>

<!-- Modal title with potential overflow -->
<div class="slds-modal__header">
  <h2 class="slds-text-heading_medium slds-hyphenate">
    SuperLongModalTitleForConfiguration
  </h2>
</div>
```

## Best Practices

✅ Use on text that might contain long words without spaces
✅ Apply to elements in narrow width containers
✅ Use with non-truncated text that needs to remain visible
✅ Combine with responsive grid columns where text might overflow

❌ Don't use with [Truncate Utilities](ref:slds.guidance.utilities.truncate) (choose one strategy)
❌ Don't apply to elements with fixed widths larger than their containers
❌ Don't use on numeric data or codes that shouldn't break

---
id: slds.guidance.utilities
title: SLDS Utility Classes Index
description: Category index of SLDS utility classes for rapid styling
summary: "Index of all SLDS utility classes across 26 categories including grid, spacing, sizing, typography, visibility, borders, and positioning. Provides quick access by need and common usage patterns."

artifact_type: index
domain: utilities
topic: utilities

content_format: structured
complexity: foundational
audience: [implementer]

tasks: [choose, implement]

tags: [utilities, css-classes, layout, spacing, typography]
keywords: [utility classes, grid, spacing, sizing, typography, visibility, borders, position, truncate]

refs:
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.color
  - slds.guidance.utilities.alignment
  - slds.guidance.utilities.borders
  - slds.guidance.utilities.box
  - slds.guidance.utilities.color
  - slds.guidance.utilities.dark-mode
  - slds.guidance.utilities.description-list
  - slds.guidance.utilities.floats
  - slds.guidance.utilities.grid
  - slds.guidance.utilities.horizontal-list
  - slds.guidance.utilities.hyphenation
  - slds.guidance.utilities.interactions
  - slds.guidance.utilities.layout
  - slds.guidance.utilities.line-clamp
  - slds.guidance.utilities.margin
  - slds.guidance.utilities.media-object
  - slds.guidance.utilities.name-value-list
  - slds.guidance.utilities.padding
  - slds.guidance.utilities.position
  - slds.guidance.utilities.print
  - slds.guidance.utilities.scrollable
  - slds.guidance.utilities.sizing
  - slds.guidance.utilities.themes
  - slds.guidance.utilities.truncate
  - slds.guidance.utilities.typography
  - slds.guidance.utilities.vertical-list
  - slds.guidance.utilities.visibility
---

# SLDS Utility Classes - Category Index

**26 categories** of utility classes for rapid styling without custom CSS.

## Layout & Positioning (6)

### [Grid](./grid.md)
Flexbox layout system for responsive grids. Use `slds-grid` + `slds-col` + `slds-wrap`.

### [Position](./position.md)
CSS positioning: `slds-is-relative`, `slds-is-absolute`, `slds-is-fixed`. For dropdowns, modals, overlays.

### [Scrollable](./scrollable.md)
`slds-scrollable`, `slds-scrollable_x`, `slds-scrollable_y` for scrollable containers.

### [Floats](./floats.md)
`slds-float_left`, `slds-float_right`. Legacy - prefer Grid.

### [Alignment](./alignment.md)
`slds-align_absolute-center` for centering content.

### [Layout](./layout.md)
`slds-has-buffer`, `slds-has-full-bleed` for global spacing.

## Spacing (2) - Most Used

### [Margin](./margin.md)
`slds-m-[direction]_[size]` for all margin directions and sizes.
Scale: `none`, `xxx-small` (2px) to `xx-large` (48px)

### [Padding](./padding.md)
`slds-p-[direction]_[size]` for all padding directions and sizes.
Scale: `none`, `xxx-small` (2px) to `xx-large` (48px)

## Sizing (1)

### [Sizing](./sizing.md)
Fractional widths: `slds-size_1-of-2` (50%), `slds-size_1-of-3` (33%)  
Responsive: `slds-small-size_*`, `slds-medium-size_*`, `slds-large-size_*`  
Full width: `slds-width_full`

## Typography (4)

### [Typography](./typography.md)
Headings: `slds-text-heading_large/medium/small`  
Body: `slds-text-body_regular/small`  
Colors: `slds-text-color_weak/error/success`  
Alignment: `slds-text-align_left/center/right`

### [Truncate](./truncate.md)
Single-line: `slds-truncate` (with `title` attribute)
Partial: `slds-truncate_container_25/50/75`

### [Line Clamp](./line-clamp.md)
Multi-line truncation:
- `slds-line-clamp` - 3 lines (default)
- `slds-line-clamp_x-small` - 2 lines
- `slds-line-clamp_medium` - 5 lines
- `slds-line-clamp_large` - 7 lines

### [Hyphenation](./hyphenation.md)
`slds-hyphenate` for long word breaking.

## Visual Styling (6)

### [Color](./color.md)
`slds-color__text_gray-1` through `gray-12`
`slds-color__background_gray-1` through `gray-12`
**Prefer** styling hooks for colors.

### [Borders](./borders.md)
**Borders**: `slds-border_top/bottom/left/right` for directional borders.

### [Box](./box.md)
`slds-box`, `slds-box_small/large` for bordered containers.

### [Themes](./themes.md)
`slds-theme_default`, `slds-theme_shade`, `slds-theme_inverse` for themed containers.

### [Visibility](./visibility.md)
Show/hide: `slds-show`, `slds-hide`
Responsive: `slds-show_medium`, `slds-hide_medium`
Screen reader: `slds-assistive-text`
Collapsed: `slds-is-collapsed`, `slds-is-expanded`

### [Dark Mode](./dark-mode.md)
Future dark mode support (currently use styling hooks).

## Specialized (5)

### [Description List](./description-list.md)
`slds-dl_horizontal`, `slds-dl_inline` for name-value pairs.

### [Media Object](./media-object.md)
`slds-media`, `slds-media__figure`, `slds-media__body` for image+text layouts.

### [Name-Value List](./name-value-list.md)
`slds-item_label`, `slds-item_detail` for structured data.

### [Horizontal List](./horizontal-list.md)
`slds-list_horizontal`, `slds-list__item` for inline lists.

### [Vertical List](./vertical-list.md)
`slds-list__item`, `slds-has-divider`, `slds-is-selected` for navigation/lists.

## Special Purpose (2)

### [Interactions](./interactions.md)
`slds-text-link`, `slds-text-link_reset`, `slds-has-blur-focus` for interactive elements.

### [Print](./print.md)
`slds-no-print` hides elements when printing.

---

## Quick Access by Need

**Layout**: [Grid](./grid.md) • [Position](./position.md) • [Sizing](./sizing.md) • [Alignment](./alignment.md) • [Layout](./layout.md)
**Spacing**: [Margin](./margin.md) • [Padding](./padding.md)
**Text**: [Typography](./typography.md) • [Truncate](./truncate.md) • [Line Clamp](./line-clamp.md) • [Hyphenation](./hyphenation.md)
**Display**: [Visibility](./visibility.md) • [Print](./print.md)
**Style**: [Borders](./borders.md) • [Box](./box.md) • [Color](./color.md) • [Themes](./themes.md)
**Lists**: [Horizontal List](./horizontal-list.md) • [Vertical List](./vertical-list.md) • [Name-Value List](./name-value-list.md) • [Description List](./description-list.md) • [Media Object](./media-object.md)
**Interactive**: [Interactions](./interactions.md)
**Scrolling**: [Scrollable](./scrollable.md) • [Floats](./floats.md)
**Theme**: [Dark Mode](./dark-mode.md)

## Usage Patterns

**Card Layout**:
```html
<div class="slds-card slds-m-bottom_medium">
  <div class="slds-card__body slds-p-around_medium">
    Content
  </div>
</div>
```

**Responsive Grid**:
```html
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3">
    Column
  </div>
</div>
```

**Typography**:
```html
<h1 class="slds-text-heading_large slds-m-bottom_medium">Title</h1>
<p class="slds-text-body_regular slds-text-color_weak">Description</p>
```

For detailed guidance on any category, see the linked category guides.

---
id: slds.guidance.utilities.interactions
title: Interactions Utilities
description: SLDS link reset, faux link, and focus state utility classes
summary: "Utilities for link resets, faux links, and focus states. Enables custom link styling and accessible focus indicators."

artifact_type: reference
domain: utilities
topic: interactions

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.typography

tags: [utilities, interactions, links, focus, accessibility]
keywords: [slds-text-link, slds-has-blur-focus, slds-text-link_reset, slds-text-link_faux]
---

# Interactions - Links & Focus States

Managing link appearance, creating faux links, and implementing accessible focus states.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-text-link_reset` | Makes links and buttons appear as regular text |
| `slds-text-link` | Restores link styling inside `slds-text-link_reset` |
| `slds-text-link_faux` | Creates underline-on-hover for non-anchor elements |
| `slds-type-focus` | Legacy alias for slds-text-link_faux |
| `slds-has-blur-focus` | Adds accessible blurred outline on focus |
| `slds-has-input-focus` | JavaScript-applied focus state for input containers |

## Common Patterns

```html
<!-- Reset link to look like plain text -->
<a href="/path" class="slds-text-link_reset">
  This link looks like regular text
</a>

<!-- Reset with partial link styling restored -->
<a href="/article" class="slds-text-link_reset">
  This article discusses important topics
  <span class="slds-text-link">Read more</span>
</a>

<!-- Faux link on heading + button combo -->
<div class="slds-page-header__name">
  <h1 class="slds-page-header__title slds-text-link_faux">
    Account Name
  </h1>
  <button class="slds-button slds-button_icon slds-text-link_faux">
    <svg class="slds-button__icon">...</svg>
  </button>
</div>

<!-- Accessible blur focus on custom button -->
<button class="slds-button slds-has-blur-focus">
  Custom Action
</button>

<!-- Input container with JavaScript focus state -->
<div class="slds-form-element__control" id="input-container">
  <input class="slds-input"
         onfocus="document.getElementById('input-container').classList.add('slds-has-input-focus')"
         onblur="document.getElementById('input-container').classList.remove('slds-has-input-focus')" />
</div>
```

## Best Practices

✅ Use `slds-text-link_reset` to remove default link styling
✅ Use `slds-text-link_faux` for non-anchor elements that need link behavior
✅ Use `slds-has-blur-focus` for keyboard navigation accessibility
✅ Apply `slds-has-input-focus` via JavaScript when input receives focus
✅ Combine `slds-text-link_reset` with `slds-text-link` for partial link styling

❌ Don't use `slds-text-link_faux` on actual anchor elements
❌ Don't forget to handle both focus and blur events for `slds-has-input-focus`
❌ Don't remove focus indicators without providing alternatives
❌ Don't apply multiple interaction utilities to the same element

---
id: slds.guidance.utilities.layout
title: Layout Utilities
description: SLDS layout utility classes for global spacing and component connection
summary: "Utilities for global spacing (has-buffer, has-full-bleed, magnet utilities). Provides consistent buffer margins, full-bleed layouts, and seamless card connections."

artifact_type: reference
domain: utilities
topic: layout

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.spacing

tags: [utilities, layout, spacing, magnet]
keywords: [slds-has-buffer, slds-has-full-bleed, slds-has-magnet]
---

# Layout - Global Spacing & Component Connection

Global spacing management and seamless component connections.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-has-buffer` | Applies consistent global margin using `--slds-g-spacing-3` token |
| `slds-has-full-bleed` | Removes all margins to create full-bleed layouts |
| `slds-has-bottom-magnet` | Removes bottom margin and border radius to connect with element below |
| `slds-has-top-magnet` | Removes top margin and border radius to connect with element above |

## Common Patterns

### Standard Buffer Spacing
```html
<!-- Apply consistent spacing around cards -->
<div class="slds-card slds-has-buffer">
  <div class="slds-card__header">Card with buffer margin</div>
  <div class="slds-card__body">Content has global spacing on all sides</div>
</div>
```

### Full-Bleed Hero Section
```html
<!-- Remove margins for edge-to-edge layouts -->
<div class="slds-page-header slds-has-full-bleed">
  <div class="slds-page-header__row">
    <div class="slds-page-header__col-title">Full-width header with no margins</div>
  </div>
</div>
```

### Connected Card Components
```html
<!-- Connect two cards vertically without gap -->
<div class="slds-card slds-has-bottom-magnet">
  <div class="slds-card__header">First Card</div>
  <div class="slds-card__body">This card connects to the one below</div>
</div>
<div class="slds-card slds-has-top-magnet">
  <div class="slds-card__header">Second Card</div>
  <div class="slds-card__body">Appears seamlessly connected to card above</div>
</div>
```

### Multiple Connected Components
```html
<!-- Chain multiple cards together -->
<div class="slds-box slds-has-bottom-magnet">
  <h2>Section Header</h2>
</div>
<div class="slds-card slds-has-top-magnet slds-has-bottom-magnet">
  <div class="slds-card__body">Middle card connected on both sides</div>
</div>
<div class="slds-box slds-has-top-magnet">
  <p>Footer content</p>
</div>
```

### Combined Buffer and Magnet
```html
<!-- Use buffer with magnet for special layouts -->
<div class="slds-card slds-has-buffer slds-has-bottom-magnet">
  <div class="slds-card__body">Card with side margins but connected below</div>
</div>
<div class="slds-card slds-has-top-magnet slds-has-buffer">
  <!-- Special case: removes bottom margin, border-radius, top border, and box-shadow -->
  <div class="slds-card__body">Connected card with modified buffer behavior</div>
</div>
```

## Best Practices

✅ Use `slds-has-buffer` on cards and boxes for consistent component spacing
✅ Apply magnet utilities to Cards, Page Headers, and Box components
✅ Use `slds-has-bottom-magnet` on the top component and `slds-has-top-magnet` on the bottom component
✅ Use `slds-has-full-bleed` for hero sections and full-width backgrounds

❌ Avoid using magnet utilities on non-card-like elements
❌ Do not mix magnet utilities with custom margin styles
❌ Never apply `slds-has-full-bleed` to components that need spacing
❌ Do not use magnet utilities when visual separation is needed

---
id: slds.guidance.utilities.line-clamp
title: Line-clamp Utilities
description: SLDS line-clamp utility classes for multi-line text truncation
summary: "Utilities for multi-line text truncation (2-7 lines). Provides controlled text overflow with ellipsis for readable content length management."

artifact_type: reference
domain: utilities
topic: line-clamp

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.truncate

tags: [utilities, line-clamp, truncation, text]
keywords: [slds-line-clamp, text-truncation, ellipsis, multi-line]
---

# Line Clamp - Multi-line Text Truncation

Controlled multi-line text truncation with ellipsis.

## Line Limit Scale

| Class | Lines | Use Case |
|-------|-------|----------|
| `slds-line-clamp` | 3 lines | Default truncation for card descriptions |
| `slds-line-clamp_x-small` | 2 lines | Compact list items and previews |
| `slds-line-clamp_small` | 3 lines | Standard card and tile descriptions |
| `slds-line-clamp_medium` | 5 lines | Extended previews and summaries |
| `slds-line-clamp_large` | 7 lines | Long-form content with controlled height |

## Common Patterns

### Card Description Truncation
```html
<!-- Standard 3-line truncation for card descriptions -->
<div class="slds-card">
  <div class="slds-card__body">
    <p class="slds-line-clamp">
      This is a long description that will be truncated after three lines
      of text. Any content beyond the third line will be hidden with an
      ellipsis to indicate more content is available.
    </p>
  </div>
</div>
```

### Compact List Item Preview
```html
<!-- 2-line truncation for list items -->
<ul class="slds-has-dividers_bottom">
  <li class="slds-item">
    <div class="slds-line-clamp_x-small">
      Item description that displays only two lines before truncating
      with ellipsis for space-efficient list layouts.
    </div>
  </li>
</ul>
```

### Extended Article Summary
```html
<!-- 5-line truncation for article previews -->
<article class="slds-box">
  <h3 class="slds-text-heading_small">Article Title</h3>
  <div class="slds-line-clamp_medium">
    This article summary can display up to five lines of content before
    truncation occurs. This provides enough context for readers to understand
    the main points while maintaining consistent layout height across
    multiple article cards in a grid or list view.
  </div>
</article>
```

### Long-form Content Preview
```html
<!-- 7-line truncation for detailed previews -->
<div class="slds-panel">
  <div class="slds-panel__body">
    <div class="slds-line-clamp_large">
      Extended content preview that allows up to seven lines of text
      to be displayed. This is useful for detailed descriptions,
      documentation excerpts, or any scenario where more context is
      beneficial while still maintaining a maximum height constraint
      for consistent layouts across different content lengths.
    </div>
  </div>
</div>
```

### Responsive Text Truncation
```html
<!-- Different truncation levels for different contexts -->
<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-2">
    <h4>Product Name</h4>
    <p class="slds-line-clamp_x-small">
      Brief product description limited to two lines
    </p>
  </div>
  <div class="slds-col slds-size_1-of-2">
    <h4>Product Details</h4>
    <p class="slds-line-clamp_medium">
      More detailed product information that can extend
      up to five lines before being truncated
    </p>
  </div>
</div>
```

## Best Practices

✅ Apply line-clamp classes directly to text elements (`<p>`, `<div>`, `<span>`)
✅ Use `slds-line-clamp_x-small` (2 lines) for compact layouts and list items
✅ Use `slds-line-clamp` or `slds-line-clamp_small` (3 lines) for standard card descriptions
✅ Use `slds-line-clamp_medium` (5 lines) for extended previews
✅ Test truncation with actual content to ensure readability
✅ Provide "Show More" functionality when truncated content needs full access

❌ Do not apply to container elements with HTML children
❌ Never use on elements containing interactive components
❌ Do not rely on line-clamp for IE11 support (uses -webkit-line-clamp)
❌ Avoid using with single-line truncation (use [Truncate Utilities](ref:slds.guidance.utilities.truncate) instead)

---
id: slds.guidance.utilities.margin
title: Margin Utilities
description: SLDS margin utility classes for external spacing
summary: "Utilities for external spacing. Includes directional (top/right/bottom/left), aggregate (horizontal/vertical/around), and variable density classes. Base unit 4px with sizes from xxx-small (2px) to xx-large (48px)."

artifact_type: reference
domain: utilities
topic: margin

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.padding
  - slds.guidance.hooks.spacing

tags: [utilities, margin, spacing, external-spacing]
keywords: [slds-m, margin, external spacing, whitespace]
---

# Margin - External Spacing

External spacing between elements. Base unit: **4px**.

## Size Scale

| Size | Class Suffix | Value | Pixels |
|------|-------------|-------|--------|
| None | `none` | 0 | 0px |
| XXX Small | `xxx-small` | 0.125rem | 2px |
| XX Small | `xx-small` | 0.25rem | 4px |
| X Small | `x-small` | 0.5rem | 8px |
| Small | `small` | 0.75rem | 12px |
| Medium | `medium` | 1rem | 16px |
| Large | `large` | 1.5rem | 24px |
| X Large | `x-large` | 2rem | 32px |
| XX Large | `xx-large` | 3rem | 48px |

## Core Classes

### Directional Margins

| Class | Purpose |
|-------|---------|
| `slds-m-top_*` | Applies margin to the top edge |
| `slds-m-right_*` | Applies margin to the right edge |
| `slds-m-bottom_*` | Applies margin to the bottom edge |
| `slds-m-left_*` | Applies margin to the left edge |

### Aggregate Margins

| Class | Purpose |
|-------|---------|
| `slds-m-horizontal_*` | Applies margin to left and right edges |
| `slds-m-vertical_*` | Applies margin to top and bottom edges |
| `slds-m-around_*` | Applies margin to all four edges |

### Variable Density Classes

| Class | Purpose | Comfy | Compact |
|-------|---------|-------|---------|
| `slds-var-m-top_*` | Variable density top margin | Full size | 50% size |
| `slds-var-m-right_*` | Variable density right margin | Full size | 50% size |
| `slds-var-m-bottom_*` | Variable density bottom margin | Full size | 50% size |
| `slds-var-m-left_*` | Variable density left margin | Full size | 50% size |
| `slds-var-m-horizontal_*` | Variable density horizontal margins | Full size | 50% size |
| `slds-var-m-vertical_*` | Variable density vertical margins | Full size | 50% size |
| `slds-var-m-around_*` | Variable density all sides | Full size | 50% size |

## Common Patterns

```html
<!-- Card stack with consistent spacing -->
<div class="slds-card slds-m-bottom_medium">
  <!-- Card content -->
</div>
<div class="slds-card slds-m-bottom_medium">
  <!-- Card content -->
</div>
<div class="slds-card">
  <!-- Last card needs no bottom margin -->
</div>

<!-- Button group with horizontal spacing -->
<div class="slds-button-group">
  <button class="slds-button slds-button_neutral">Cancel</button>
  <button class="slds-button slds-button_brand slds-m-left_small">Save</button>
  <button class="slds-button slds-button_brand slds-m-left_small">Save & New</button>
</div>

<!-- Page sections with vertical rhythm -->
<section class="slds-m-vertical_large">
  <h2 class="slds-text-heading_medium slds-m-bottom_small">Section Title</h2>
  <div class="slds-m-bottom_medium">
    <!-- Section content -->
  </div>
</section>

<!-- Responsive form layout with variable density -->
<div class="slds-form-element slds-var-m-bottom_medium">
  <label class="slds-form-element__label">Field Label</label>
  <input class="slds-input" />
</div>
<div class="slds-form-element slds-var-m-bottom_medium">
  <label class="slds-form-element__label">Another Field</label>
  <input class="slds-input" />
</div>

<!-- Remove default margins when needed -->
<ul class="slds-m-around_none">
  <li>List item without inherited margins</li>
  <li>Another item</li>
</ul>
```

## Implementation Guidelines

### Standard Spacing Values

| Context | Recommended Class | Size |
|---------|------------------|------|
| Between cards/tiles | `slds-m-bottom_medium` | 16px |
| Between buttons | `slds-m-left_small` | 12px |
| Between form fields | `slds-m-bottom_medium` | 16px |
| Between page sections | `slds-m-vertical_large` | 24px |
| Icon to text | `slds-m-right_x-small` | 8px |
| Dense layouts | `slds-m-around_small` | 12px |
| Remove spacing | `slds-m-around_none` | 0px |

### Responsive Considerations

Use variable density classes for layouts that adapt to user preferences:
- Desktop comfy mode: Full spacing values
- Desktop compact mode: 50% reduced spacing
- Mobile: Consider using smaller sizes by default

## Best Practices

✅ Use `slds-m-bottom_medium` (16px) between stacked components
✅ Use `slds-m-left_small` (12px) between inline buttons
✅ Use `slds-m-vertical_large` (24px) between major page sections
✅ Use `slds-m-around_none` to remove default element margins
✅ Use variable density classes (`slds-var-m-*`) for responsive layouts
✅ Apply margins to the element that needs spacing from its siblings

❌ Don't use margins larger than `xx-large` (48px)
❌ Don't apply both top and bottom margins when one suffices
❌ Don't mix standard and variable density classes on the same element
❌ Don't use margin for internal spacing - use [Padding Utilities](ref:slds.guidance.utilities.padding) instead

---
id: slds.guidance.utilities.media-object
title: Media Object Utilities
description: SLDS media object utility classes for image and text layouts
summary: "Utilities for image+text layouts. Provides flexible pairing of media elements (icons/images) with text content. Includes size variants (small/large), positioning (left/right/center), and responsive stacking."

artifact_type: reference
domain: utilities
topic: media-object

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.spacing

tags: [utilities, media-object, layout, flexbox]
keywords: [slds-media, media object, figure, image layout]
---

# Media Object - Image & Text Layouts

Flexible image and text pairing layouts using flexbox.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-media` | Creates flex container for media object layout |
| `slds-media__figure` | Container for media element (image/icon/avatar) |
| `slds-media__body` | Container for text content next to figure |
| `slds-media__figure_reverse` | Positions figure on the right side instead of left |

## Size Variants

| Class | Purpose | Spacing |
|-------|---------|---------|
| `slds-media_small` | Reduces spacing between figure and body | 8px (`--slds-g-spacing-2`) |
| Default spacing | Standard spacing between figure and body | 12px (`--slds-g-spacing-3`) |
| `slds-media_large` | Increases spacing between figure and body | 20px (`--slds-g-spacing-5`) |

## Layout Modifiers

| Class | Purpose |
|-------|---------|
| `slds-media_center` | Vertically centers figure and body content |
| `slds-media_inline` | Makes body flow inline instead of taking full width |
| `slds-media_responsive` | Stacks figure above body on smaller screens |
| `slds-media__figure_fixed-width` | Sets fixed width on figure container (40px) |

## Common Patterns

```html
<!-- Basic media object with avatar and text -->
<div class="slds-media">
  <div class="slds-media__figure">
    <span class="slds-avatar slds-avatar_circle slds-avatar_medium">
      <img src="/avatar.jpg" alt="User" />
    </span>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-text-heading_small">John Smith</h3>
    <p class="slds-text-body_regular">Sales Representative</p>
  </div>
</div>

<!-- Vertically centered icon and text -->
<div class="slds-media slds-media_center">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-standard-account">
      <svg class="slds-icon slds-icon_small">
        <use href="/icons/standard-sprite.svg#account"></use>
      </svg>
    </span>
  </div>
  <div class="slds-media__body">
    <p>Acme Corporation</p>
  </div>
</div>

<!-- Figure on right side -->
<div class="slds-media">
  <div class="slds-media__body">
    <h4>Notification Settings</h4>
    <p>Email notifications are enabled</p>
  </div>
  <div class="slds-media__figure slds-media__figure_reverse">
    <button class="slds-button slds-button_icon">
      <svg class="slds-button__icon">
        <use href="/icons/utility-sprite.svg#settings"></use>
      </svg>
    </button>
  </div>
</div>

<!-- Small spacing variant for compact lists -->
<ul>
  <li class="slds-media slds-media_small">
    <div class="slds-media__figure">
      <span class="slds-icon_container">
        <svg class="slds-icon slds-icon_x-small">
          <use href="/icons/utility-sprite.svg#file"></use>
        </svg>
      </span>
    </div>
    <div class="slds-media__body">
      <span>Document.pdf</span>
    </div>
  </li>
</ul>

<!-- Responsive stacking for mobile -->
<div class="slds-media slds-media_responsive">
  <div class="slds-media__figure">
    <img src="/product.jpg" alt="Product" width="120" />
  </div>
  <div class="slds-media__body">
    <h3>Product Name</h3>
    <p>Product description that will stack below image on mobile devices</p>
  </div>
</div>
```

## Implementation Guidelines

### Component Combinations

| Use Case | Classes | Description |
|----------|---------|-------------|
| Avatar with name | `slds-media` | Standard user profile display |
| Icon with label | `slds-media slds-media_center slds-media_small` | Compact icon labels |
| Product image with details | `slds-media slds-media_large` | E-commerce layouts |
| Notification with action | `slds-media` + `slds-media__figure_reverse` | Action button on right |
| Mobile-friendly layout | `slds-media slds-media_responsive` | Stacks on small screens |

### Spacing Guidelines

| Context | Recommended Variant | Gap Size |
|---------|-------------------|----------|
| List items | `slds-media_small` | 8px |
| Standard cards | Default (no modifier) | 12px |
| Featured content | `slds-media_large` | 20px |

## Best Practices

✅ Use `slds-media__body` for text content to enable proper truncation
✅ Use `slds-media_center` when icon and text should align middle
✅ Use `slds-media_small` for compact list items
✅ Use `slds-media_responsive` for mobile-optimized layouts
✅ Place avatars and icons in `slds-media__figure`
✅ Use `min-width: 0` on body for text truncation support

❌ Don't nest media objects more than 2 levels deep
❌ Don't use media objects for complex grid layouts
❌ Don't forget `slds-media__figure` wrapper for images
❌ Don't apply spacing utilities directly to figure or body

---
id: slds.guidance.utilities.name-value-list
title: Name-Value List Utilities
description: SLDS name-value list utility classes for structured data display
summary: "Utilities for structured data lists (labels and details). Creates horizontal, vertical, and inline label-value pair layouts."

artifact_type: reference
domain: utilities
topic: name-value-list

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.spacing

tags: [utilities, name-value-list, data-display, lists]
keywords: [slds-list_horizontal, slds-list_vertical, slds-list_inline, slds-item_label, slds-item_detail]
---

# Name-Value List - Structured Data Display

Creating label-value pair layouts in horizontal, vertical, and inline configurations.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-list_horizontal` | Layout container for horizontal name-value pairs with 30/70 split |
| `slds-list_vertical` | Layout container for vertical (stacked) name-value pairs |
| `slds-list_inline` | Inline flex container for compact name-value pairs |
| `slds-item_label` | Label element with 30% width and right padding (12px) |
| `slds-item_detail` | Detail/value element with 70% width |

## Layout Variants

### Horizontal Layout (30/70 Split)
| Variant | Label Width | Detail Width | Spacing |
|---------|-------------|--------------|---------|
| `slds-list_horizontal` | 30% | 70% | 12px gap |

### Vertical Layout
| Variant | Display | Spacing |
|---------|---------|---------|
| `slds-list_vertical` | Block stacked | Default line height |

### Inline Layout
| Variant | Display | Max Width |
|---------|---------|-----------|
| `slds-list_inline` | `inline-flex` | 100% |

## Common Patterns

### Horizontal Name-Value List
```html
<!-- Standard 30/70 horizontal layout -->
<dl class="slds-list_horizontal">
  <dt class="slds-item_label">Account Name</dt>
  <dd class="slds-item_detail">Acme Corporation</dd>

  <dt class="slds-item_label">Account Type</dt>
  <dd class="slds-item_detail">Enterprise Customer</dd>

  <dt class="slds-item_label">Industry</dt>
  <dd class="slds-item_detail">Technology</dd>
</dl>
```

### Vertical Stacked List
```html
<!-- Vertical stacked layout for long content -->
<dl class="slds-list_vertical">
  <dt class="slds-item_label">Description</dt>
  <dd class="slds-item_detail">
    This is a detailed description that spans multiple lines
    and works better in a vertical layout.
  </dd>

  <dt class="slds-item_label">Notes</dt>
  <dd class="slds-item_detail">
    Additional notes and comments that may be lengthy.
  </dd>
</dl>
```

### Inline Compact List
```html
<!-- Inline layout for compact display -->
<dl class="slds-list_inline">
  <dt class="slds-item_label">Status:</dt>
  <dd class="slds-item_detail">Active</dd>

  <dt class="slds-item_label">Priority:</dt>
  <dd class="slds-item_detail">High</dd>
</dl>
```

### Mixed Layout in Card
```html
<!-- Name-value list within a card component -->
<article class="slds-card">
  <div class="slds-card__header">
    <h2>Contact Details</h2>
  </div>
  <div class="slds-card__body">
    <dl class="slds-list_horizontal">
      <dt class="slds-item_label">Name</dt>
      <dd class="slds-item_detail">John Smith</dd>

      <dt class="slds-item_label">Email</dt>
      <dd class="slds-item_detail">john.smith@example.com</dd>

      <dt class="slds-item_label">Phone</dt>
      <dd class="slds-item_detail">(555) 123-4567</dd>
    </dl>
  </div>
</article>
```

## Best Practices

✅ Use `slds-list_horizontal` for compact record details with short values
✅ Use `slds-list_vertical` for long text content or descriptions
✅ Use `slds-list_inline` for status indicators and brief metadata
✅ Use semantic `<dl>`, `<dt>`, `<dd>` elements for accessibility
✅ Apply `slds-item_label` to `<dt>` and `slds-item_detail` to `<dd>`
✅ Maintain the 30/70 ratio for horizontal layouts to ensure consistency

❌ Avoid using name-value lists for form inputs (use form layouts instead)
❌ Avoid mixing layout types within the same list
❌ Never omit `slds-item_label` or `slds-item_detail` classes
❌ Avoid horizontal layout for values longer than 2-3 lines

## Spacing Details

The name-value list utilities use these specific spacing tokens:
- **Horizontal gap**: `var(--slds-g-spacing-3)` (12px)
- **Inline spacing**: `var(--slds-g-spacing-3)` to `var(--slds-g-spacing-4)` (12-16px)
- **Label padding**: `padding-inline-end: var(--slds-g-spacing-3)` (12px right padding)

## Accessibility Notes

- Use `<dl>` (description list) as the container
- Use `<dt>` (description term) for labels with `slds-item_label`
- Use `<dd>` (description details) for values with `slds-item_detail`
- Screen readers announce the semantic relationship between labels and values
- Maintain logical reading order in the HTML structure

---
id: slds.guidance.utilities.padding
title: Padding Utilities
description: SLDS padding utility classes for internal spacing
summary: "Utilities for internal spacing within elements. Includes directional variants, size scale from xxx-small to xx-large, and variable density classes."

artifact_type: reference
domain: utilities
topic: padding

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.margin
  - slds.guidance.hooks.spacing

tags: [utilities, padding, spacing, internal-spacing]
keywords: [slds-p, slds-p-around, slds-p-horizontal, slds-p-vertical, padding]
---

# Padding - Internal Spacing

Internal spacing within elements. Base unit: **4px**.

## Size Scale

| Size | Token | Value | Pixels |
|------|-------|-------|--------|
| `none` | 0 | 0 | 0px |
| `xxx-small` | `--slds-g-spacing-1` | 0.125rem | 2px |
| `xx-small` | `--slds-g-spacing-2` | 0.25rem | 4px |
| `x-small` | `--slds-g-spacing-3` | 0.5rem | 8px |
| `small` | `--slds-g-spacing-4` | 0.75rem | 12px |
| `medium` | `--slds-g-spacing-5` | 1rem | 16px |
| `large` | `--slds-g-spacing-6` | 1.5rem | 24px |
| `x-large` | `--slds-g-spacing-7` | 2rem | 32px |
| `xx-large` | `--slds-g-spacing-8` | 3rem | 48px |

## Core Classes

### Directional Padding

| Class | Purpose |
|-------|---------|
| `slds-p-top_*` | Applies padding to element's top edge |
| `slds-p-right_*` | Applies padding to element's right edge |
| `slds-p-bottom_*` | Applies padding to element's bottom edge |
| `slds-p-left_*` | Applies padding to element's left edge |
| `slds-p-horizontal_*` | Applies padding to left and right edges |
| `slds-p-vertical_*` | Applies padding to top and bottom edges |
| `slds-p-around_*` | Applies padding to all four edges |

### Special Classes

| Class | Purpose |
|-------|---------|
| `slds-has-cushion` | Applies default padding of 12px (small) to all sides |

## Common Patterns

```html
<!-- Card with standard padding -->
<div class="slds-card">
  <div class="slds-card__header slds-p-around_medium">
    <!-- 16px padding on all sides -->
    Card Header
  </div>
  <div class="slds-card__body slds-p-horizontal_medium slds-p-vertical_small">
    <!-- 16px left/right, 12px top/bottom -->
    Card Content
  </div>
</div>

<!-- Button with extra padding -->
<button class="slds-button slds-button_neutral slds-p-horizontal_large">
  <!-- 24px left and right padding for wider button -->
  Wide Action Button
</button>

<!-- Form element spacing -->
<div class="slds-form-element slds-p-bottom_small">
  <!-- 12px bottom padding between form elements -->
  <label class="slds-form-element__label">Field Label</label>
  <div class="slds-form-element__control">
    <input type="text" class="slds-input" />
  </div>
</div>

<!-- Modal with appropriate padding -->
<div class="slds-modal__container">
  <div class="slds-modal__header slds-p-around_medium">
    <!-- 16px padding in header -->
    Modal Title
  </div>
  <div class="slds-modal__content slds-p-around_large">
    <!-- 24px padding for modal body content -->
    Modal content with comfortable spacing
  </div>
  <div class="slds-modal__footer slds-p-around_medium">
    <!-- 16px padding in footer -->
    Footer actions
  </div>
</div>

<!-- List item with asymmetric padding -->
<li class="slds-p-vertical_x-small slds-p-horizontal_medium">
  <!-- 8px top/bottom, 16px left/right for list items -->
  List item with comfortable touch target
</li>
```

## Variable Density Classes

Adapt padding to user density preferences (comfy/compact modes).

| Class | Comfy Mode | Compact Mode |
|-------|------------|--------------|
| `slds-var-p-around_small` | 0.75rem (12px) | 0.375rem (6px) |
| `slds-var-p-around_medium` | 1rem (16px) | 0.5rem (8px) |
| `slds-var-p-around_large` | 1.5rem (24px) | 0.75rem (12px) |
| `slds-var-p-horizontal_medium` | 1rem (16px) | 0.5rem (8px) |
| `slds-var-p-vertical_medium` | 1rem (16px) | 0.5rem (8px) |

## Common Use Cases

| Use Case | Class | Value |
|----------|-------|-------|
| Card body padding | `slds-p-around_medium` | 16px all sides |
| Button padding | `slds-p-horizontal_medium` | 16px left/right |
| Modal content | `slds-p-around_large` | 24px all sides |
| List item padding | `slds-p-vertical_x-small slds-p-horizontal_medium` | 8px top/bottom, 16px left/right |
| Compact form fields | `slds-p-around_small` | 12px all sides |
| Section padding | `slds-p-vertical_large` | 24px top/bottom |
| Icon button padding | `slds-p-around_x-small` | 8px all sides |
| Remove padding | `slds-p-around_none` | 0px all sides |

## Best Practices

✅ Use `slds-p-around_medium` (16px) for standard component padding
✅ Use `slds-p-around_small` (12px) for compact layouts and dense information
✅ Use `slds-p-around_large` (24px) for spacious layouts and primary content areas
✅ Use `slds-p-horizontal_*` and `slds-p-vertical_*` for asymmetric padding
✅ Use `slds-has-cushion` for quick default padding of 12px
✅ Use variable density classes (`slds-var-p-*`) for responsive density

❌ Avoid combining `slds-has-cushion` with other padding classes
❌ Avoid using padding for external spacing between elements (use [Margin Utilities](ref:slds.guidance.utilities.margin) instead)
❌ Avoid mixing different size scales within the same component
❌ Avoid excessive padding that creates wasted space

---
id: slds.guidance.utilities.position
title: Position Utilities
description: SLDS CSS positioning utility classes
summary: "Utilities for CSS positioning (static, relative, absolute, fixed). Controls element positioning for dropdowns, modals, and overlays."

artifact_type: reference
domain: utilities
topic: position

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities

tags: [utilities, position, css-positioning]
keywords: [slds-is-relative, slds-is-absolute, slds-is-fixed, slds-is-static]
---

# Position - CSS Positioning Control

CSS positioning including static, relative, absolute, and fixed positioning.

## Core Classes

| Class | CSS Property | Purpose |
|-------|-------------|---------|
| `slds-is-static` | `position: static` | Reset element to normal document flow |
| `slds-is-relative` | `position: relative` | Position element relative to its normal position, create containing block for absolute children |
| `slds-is-absolute` | `position: absolute` | Position element relative to nearest positioned ancestor |
| `slds-is-fixed` | `position: fixed` | Position element relative to viewport |

## Common Patterns

### Dropdown Positioning
```html
<!-- Dropdown container with relative positioning -->
<div class="slds-dropdown-trigger slds-is-relative">
  <button class="slds-button">Actions</button>
  <!-- Dropdown positioned absolutely below trigger -->
  <div class="slds-dropdown slds-is-absolute" style="top: 100%; left: 0;">
    <ul class="slds-dropdown__list">
      <li class="slds-dropdown__item">Edit</li>
      <li class="slds-dropdown__item">Delete</li>
    </ul>
  </div>
</div>
```

### Modal Overlay
```html
<!-- Fixed position modal covering viewport -->
<section class="slds-modal slds-is-fixed" style="top: 0; left: 0; right: 0; bottom: 0; z-index: 9000;">
  <div class="slds-modal__container">
    <div class="slds-modal__content">
      Modal content here
    </div>
  </div>
</section>
<!-- Fixed backdrop behind modal -->
<div class="slds-backdrop slds-is-fixed" style="top: 0; left: 0; width: 100%; height: 100%; z-index: 8999;"></div>
```

### Badge Indicator
```html
<!-- Icon with absolutely positioned badge -->
<div class="slds-icon_container slds-is-relative">
  <svg class="slds-icon slds-icon-text-default">
    <use xlink:href="/assets/icons/utility-sprite.svg#notification"></use>
  </svg>
  <!-- Badge positioned at top-right corner -->
  <span class="slds-badge slds-is-absolute" style="top: -4px; right: -4px;">
    5
  </span>
</div>
```

### Tooltip Positioning
```html
<!-- Button with absolutely positioned tooltip -->
<div class="slds-is-relative">
  <button class="slds-button">Hover for info</button>
  <!-- Tooltip positioned above button -->
  <div class="slds-popover slds-is-absolute" style="bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;">
    <div class="slds-popover__body">Helpful information</div>
  </div>
</div>
```

### Sticky Elements
```html
<!-- Use CSS sticky for header (not utility class) -->
<header class="slds-page-header" style="position: sticky; top: 0; z-index: 100;">
  Page header remains visible on scroll
</header>

<!-- Fixed action bar at bottom -->
<div class="slds-is-fixed" style="bottom: 0; left: 0; right: 0; z-index: 100;">
  <div class="slds-button-group">
    <button class="slds-button slds-button_brand">Save</button>
    <button class="slds-button slds-button_neutral">Cancel</button>
  </div>
</div>
```

## Best Practices

✅ Use `slds-is-relative` on parent containers for absolutely positioned children
✅ Use `slds-is-absolute` for dropdowns, tooltips, and popovers
✅ Use `slds-is-fixed` for modals, backdrops, and viewport-relative elements
✅ Always specify positioning coordinates (`top`, `right`, `bottom`, `left`)
✅ Include appropriate `z-index` values for stacking context
✅ Use `slds-is-static` to reset positioning when needed

❌ Never use `slds-is-absolute` without a positioned ancestor
❌ Avoid `slds-is-fixed` for elements that should scroll with content
❌ Never position elements without defining coordinates
❌ Avoid excessive z-index values (stay within defined ranges)

## Z-Index Guidelines

| Layer | Z-Index Range | Use For |
|-------|---------------|---------|
| Base content | 1-10 | Regular page elements |
| Dropdowns | 5000-5999 | Dropdown menus, select lists |
| Sticky elements | 6000-6999 | Sticky headers, navigation |
| Modals | 9000-9999 | Modal dialogs, overlays |
| Toasts | 10000+ | Toast notifications, alerts |

### Z-Index Example
```html
<!-- Properly layered elements -->
<div class="slds-dropdown slds-is-absolute" style="z-index: 5000;">Dropdown</div>
<header class="slds-is-fixed" style="z-index: 6000;">Sticky header</header>
<div class="slds-modal slds-is-fixed" style="z-index: 9000;">Modal</div>
<div class="slds-notification slds-is-fixed" style="z-index: 10000;">Toast</div>
```

## Positioning Coordinates

When using position utilities, always define coordinates:

| Coordinate | Description | Example |
|------------|-------------|---------|
| `top` | Distance from top edge | `top: 0` or `top: 100%` |
| `right` | Distance from right edge | `right: 0` or `right: 1rem` |
| `bottom` | Distance from bottom edge | `bottom: 0` or `bottom: 100%` |
| `left` | Distance from left edge | `left: 0` or `left: 50%` |

### Coordinate Combinations
```html
<!-- Full coverage -->
<div class="slds-is-fixed" style="top: 0; right: 0; bottom: 0; left: 0;">

<!-- Top-right corner -->
<div class="slds-is-absolute" style="top: 0; right: 0;">

<!-- Centered horizontally -->
<div class="slds-is-absolute" style="left: 50%; transform: translateX(-50%);">

<!-- Bottom-aligned -->
<div class="slds-is-absolute" style="bottom: 0; left: 0; right: 0;">
```

## Browser Compatibility

All position utilities are fully supported in modern browsers:
- Chrome 1+
- Firefox 1+
- Safari 1+
- Edge 12+
- No vendor prefixes required

---
id: slds.guidance.utilities.print
title: Print Utilities
description: SLDS print utility class for controlling element visibility when printing
summary: "Utility class (.slds-no-print) for hiding elements when printing."

artifact_type: reference
domain: utilities
topic: print

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities

tags: [utilities, print, visibility, media-query]
keywords: [slds-no-print, print, hide-on-print]
---

# Print - Print Visibility Control

Hiding elements when printing pages.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-no-print` | Hides element when page is printed (display: none in @media print) |

## Common Patterns

```html
<!-- Hide navigation when printing -->
<nav class="slds-context-bar slds-no-print">
  <!-- Navigation won't appear in printed output -->
  <div class="slds-context-bar__primary">
    Navigation Menu
  </div>
</nav>

<!-- Hide action buttons when printing -->
<div class="slds-page-header">
  <div class="slds-page-header__title">
    Report Title
  </div>
  <div class="slds-page-header__controls slds-no-print">
    <!-- Buttons hidden in print -->
    <button class="slds-button slds-button_neutral">Edit</button>
    <button class="slds-button slds-button_brand">Save</button>
  </div>
</div>

<!-- Hide UI controls on data table -->
<table class="slds-table">
  <thead>
    <tr>
      <th class="slds-no-print">
        <!-- Checkbox column hidden in print -->
        <input type="checkbox" />
      </th>
      <th>Name</th>
      <th>Status</th>
      <th class="slds-no-print">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="slds-no-print">
        <input type="checkbox" />
      </td>
      <td>Record Name</td>
      <td>Active</td>
      <td class="slds-no-print">
        <!-- Action buttons hidden in print -->
        <button class="slds-button">Edit</button>
      </td>
    </tr>
  </tbody>
</table>

<!-- Hide floating action button -->
<div class="slds-fab slds-no-print">
  <!-- Floating button hidden in print -->
  <button class="slds-button slds-button_icon">
    <svg class="slds-button__icon"><!-- Icon --></svg>
  </button>
</div>

<!-- Hide page footer with metadata -->
<footer class="slds-p-around_medium slds-no-print">
  <!-- Footer info hidden in print -->
  Last updated: Today at 3:45 PM
  <br />
  Page 1 of 10
</footer>
```

## Best Practices

✅ Use `slds-no-print` on navigation menus and app bars
✅ Use `slds-no-print` on action buttons and interactive controls
✅ Use `slds-no-print` on checkbox columns in data tables
✅ Use `slds-no-print` on floating action buttons and overlays
✅ Use `slds-no-print` on breadcrumbs and page metadata
✅ Test print preview to ensure proper hiding of elements

❌ Avoid hiding essential content that users need in printed output
❌ Avoid hiding data table headers or important labels
❌ Avoid hiding status badges or important visual indicators

---
id: slds.guidance.utilities.scrollable
title: Scrollable Utilities
description: SLDS scrollable utility classes for managing overflow behavior
summary: "Utilities for controlling scroll behavior (x, y, both, none)."

artifact_type: reference
domain: utilities
topic: scrollable

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities

tags: [utilities, scrollable, overflow, scroll]
keywords: [slds-scrollable, overflow, scroll, scrollable-x, scrollable-y]
---

# Scrollable - Overflow Management

Controlling scroll behavior in fixed-size containers.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-scrollable` | Enables scrolling on both axes when content exceeds container dimensions |
| `slds-scrollable_x` | Enables horizontal scrolling only when content exceeds width |
| `slds-scrollable_y` | Enables vertical scrolling only when content exceeds height |
| `slds-scrollable_none` | Prevents scrolling and hides overflow content |

## Common Patterns

```html
<!-- Data table with horizontal scroll -->
<div class="slds-scrollable_x" style="max-width: 600px;">
  <!-- Table scrolls horizontally when wider than 600px -->
  <table class="slds-table slds-table_bordered">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
      </tr>
    </thead>
    <tbody>
      <!-- Table rows -->
    </tbody>
  </table>
</div>

<!-- List with vertical scroll -->
<div class="slds-scrollable_y" style="height: 300px;">
  <!-- List scrolls vertically when taller than 300px -->
  <ul class="slds-has-dividers_bottom">
    <li class="slds-p-around_small">Item 1</li>
    <li class="slds-p-around_small">Item 2</li>
    <li class="slds-p-around_small">Item 3</li>
    <li class="slds-p-around_small">Item 4</li>
    <li class="slds-p-around_small">Item 5</li>
    <li class="slds-p-around_small">Item 6</li>
    <li class="slds-p-around_small">Item 7</li>
    <li class="slds-p-around_small">Item 8</li>
  </ul>
</div>

<!-- Modal with scrollable content -->
<div class="slds-modal__container">
  <div class="slds-modal__header">
    <h2>Modal Title</h2>
  </div>
  <div class="slds-modal__content slds-scrollable_y" style="height: 400px;">
    <!-- Content scrolls when exceeding 400px height -->
    <div class="slds-p-around_medium">
      Long form content that exceeds the modal height...
    </div>
  </div>
  <div class="slds-modal__footer">
    <button class="slds-button">Cancel</button>
    <button class="slds-button slds-button_brand">Save</button>
  </div>
</div>

<!-- Code block with both-axis scrolling -->
<div class="slds-scrollable slds-box" style="max-width: 500px; max-height: 200px;">
  <!-- Code scrolls both horizontally and vertically -->
  <pre class="slds-p-around_small">
    Long code snippet that exceeds both width and height...
    Multiple lines of code...
    With very long lines that exceed the container width...
  </pre>
</div>

<!-- Card with hidden overflow -->
<div class="slds-card">
  <div class="slds-card__body slds-scrollable_none" style="height: 150px;">
    <!-- Overflow content is hidden, not scrollable -->
    <div class="slds-p-around_medium">
      Content that might exceed the fixed height is clipped
    </div>
  </div>
</div>
```

## Best Practices

✅ Use `slds-scrollable_x` for wide tables in responsive layouts
✅ Use `slds-scrollable_y` for long lists with fixed height containers
✅ Use `slds-scrollable` for code blocks or content that may overflow in both directions
✅ Set explicit height on containers using `slds-scrollable_y`
✅ Set explicit width on containers using `slds-scrollable_x`
✅ Include touch scrolling support for mobile devices (automatically included)

❌ Avoid nesting multiple scrollable containers
❌ Avoid using `slds-scrollable_none` on content users need to access
❌ Avoid scrollable areas without visual scroll indicators
❌ Avoid horizontal scrolling on mobile when vertical layout works better

---
id: slds.guidance.utilities.sizing
title: Sizing Utilities
description: SLDS width sizing utility classes for responsive layouts
summary: "Utilities for width sizing. Fractional widths (1-of-2 through 1-of-12), absolute sizes, responsive breakpoints, and flex ordering."

artifact_type: reference
domain: utilities
topic: sizing

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.grid

tags: [utilities, sizing, width, responsive, fractional]
keywords: [slds-size, slds-order, fractional width, responsive sizing]
---

# Sizing - Width Control

Width sizing and flex ordering.

## Core Classes

### Fractional Widths

Based on 12-column grid system with denominators of 2, 3, 4, 5, 6, 7, 8, and 12.

| Class | Purpose |
|-------|---------|
| `slds-size_1-of-2` | Sets width to 50% |
| `slds-size_1-of-3` | Sets width to 33.333% |
| `slds-size_2-of-3` | Sets width to 66.6667% |
| `slds-size_1-of-4` | Sets width to 25% |
| `slds-size_3-of-4` | Sets width to 75% |
| `slds-size_1-of-5` | Sets width to 20% |
| `slds-size_2-of-5` | Sets width to 40% |
| `slds-size_3-of-5` | Sets width to 60% |
| `slds-size_4-of-5` | Sets width to 80% |
| `slds-size_1-of-6` | Sets width to 16.6667% |
| `slds-size_5-of-6` | Sets width to 83.3333% |
| `slds-size_1-of-7` | Sets width to 14.2857% |
| `slds-size_1-of-8` | Sets width to 12.5% |
| `slds-size_1-of-12` | Sets width to 8.3333% |
| `slds-size_5-of-12` | Sets width to 41.6667% |
| `slds-size_7-of-12` | Sets width to 58.3333% |
| `slds-size_11-of-12` | Sets width to 91.6667% |

### Absolute Sizes

Fixed widths in rem units.

| Class | Purpose |
|-------|---------|
| `slds-size_xxx-small` | Sets width to 3rem (48px) |
| `slds-size_xx-small` | Sets width to 6rem (96px) |
| `slds-size_x-small` | Sets width to 12rem (192px) |
| `slds-size_small` | Sets width to 15rem (240px) |
| `slds-size_medium` | Sets width to 20rem (320px) |
| `slds-size_large` | Sets width to 25rem (400px) |
| `slds-size_x-large` | Sets width to 40rem (640px) |
| `slds-size_xx-large` | Sets width to 60rem (960px) |
| `slds-size_full` | Sets width to 100% |

### Responsive Breakpoints

Breakpoint-specific sizing with mobile-first approach.

| Breakpoint | Viewport Width | Prefix |
|------------|---------------|--------|
| x-small | ≥ 320px (20em) | `slds-x-small-size_*` |
| small | ≥ 480px (30em) | `slds-small-size_*` |
| medium | ≥ 768px (48em) | `slds-medium-size_*` |
| large | ≥ 1024px (64em) | `slds-large-size_*` |
| x-large | ≥ 1280px (80em) | `slds-x-large-size_*` |
| max-small | < 480px (30em) | `slds-max-small-size_*` |
| max-medium | < 768px (48em) | `slds-max-medium-size_*` |
| max-large | < 1024px (64em) | `slds-max-large-size_*` |

### Flex Ordering

Controls visual order in flexbox layouts.

| Class | Purpose |
|-------|---------|
| `slds-order_1` | Sets flex order to 1 |
| `slds-order_2` | Sets flex order to 2 |
| `slds-order_3` | Sets flex order to 3 |
| `slds-order_4` | Sets flex order to 4 |
| `slds-order_5` | Sets flex order to 5 |
| `slds-order_6` through `slds-order_12` | Sets flex order 6-12 |

## Common Patterns

### Three-Column Layout
```html
<!-- Three equal columns -->
<div class="slds-grid slds-wrap">
  <div class="slds-size_1-of-3">
    <!-- Column 1: 33.333% width -->
  </div>
  <div class="slds-size_1-of-3">
    <!-- Column 2: 33.333% width -->
  </div>
  <div class="slds-size_1-of-3">
    <!-- Column 3: 33.333% width -->
  </div>
</div>
```

### Responsive Grid
```html
<!-- Full width mobile, half tablet, quarter desktop -->
<div class="slds-grid slds-wrap">
  <div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-4">
    <!-- Card adapts from 100% → 50% → 25% -->
  </div>
  <div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-4">
    <!-- Card adapts from 100% → 50% → 25% -->
  </div>
</div>
```

### Sidebar Layout
```html
<!-- Fixed sidebar with flexible content -->
<div class="slds-grid">
  <nav class="slds-size_medium">
    <!-- Sidebar: 320px fixed width -->
  </nav>
  <main class="slds-col">
    <!-- Content: Fills remaining space -->
  </main>
</div>
```

### Reordered Content
```html
<!-- Visual order differs from DOM order -->
<div class="slds-grid">
  <div class="slds-size_1-of-3 slds-order_3">
    <!-- Appears third visually -->
  </div>
  <div class="slds-size_1-of-3 slds-order_1">
    <!-- Appears first visually -->
  </div>
  <div class="slds-size_1-of-3 slds-order_2">
    <!-- Appears second visually -->
  </div>
</div>
```

### Form Layout
```html
<!-- Two-column form with responsive stacking -->
<div class="slds-form" role="form">
  <div class="slds-grid slds-wrap slds-gutters">
    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
      <!-- First Name field: Full width mobile, half desktop -->
    </div>
    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
      <!-- Last Name field: Full width mobile, half desktop -->
    </div>
    <div class="slds-col slds-size_1-of-1">
      <!-- Email field: Always full width -->
    </div>
  </div>
</div>
```

## Best Practices

✅ Use fractional widths for flexible grid layouts
✅ Apply responsive classes for mobile-first design
✅ Combine with `slds-grid` and `slds-wrap` for proper grid behavior
✅ Use `slds-col` for flexible remaining space
✅ Apply `slds-gutters` to parent grid for consistent spacing
✅ Use semantic HTML elements with sizing utilities

❌ Avoid mixing fractional and absolute sizes on siblings
❌ Never use sizing utilities without proper grid container
❌ Avoid using more than 12 total columns per row
❌ Never rely solely on `slds-order_*` for accessibility - maintain logical DOM order

---
id: slds.guidance.utilities.themes
title: Themes Utilities
description: SLDS theme utility classes for background and text colors
summary: "Utilities for applying color themes including default, shade, inverse, and semantic states (success, info, warning, error, offline)."

artifact_type: reference
domain: utilities
topic: themes

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.color

tags: [utilities, themes, colors, backgrounds]
keywords: [slds-theme, background colors, semantic colors, inverse themes]
---

# Themes - Color & Background

Applying consistent color themes to containers and components.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-theme_default` | White background with default text color |
| `slds-theme_shade` | Gray background (#F3F3F3) for subtle contrast |
| `slds-theme_inverse` | Dark blue background with white text |
| `slds-theme_alt-inverse` | Darker blue background variant |

## Semantic State Themes

| Class | Background Color | Text Color |
|-------|-----------------|------------|
| `slds-theme_success` | Green (#4BCA81) | White |
| `slds-theme_info` | Gray-blue (#706E6B) | White |
| `slds-theme_warning` | Yellow (#FFB75D) | Black |
| `slds-theme_error` | Red (#EA001E) | White |
| `slds-theme_offline` | Black (#444) | White |

## Texture Modifier

| Class | Purpose |
|-------|---------|
| `slds-theme_alert-texture` | Adds diagonal striped pattern overlay |

## Common Patterns

```html
<!-- Card with default theme -->
<div class="slds-card slds-theme_default">
  <div class="slds-card__header">Default themed card</div>
  <div class="slds-card__body">Card content with white background</div>
</div>

<!-- Section with shade background -->
<section class="slds-theme_shade slds-p-around_medium">
  <!-- Gray background for visual separation -->
  <h2>Section Title</h2>
  <p>Content on subtle gray background</p>
</section>

<!-- Success notification banner -->
<div class="slds-theme_success slds-p-around_small">
  <!-- Green background with white text -->
  <span class="slds-icon_container">
    <svg class="slds-icon slds-icon_small">...</svg>
  </span>
  <span>Operation completed successfully</span>
</div>

<!-- Warning alert with texture -->
<div class="slds-theme_warning slds-theme_alert-texture slds-p-around_medium">
  <!-- Yellow background with striped texture -->
  <strong>Warning:</strong> This action cannot be undone
</div>

<!-- Inverse header section -->
<header class="slds-theme_inverse slds-p-around_large">
  <!-- Dark blue background with white text -->
  <h1>Dashboard</h1>
  <p>All text and links are automatically styled for dark backgrounds</p>
</header>
```

## Best Practices

✅ Use `slds-theme_default` for standard white backgrounds
✅ Apply `slds-theme_shade` to visually separate sections
✅ Use semantic themes (success, error, warning) for status messages
✅ Combine `slds-theme_alert-texture` with semantic themes for critical alerts
✅ Apply themes to container elements, not individual text elements
✅ Use `slds-theme_inverse` for headers and navigation areas

❌ Nest multiple theme classes on the same element
❌ Override theme colors with inline styles
❌ Use semantic themes for decorative purposes
❌ Apply themes to elements smaller than 44×44px touch targets

## Deprecation Notes

The following double-dash variants are deprecated but still supported:
- `slds-theme--default` → Use `slds-theme_default`
- `slds-theme--shade` → Use `slds-theme_shade`
- `slds-theme--inverse` → Use `slds-theme_inverse`
- `slds-theme--alt-inverse` → Use `slds-theme_alt-inverse`
- `slds-theme--success` → Use `slds-theme_success`
- `slds-theme--info` → Use `slds-theme_info`
- `slds-theme--warning` → Use `slds-theme_warning`
- `slds-theme--error` → Use `slds-theme_error`
- `slds-theme--offline` → Use `slds-theme_offline`
- `slds-theme--alert-texture` → Use `slds-theme_alert-texture`
- `slds-theme--inverse-text` → Use `slds-theme_inverse-text`

---
id: slds.guidance.utilities.truncate
title: Truncate Utilities
description: SLDS text truncation utility classes
summary: "Utilities for text truncation. Single-line truncation with ellipsis and container-based percentage truncation."

artifact_type: reference
domain: utilities
topic: truncate

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.line-clamp

tags: [utilities, truncate, text-overflow, ellipsis]
keywords: [slds-truncate, text overflow, ellipsis, truncation]
---

# Truncate - Text Overflow

Text truncation with ellipsis.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-truncate` | Truncates text at 100% container width with ellipsis |
| `slds-truncate_container_25` | Truncates text at 25% of parent width |
| `slds-truncate_container_33` | Truncates text at 33% of parent width |
| `slds-truncate_container_50` | Truncates text at 50% of parent width |
| `slds-truncate_container_66` | Truncates text at 66% of parent width |
| `slds-truncate_container_75` | Truncates text at 75% of parent width |
| `slds-has-flexi-truncate` | Applied to flex container to enable truncation in nested flexbox layouts |

## Common Patterns

### Table Cell Truncation
```html
<!-- Truncate long text in table cells -->
<table class="slds-table slds-table_cell-buffer">
  <tbody>
    <tr>
      <td class="slds-truncate" title="Complete text for accessibility">
        <!-- Long customer name truncates with ellipsis -->
        Very Long Customer Name That Will Be Truncated
      </td>
    </tr>
  </tbody>
</table>
```

### List Item with Truncation
```html
<!-- Email recipient list with truncation -->
<ul class="slds-list_horizontal">
  <li class="slds-list__item">
    <span>To:</span>
    <span class="slds-truncate slds-m-left_xx-small" title="john.doe@example.com">
      <!-- Email truncates to fit available space -->
      john.doe@example.com
    </span>
  </li>
</ul>
```

### Card Header Truncation
```html
<!-- Card with truncated title -->
<article class="slds-card">
  <div class="slds-card__header">
    <h2 class="slds-truncate" title="Full opportunity name">
      <!-- Title truncates if too long -->
      Very Long Opportunity Name - Q4 2024 Enterprise Deal
    </h2>
  </div>
</article>
```

### Partial Width Truncation
```html
<!-- Truncate at specific percentage of parent -->
<div class="slds-grid">
  <div class="slds-truncate_container_50">
    <!-- Truncates at 50% of parent container -->
    This text will truncate at half the parent width
  </div>
  <div class="slds-col">
    <!-- Remaining content -->
  </div>
</div>
```

### Flexbox with Truncation
```html
<!-- Use with flexbox layouts -->
<div class="slds-grid">
  <div class="slds-col slds-has-flexi-truncate">
    <span class="slds-truncate" title="Full file name">
      <!-- Truncates within flexible column -->
      very-long-filename-with-many-words.pdf
    </span>
  </div>
  <div class="slds-col_fixed">
    <button class="slds-button">Download</button>
  </div>
</div>
```

## Best Practices

✅ Always include `title` attribute with full text for accessibility
✅ Use `slds-has-flexi-truncate` on flex container when truncating within flexbox
✅ Apply truncation to inline or block elements containing text
✅ Use container percentage classes for predictable truncation points
✅ Test truncation behavior across different viewport sizes

❌ Never truncate text without providing full text in title attribute
❌ Avoid truncating critical information like error messages
❌ Never use truncation on interactive elements without proper tooltips
❌ Avoid nested truncation classes

---
id: slds.guidance.utilities.typography
title: Typography Utilities
description: SLDS text styling and typography utility classes
summary: "Utilities for text styling. Headings, body text, alignment, colors, and special formatting. Link utilities are documented in [Interactions](ref:slds.guidance.utilities.interactions)."

artifact_type: reference
domain: utilities
topic: typography

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.utilities.interactions
  - slds.guidance.hooks.typography

tags: [utilities, typography, text, headings, alignment]
keywords: [slds-text-heading, slds-text-body, slds-text-color, slds-text-align]
---

# Typography - Text Styling

Text styling, headings, alignment, and colors.

## Core Classes

### Heading Sizes

| Class | Purpose |
|-------|---------|
| `slds-text-heading_large` | Large heading (28px, line-height 1.25) |
| `slds-text-heading_medium` | Medium heading (20px, line-height 1.25) |
| `slds-text-heading_small` | Small heading (16px, line-height 1.25) |

### Title Styles

| Class | Purpose |
|-------|---------|
| `slds-text-title` | Standard title (12px, line-height 1.25) |
| `slds-text-title_caps` | Uppercase title (12px, weight 400, letter-spacing 0.0625rem) |
| `slds-text-title_bold` | Bold title (12px, weight 700) |

### Body Text

| Class | Purpose |
|-------|---------|
| `slds-text-body_regular` | Regular body text (13px) |
| `slds-text-body_small` | Small body text (12px) |

### Text Alignment

| Class | Purpose |
|-------|---------|
| `slds-text-align_left` | Aligns text to start |
| `slds-text-align_center` | Centers text |
| `slds-text-align_right` | Aligns text to end |

### Text Colors

| Class | Purpose |
|-------|---------|
| `slds-text-color_default` | Default text color |
| `slds-text-color_weak` | De-emphasized text color |
| `slds-text-color_error` | Error state text (red) |
| `slds-text-color_destructive` | Destructive action text (red) |
| `slds-text-color_success` | Success state text (green) |
| `slds-text-color_inverse` | Light text on dark background |
| `slds-text-color_inverse-weak` | De-emphasized inverse text |

### Special Formatting

| Class | Purpose |
|-------|---------|
| `slds-text-longform` | Applies default spacing to content blocks |
| `slds-text-font_monospace` | Applies monospace font family |
| `slds-line-height_reset` | Resets line-height to 1 |

## Common Patterns

### Page Header
```html
<!-- Main page title with subtitle -->
<div class="slds-page-header">
  <h1 class="slds-text-heading_large">
    <!-- 28px heading -->
    Account Details
  </h1>
  <p class="slds-text-body_regular slds-text-color_weak">
    <!-- 13px de-emphasized text -->
    View and manage account information
  </p>
</div>
```

### Section Headers
```html
<!-- Section with title caps -->
<section class="slds-m-top_large">
  <h2 class="slds-text-title_caps slds-m-bottom_small">
    <!-- 12px uppercase title -->
    CONTACT INFORMATION
  </h2>
  <div class="slds-text-body_regular">
    <!-- Content -->
  </div>
</section>
```

### Status Messages
```html
<!-- Success message -->
<div class="slds-text-color_success slds-text-align_center">
  <!-- Green centered text -->
  Record saved successfully
</div>

<!-- Error message -->
<div class="slds-text-color_error slds-m-top_small">
  <!-- Red error text -->
  Required field missing
</div>
```

### Long-Form Content
```html
<!-- Article with automatic spacing -->
<article class="slds-text-longform">
  <!-- Automatic margins for h1, h2, h3, p, ul, ol -->
  <h1>Article Title</h1>
  <p>First paragraph with automatic bottom margin.</p>
  <ul>
    <!-- Disc bullets with proper indentation -->
    <li>First item</li>
    <li>Second item</li>
  </ul>
</article>
```

### Code Display
```html
<!-- Monospace text for code -->
<code class="slds-text-font_monospace slds-text-body_small">
  <!-- 12px monospace font -->
  SELECT Id, Name FROM Account
</code>
```

## Best Practices

✅ Use semantic HTML elements (h1-h6) with text utility classes
✅ Apply `slds-text-heading_*` classes to maintain consistent sizing
✅ Use `slds-text-color_weak` for secondary information
✅ Apply `slds-text-title_caps` for section labels and tabs
✅ Use `slds-text-longform` for user-generated content areas
✅ Combine text utilities with spacing utilities for proper layout

❌ Avoid using heading classes on non-heading elements for sizing
❌ Never use color utilities as the only indicator of state
❌ Avoid mixing multiple text size classes on the same element
❌ Never override line-height unless using `slds-line-height_reset`

---
id: slds.guidance.utilities.vertical-list
title: Vertical-list Utilities
description: SLDS vertical list utility classes for list formatting and spacing
summary: "Utilities for vertical lists including dividers, cards, spacing, link blocks, and list styles (dotted, ordered)."

artifact_type: reference
domain: utilities
topic: vertical-list

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities

tags: [utilities, lists, vertical-list, dividers]
keywords: [slds-list, slds-has-dividers, vertical spacing, list formatting]
---

# Vertical List - Formatting & Spacing

Creating and styling vertical lists with consistent spacing, dividers, and interactive states.

## Core Classes

| Class | Purpose |
|-------|---------|
| `slds-list_vertical` | Base vertical list container |
| `slds-list__item` | Individual list item |
| `slds-item` | Generic item (alternative to `slds-list__item`) |
| `slds-is-selected` | Marks selected state with accent border |
| `slds-is-nested` | Indents nested lists by 16px |

## List Styles

| Class | Purpose |
|-------|---------|
| `slds-list_dotted` | Unordered list with disc bullets |
| `slds-list_ordered` | Ordered list with decimal numbers |

## Spacing Variants

| Class | Spacing Between Items |
|-------|----------------------|
| `slds-list_vertical-space` | 8px (`x-small`) |
| `slds-list_vertical-space-medium` | 16px (`medium`) |

## Divider Classes

### Line Dividers
| Class | Purpose |
|-------|---------|
| `slds-has-dividers` | Bottom border on items with hover states |
| `slds-has-dividers_top` | Top border on each item |
| `slds-has-dividers_bottom` | Bottom border on each item |
| `slds-has-dividers_top-space` | Top border with 8px padding |
| `slds-has-dividers_bottom-space` | Bottom border with 8px padding |

### Card Dividers
| Class | Purpose |
|-------|---------|
| `slds-has-cards` | Bordered cards with rounded corners |
| `slds-has-cards_space` | Bordered cards with 12px padding |
| `slds-has-dividers_around` | Full border around each item |
| `slds-has-dividers_around-space` | Full border with 12px padding |

### Single Dividers
| Class | Purpose |
|-------|---------|
| `slds-has-divider` | Single top divider (8px margin + padding) |
| `slds-has-divider_top` | Top border only |
| `slds-has-divider_bottom` | Bottom border only |
| `slds-has-divider_top-space` | Top border with padding |
| `slds-has-divider_bottom-space` | Bottom border with padding |
| `slds-has-divider_right` | Right border only |
| `slds-has-divider_left` | Left border only |

## Link Blocks

| Class | Purpose |
|-------|---------|
| `slds-has-block-links` | Makes links display block |
| `slds-has-block-links_space` | Block links with 12px padding |
| `slds-has-inline-block-links` | Makes links display inline-block |
| `slds-has-inline-block-links_space` | Inline-block links with 12px padding |

## Interactive States

| Class | Purpose |
|-------|---------|
| `slds-has-list-interactions` | Enables hover and active states |

## Common Patterns

```html
<!-- Basic vertical list with dividers -->
<ul class="slds-list_vertical slds-has-dividers">
  <li class="slds-list__item">Item 1</li>
  <li class="slds-list__item">Item 2</li>
  <li class="slds-list__item slds-is-selected">Selected Item</li>
</ul>

<!-- Card-style list with spacing -->
<ul class="slds-has-cards_space">
  <li class="slds-list__item">
    <!-- Each item appears as a card with padding -->
    <h3>Card Title</h3>
    <p>Card content with 12px padding</p>
  </li>
  <li class="slds-list__item">
    <h3>Another Card</h3>
    <p>Automatically spaced 8px apart</p>
  </li>
</ul>

<!-- List with block links -->
<ul class="slds-has-block-links_space">
  <li class="slds-list__item">
    <a href="/page1">
      <!-- Entire area is clickable with padding -->
      <h3>Link Title</h3>
      <p>Description text</p>
    </a>
  </li>
  <li class="slds-list__item">
    <a href="/page2">Another clickable item</a>
  </li>
</ul>

<!-- Nested list with bullets -->
<ul class="slds-list_dotted">
  <li>Parent item</li>
  <li>
    Another parent
    <ul class="slds-list_dotted slds-is-nested">
      <li>Nested child 1</li>
      <li>Nested child 2</li>
    </ul>
  </li>
</ul>

<!-- Interactive list with hover states -->
<ul class="slds-list_vertical slds-has-dividers slds-has-list-interactions">
  <li class="slds-list__item">Hover for gray background</li>
  <li class="slds-list__item">Click for active state</li>
</ul>
```

## Best Practices

✅ Use `slds-list_vertical` with `slds-has-dividers` for navigation menus
✅ Apply `slds-has-cards_space` for distinct content sections
✅ Use `slds-has-block-links_space` for clickable list items
✅ Add `slds-is-selected` to indicate current selection
✅ Combine `slds-list_dotted` or `slds-list_ordered` for structured content
✅ Use `slds-is-nested` for hierarchical lists

❌ Mix card styles with line dividers on the same list
❌ Apply multiple divider types to the same element
❌ Use `slds-list__item` and `slds-item` interchangeably in the same list
❌ Nest lists more than 3 levels deep

---
id: slds.guidance.utilities.visibility
title: Visibility Utilities
description: SLDS show/hide and responsive display utility classes
summary: "Utilities for controlling element visibility including basic show/hide, responsive breakpoints, screen reader support, and collapsed/expanded states."

artifact_type: reference
domain: utilities
topic: visibility

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities

tags: [utilities, visibility, responsive, accessibility]
keywords: [slds-show, slds-hide, slds-assistive-text, responsive visibility, screen reader]
---

# Visibility - Show/Hide Elements

Controlling element visibility and responsive display.

## Basic Visibility

| Class | Effect |
|-------|--------|
| `slds-show` | Display block |
| `slds-hide` | Display none (!important, hidden from screen readers) |
| `slds-hidden` | Visibility hidden (!important, maintains space) |
| `slds-visible` | Visibility visible |
| `slds-is-visually-empty` | Removes element from layout flow |

**Display Variants**:
- `slds-show_inline` - Display inline
- `slds-show_inline-block` - Display inline-block

## Screen Reader Support

| Class | Purpose |
|-------|---------|
| `slds-assistive-text` | Visually hidden but readable by screen readers |
| `slds-assistive-text_focus` | Becomes visible when focused (for skip links) |

```html
<!-- Icon with screen reader label -->
<button class="slds-button slds-button_icon">
  <svg class="slds-icon">...</svg>
  <span class="slds-assistive-text">Edit Record</span>
</button>

<!-- Skip navigation link -->
<a href="#main" class="slds-assistive-text slds-assistive-text_focus">
  Skip to main content
</a>
```

## Collapsed/Expanded States

| Class | Effect |
|-------|--------|
| `slds-is-collapsed` | Height: 0, overflow: hidden |
| `slds-is-expanded` | Height: auto, overflow: visible |

```html
<!-- Collapsible section -->
<div class="slds-section">
  <button aria-expanded="false" aria-controls="section-content">
    Toggle Section
  </button>
  <div id="section-content" class="slds-is-collapsed">
    <!-- Content hidden by default -->
    Collapsible content here
  </div>
</div>
```

## Transition Visibility

| Class | Effect |
|-------|--------|
| `slds-transition-hide` | Opacity: 0 |
| `slds-transition-show` | Opacity: 1 |

Add CSS transitions for smooth animations:
```css
.slds-transition-hide,
.slds-transition-show {
  transition: opacity 0.3s ease;
}
```

## Responsive Visibility

**Breakpoints**:
- `x-small`: 320px
- `small`: 480px
- `medium`: 768px
- `large`: 1024px
- `x-large`: 1280px

### Show Classes (Hidden Below, Visible At/Above)

| Class | Visible From |
|-------|--------------|
| `slds-x-small-show` | 320px+ |
| `slds-small-show` | 480px+ |
| `slds-medium-show` | 768px+ |
| `slds-large-show` | 1024px+ |

**Display Variants**:
- `slds-x-small-show_inline-block`
- `slds-x-small-show_inline`
- `slds-small-show_inline-block`
- `slds-small-show_inline`
- `slds-medium-show_inline-block`
- `slds-medium-show_inline`
- `slds-large-show_inline-block`
- `slds-large-show_inline`

### Show Only Classes (Visible Only Within Range)

| Class | Visible Range |
|-------|---------------|
| `slds-x-small-show-only` | 320px - 479px |
| `slds-small-show-only` | 480px - 767px |
| `slds-medium-show-only` | 768px - 1023px |

**Display Variants**:
- `slds-x-small-show-only_inline-block`
- `slds-x-small-show-only_inline`
- `slds-small-show-only_inline-block`
- `slds-small-show-only_inline`
- `slds-medium-show-only_inline-block`
- `slds-medium-show-only_inline`

### Hide Classes

| Class | Hidden At/Above | Visible Below |
|-------|-----------------|---------------|
| `slds-hide_x-small` | 320px+ | < 320px |
| `slds-hide_small` | 480px+ | < 480px |
| `slds-hide_medium` | 768px+ | < 768px |
| `slds-hide_large` | 1024px+ | < 1024px |
| `slds-hide_x-large` | 1280px+ | < 1280px |

### Max Hide Classes (Hidden Below Breakpoint)

| Class | Hidden Below |
|-------|--------------|
| `slds-max-x-small-hide` | < 480px |
| `slds-max-small-hide` | < 768px |
| `slds-max-medium-hide` | < 1024px |

### Inverse Show Classes (Hidden At/Above)

| Class | Visible Below | Hidden At/Above |
|-------|---------------|-----------------|
| `slds-show_x-small` | < 320px | 320px+ |
| `slds-show_small` | < 480px | 480px+ |
| `slds-show_medium` | < 768px | 768px+ |
| `slds-show_large` | < 1024px | 1024px+ |
| `slds-show_x-large` | < 1280px | 1280px+ |

## Common Patterns

```html
<!-- Mobile menu / Desktop nav -->
<button class="slds-button slds-hide_medium">
  <!-- Visible on mobile, hidden 768px+ -->
  <svg class="slds-icon">...</svg>
  <span class="slds-assistive-text">Open Menu</span>
</button>

<nav class="slds-medium-show">
  <!-- Hidden below 768px, visible 768px+ -->
  <ul class="slds-list_horizontal">...</ul>
</nav>

<!-- Responsive table/card view -->
<div class="slds-max-small-hide">
  <!-- Table hidden below 768px -->
  <table class="slds-table">...</table>
</div>

<div class="slds-small-show-only">
  <!-- Cards shown only 480px-767px -->
  <div class="slds-card">...</div>
</div>

<!-- Progressive disclosure -->
<div class="slds-small-show">
  <!-- Additional details shown 480px+ -->
  Extended information for larger screens
</div>

<!-- Accessible expandable section -->
<section class="slds-section slds-is-open">
  <h2>
    <button aria-expanded="true" aria-controls="content-id">
      Section Title
    </button>
  </h2>
  <div id="content-id" class="slds-is-expanded">
    Section content
  </div>
</section>
```

## Best Practices

✅ Use `slds-assistive-text` for all icon-only buttons
✅ Use `slds-hide` with `!important` to ensure hiding
✅ Test responsive classes at each breakpoint
✅ Pair `aria-expanded` with `slds-is-collapsed/expanded`
✅ Use `slds-assistive-text_focus` for skip links
✅ Apply mobile-first approach: hide by default, show at breakpoints

❌ Combine `slds-hide` and `slds-show` on the same element
❌ Use `slds-hidden` and `slds-visible` together
❌ Hide essential content from screen readers
❌ Use visibility classes for layout (use Grid or Flexbox instead)
❌ Rely only on `display: none` for animations (use transitions)

#!/usr/bin/env node

/**
 * Search SLDS blueprint metadata.
 *
 * Usage:
 *   node search-blueprints.js --search "dialog"
 *   node search-blueprints.js --category "Overlay"
 *   node search-blueprints.js --name "modals"
 *   node search-blueprints.js                      # list all blueprints
 */

const fs = require('fs');
const path = require('path');

const BLUEPRINTS_DIR = path.join(__dirname, '..', 'assets', 'blueprints', 'components');

function loadBlueprints() {
  const blueprints = [];
  if (!fs.existsSync(BLUEPRINTS_DIR)) {
    console.error(`Blueprints directory not found: ${BLUEPRINTS_DIR}`);
    process.exit(1);
  }

  const files = fs.readdirSync(BLUEPRINTS_DIR).filter(f => f.endsWith('.yaml'));
  for (const file of files) {
    const content = fs.readFileSync(path.join(BLUEPRINTS_DIR, file), 'utf8');
    const nameMatch = content.match(/^name:\s*"?([^"\n]+)"?/m);
    const descMatch = content.match(/^description:\s*"?([^"\n]+)"?/m);
    const catMatch = content.match(/^category:\s*"?([^"\n]+)"?/m);
    const rootMatch = content.match(/root:\s*"?([^"\n]+)"?/m);

    blueprints.push({
      file: file.replace('.yaml', ''),
      name: nameMatch ? nameMatch[1].trim() : file.replace('.yaml', ''),
      description: descMatch ? descMatch[1].trim() : '',
      category: catMatch ? catMatch[1].trim() : 'Unknown',
      rootClass: rootMatch ? rootMatch[1].trim() : '',
    });
  }

  return blueprints.sort((a, b) => a.name.localeCompare(b.name));
}

function run() {
  const args = process.argv.slice(2);
  const flags = {};
  for (let i = 0; i < args.length; i += 2) {
    if (args[i].startsWith('--')) {
      flags[args[i].slice(2)] = args[i + 1] || '';
    }
  }

  const blueprints = loadBlueprints();

  if (flags.name) {
    const needle = flags.name.toLowerCase();
    const bp = blueprints.find(b =>
      b.file.toLowerCase() === needle || b.name.toLowerCase() === needle
    );
    if (!bp) {
      console.log(`Blueprint "${flags.name}" not found.`);
      console.log(`\nAvailable: ${blueprints.map(b => b.file).join(', ')}`);
      return;
    }
    console.log(`\n=== ${bp.name} ===`);
    console.log(`Category: ${bp.category}`);
    console.log(`Root class: ${bp.rootClass}`);
    console.log(`Description: ${bp.description}`);
    console.log(`\nFull YAML: assets/blueprints/components/${bp.file}.yaml`);
    console.log('\nRead the full YAML file for classes, modifiers, states, accessibility, and example HTML.');
    return;
  }

  let results = blueprints;

  if (flags.category) {
    const cat = flags.category.toLowerCase();
    results = results.filter(b => b.category.toLowerCase() === cat);
  }

  if (flags.search) {
    const term = flags.search.toLowerCase();
    results = results.filter(b =>
      b.name.toLowerCase().includes(term) ||
      b.description.toLowerCase().includes(term) ||
      b.file.toLowerCase().includes(term)
    );
  }

  if (results.length === 0) {
    console.log('No blueprints found matching your criteria.');
    const categories = [...new Set(blueprints.map(b => b.category))].sort();
    console.log(`\nAvailable categories: ${categories.join(', ')}`);
    return;
  }

  console.log(`\nFound ${results.length} blueprint(s):\n`);

  const byCategory = {};
  for (const bp of results) {
    if (!byCategory[bp.category]) byCategory[bp.category] = [];
    byCategory[bp.category].push(bp);
  }

  for (const [cat, bps] of Object.entries(byCategory).sort()) {
    console.log(`── ${cat} ──`);
    for (const bp of bps) {
      console.log(`  ${bp.name.padEnd(30)} ${bp.rootClass.padEnd(25)} ${bp.description.slice(0, 60)}`);
    }
    console.log();
  }

  console.log('Use --name "<blueprint>" to get full details.');
}

run();

#!/usr/bin/env node

/**
 * Search SLDS styling hooks metadata.
 *
 * Usage:
 *   node search-hooks.js --prefix "--slds-g-color-accent-"
 *   node search-hooks.js --category "color"
 *   node search-hooks.js --property "background-color"
 *   node search-hooks.js --value "#0176d3"
 *   node search-hooks.js --search "accent"
 *   node search-hooks.js                            # show category summary
 */

const fs = require('fs');
const path = require('path');

const INDEX_PATH = path.join(__dirname, '..', 'assets', 'hooks-index.json');

function loadHooks() {
  if (!fs.existsSync(INDEX_PATH)) {
    console.error(`Hooks index not found: ${INDEX_PATH}`);
    process.exit(1);
  }
  const data = JSON.parse(fs.readFileSync(INDEX_PATH, 'utf8'));
  return { hooks: data.hooks || [], categories: data.categories || {} };
}

function normalizeValue(v) {
  return (v || '').toLowerCase().replace(/\s+/g, '');
}

function matchesValue(hook, searchValue) {
  const needle = normalizeValue(searchValue);

  const check = (v) => {
    if (!v) return false;
    const n = normalizeValue(v);
    return n === needle || n.includes(needle);
  };

  if (hook.value && check(hook.value)) return true;
  if (hook.value_dark && check(hook.value_dark)) return true;
  if (hook.rawValues) {
    if (check(hook.rawValues.slds) || check(hook.rawValues.cosmos)) return true;
  }
  if (hook.values) {
    if (check(hook.values.slds) || check(hook.values.cosmos)) return true;
  }
  return false;
}

function matchesProperty(hook, targetProps) {
  const appliesTo = hook.properties?.['applies-to'] || hook.properties || [];
  if (!Array.isArray(appliesTo) || appliesTo.length === 0) return false;
  const targets = targetProps.map(p => p.toLowerCase());
  return targets.some(t => appliesTo.some(hp => hp.toLowerCase().includes(t) || t.includes(hp.toLowerCase())));
}

function formatHook(hook) {
  const parts = [`  ${hook.token}`];
  if (hook.category) parts.push(`    category: ${hook.category}`);
  if (hook.value) parts.push(`    value: ${hook.value}`);
  if (hook.value_dark) parts.push(`    value_dark: ${hook.value_dark}`);
  if (hook.rawValues?.slds) parts.push(`    value(slds): ${hook.rawValues.slds}`);
  if (hook.rawValues?.cosmos) parts.push(`    value(cosmos): ${hook.rawValues.cosmos}`);
  const props = hook.properties?.['applies-to'] || [];
  if (props.length) parts.push(`    applies-to: ${props.join(', ')}`);
  return parts.join('\n');
}

function run() {
  const args = process.argv.slice(2);
  const flags = {};
  for (let i = 0; i < args.length; i++) {
    if (args[i].startsWith('--') && i + 1 < args.length) {
      flags[args[i].slice(2)] = args[i + 1];
      i++;
    }
  }

  const { hooks, categories } = loadHooks();

  if (Object.keys(flags).length === 0) {
    console.log(`\nSLDS Styling Hooks: ${hooks.length} total\n`);
    console.log('Categories:');
    for (const [cat, count] of Object.entries(categories).sort()) {
      console.log(`  ${cat.padEnd(15)} ${count} hooks`);
    }
    console.log('\nUsage:');
    console.log('  --prefix   Match by token prefix (e.g., "--slds-g-color-accent-")');
    console.log('  --category Filter by category (e.g., "color", "spacing", "font")');
    console.log('  --property Filter by CSS property (e.g., "background-color")');
    console.log('  --value    Find hook by CSS value (e.g., "#0176d3")');
    console.log('  --search   Search token names (e.g., "accent")');
    return;
  }

  let results = hooks;

  if (flags.prefix) {
    const prefix = flags.prefix.toLowerCase();
    results = results.filter(h => h.token.toLowerCase().startsWith(prefix));
  }

  if (flags.search) {
    const term = flags.search.toLowerCase();
    results = results.filter(h => h.token.toLowerCase().includes(term));
  }

  if (flags.category) {
    const cat = flags.category.toLowerCase();
    results = results.filter(h => (h.category || '').toLowerCase() === cat);
  }

  if (flags.property) {
    results = results.filter(h => matchesProperty(h, [flags.property]));
  }

  if (flags.value) {
    results = results.filter(h => matchesValue(h, flags.value));
  }

  if (results.length === 0) {
    console.log('No hooks found matching your criteria.');
    return;
  }

  console.log(`\nFound ${results.length} hook(s):\n`);
  for (const hook of results.slice(0, 50)) {
    console.log(formatHook(hook));
    console.log();
  }
  if (results.length > 50) {
    console.log(`... and ${results.length - 50} more. Narrow your search.`);
  }
}

run();

#!/usr/bin/env node

/**
 * Search SLDS icons with synonym matching and relevance scoring.
 *
 * Usage:
 *   node search-icons.js --query "save button"
 *   node search-icons.js --query "user" --category "standard"
 *   node search-icons.js --query "delete" --limit 20
 *   node search-icons.js --list-categories
 */

const fs = require('fs');
const path = require('path');

const ICONS_PATH = path.join(__dirname, '..', 'assets', 'icon-metadata.json');

function loadIcons() {
  if (!fs.existsSync(ICONS_PATH)) {
    console.error(`Icon metadata not found: ${ICONS_PATH}`);
    process.exit(1);
  }
  const data = JSON.parse(fs.readFileSync(ICONS_PATH, 'utf8'));
  const icons = [];
  for (const [key, icon] of Object.entries(data.icons || {})) {
    icons.push({
      symbol: key,
      displayName: icon.displayName || key,
      category: icon.category || 'unknown',
      description: icon.description || '',
      synonyms: icon.synonyms || [],
      fullName: `${icon.category}:${key}`,
    });
  }
  return icons;
}

function tokenize(query) {
  return query.toLowerCase().split(/[\s_-]+/).filter(t => t.length > 0);
}

function scoreIcon(icon, query, tokens) {
  let score = 0;
  let matchType = 'partial';
  const matchedTerms = [];
  const sym = icon.symbol.toLowerCase();
  const syns = icon.synonyms.map(s => s.toLowerCase());
  const desc = icon.description.toLowerCase();

  if (sym === query) {
    score = 100; matchType = 'exact'; matchedTerms.push(icon.symbol);
  } else if (syns.includes(query)) {
    score = 95; matchType = 'synonym'; matchedTerms.push(...icon.synonyms.filter(s => s.toLowerCase() === query));
  } else if (sym.startsWith(query)) {
    score = 85; matchType = 'partial'; matchedTerms.push(icon.symbol);
  } else if (syns.some(s => s.startsWith(query))) {
    score = 80; matchType = 'synonym'; matchedTerms.push(...icon.synonyms.filter(s => s.toLowerCase().startsWith(query)));
  }

  if (score < 80 && sym.includes(query)) {
    score = Math.max(score, 70); matchedTerms.push(icon.symbol);
  }
  const partialSyns = icon.synonyms.filter(s => s.toLowerCase().includes(query));
  if (partialSyns.length > 0) {
    score = Math.max(score, 65); matchedTerms.push(...partialSyns);
    if (matchType === 'partial' && score === 65) matchType = 'synonym';
  }
  if (desc.includes(query)) {
    score = Math.max(score, 55);
    if (matchType === 'partial' && score === 55) matchType = 'contextual';
  }

  if (tokens.length > 1) {
    let tokenScore = 0;
    let matched = 0;
    for (const token of tokens) {
      let hit = false;
      if (sym.includes(token)) { tokenScore += 30; hit = true; matchedTerms.push(icon.symbol); }
      const synHits = icon.synonyms.filter(s => s.toLowerCase().includes(token));
      if (synHits.length) { tokenScore += 25; hit = true; matchedTerms.push(...synHits); }
      if (desc.includes(token)) { tokenScore += 10; hit = true; }
      if (hit) matched++;
    }
    if (matched > 1) tokenScore *= 1.2;
    if (tokenScore > score) { score = tokenScore; matchType = matched > 0 ? 'synonym' : 'contextual'; }
  }

  return { icon, score: Math.round(score), matchType, matchedTerms: [...new Set(matchedTerms)] };
}

function usageExample(fullName, category) {
  const altText = 'TODO: describe what this icon communicates';
  switch (category) {
    case 'action':
      return `<lightning-button-icon icon-name="${fullName}" alternative-text="${altText}" title="TODO: tooltip"></lightning-button-icon>`;
    case 'utility':
      return `<lightning-icon icon-name="${fullName}" alternative-text="${altText}" size="small"></lightning-icon>`;
    case 'standard':
    case 'custom':
      return `<lightning-icon icon-name="${fullName}" alternative-text="${altText}" size="medium"></lightning-icon>`;
    case 'doctype':
      return `<lightning-icon icon-name="${fullName}" alternative-text="${altText}" size="small"></lightning-icon>`;
    default:
      return `<lightning-icon icon-name="${fullName}" alternative-text="${altText}"></lightning-icon>`;
  }
}

function run() {
  const args = process.argv.slice(2);
  const flags = {};
  for (let i = 0; i < args.length; i++) {
    if (args[i] === '--list-categories') { flags.listCategories = true; continue; }
    if (args[i].startsWith('--') && i + 1 < args.length) {
      flags[args[i].slice(2)] = args[i + 1]; i++;
    }
  }

  const icons = loadIcons();

  if (flags.listCategories) {
    const cats = {};
    for (const icon of icons) {
      cats[icon.category] = (cats[icon.category] || 0) + 1;
    }
    console.log('\nIcon categories:');
    for (const [cat, count] of Object.entries(cats).sort()) {
      console.log(`  ${cat.padEnd(12)} ${count} icons`);
    }
    return;
  }

  if (!flags.query) {
    console.log('Usage: node search-icons.js --query "search term" [--category action|utility|standard|custom|doctype] [--limit N]');
    return;
  }

  const query = flags.query.toLowerCase().trim();
  const limit = parseInt(flags.limit) || 10;
  const tokens = tokenize(query);

  let searchable = icons;
  if (flags.category) {
    const cat = flags.category.toLowerCase();
    searchable = searchable.filter(i => i.category === cat);
  }

  const results = searchable
    .map(icon => scoreIcon(icon, query, tokens))
    .filter(r => r.score > 0)
    .sort((a, b) => b.score - a.score || a.icon.symbol.localeCompare(b.icon.symbol))
    .slice(0, limit);

  if (results.length === 0) {
    console.log(`No icons found for "${flags.query}".`);
    const suggestions = icons
      .filter(i => i.symbol.startsWith(query.slice(0, 3)))
      .slice(0, 5)
      .map(i => i.symbol);
    if (suggestions.length) console.log(`Try: ${suggestions.join(', ')}`);
    return;
  }

  console.log(`\nFound ${results.length} icon(s) for "${flags.query}":\n`);
  for (const r of results) {
    const { icon, score, matchType, matchedTerms } = r;
    console.log(`  ${icon.fullName.padEnd(35)} score: ${score}  match: ${matchType}`);
    if (matchedTerms.length) console.log(`    matched: ${matchedTerms.join(', ')}`);
    console.log(`    ${icon.description.slice(0, 80)}`);
    console.log(`    LWC: ${usageExample(icon.fullName, icon.category)}`);
    console.log();
  }
}

run();

#!/usr/bin/env node

/**
 * Search SLDS utility classes metadata.
 *
 * Usage:
 *   node search-utilities.js --category "all"         # list all categories
 *   node search-utilities.js --category "grid"         # browse category
 *   node search-utilities.js --search "slds-m-bottom"  # search by class name
 *   node search-utilities.js --pattern "slds-p-*"      # wildcard pattern
 */

const fs = require('fs');
const path = require('path');

const INDEX_PATH = path.join(__dirname, '..', 'assets', 'utilities-index.json');
const GUIDANCE_DIR = path.join(__dirname, '..', 'references', 'utilities');

function loadUtilities() {
  if (!fs.existsSync(INDEX_PATH)) {
    console.error(`Utilities index not found: ${INDEX_PATH}`);
    process.exit(1);
  }
  const data = JSON.parse(fs.readFileSync(INDEX_PATH, 'utf8'));
  return {
    utilities: data.utilities || [],
    categories: data.categories || {},
    total: data.total_utilities || 0,
  };
}

function formatUtility(u) {
  const parts = [`  ${u.class}`];
  if (u.category) parts.push(`    category: ${u.category}`);
  if (u.description) parts.push(`    description: ${u.description}`);
  if (u.css) {
    const rules = Object.entries(u.css).map(([prop, val]) => `${prop}: ${val}`).join('; ');
    parts.push(`    css: ${rules}`);
  }
  if (u.css_rules && u.css_rules.length) {
    parts.push(`    css: ${u.css_rules.join('; ')}`);
  }
  return parts.join('\n');
}

function run() {
  const args = process.argv.slice(2);
  const flags = {};
  for (let i = 0; i < args.length; i++) {
    if (args[i].startsWith('--') && i + 1 < args.length) {
      flags[args[i].slice(2)] = args[i + 1]; i++;
    }
  }

  const { utilities, categories, total } = loadUtilities();

  if (Object.keys(flags).length === 0) {
    console.log(`\nSLDS Utility Classes: ${total} total across ${Object.keys(categories).length} categories\n`);
    console.log('Usage:');
    console.log('  --category "all"        List all categories with counts');
    console.log('  --category "grid"       Show utilities in a specific category');
    console.log('  --search "slds-m-"      Search by class name or description');
    console.log('  --pattern "slds-p-*"    Wildcard pattern match');
    return;
  }

  if (flags.category) {
    if (flags.category === 'all') {
      console.log(`\nAll utility categories (${Object.keys(categories).length}):\n`);
      for (const [cat, count] of Object.entries(categories).sort()) {
        const guidePath = path.join(GUIDANCE_DIR, `${cat}.md`);
        const hasGuide = fs.existsSync(guidePath) ? ' (has guidance)' : '';
        console.log(`  ${cat.padEnd(20)} ${String(count).padStart(4)} classes${hasGuide}`);
      }
      console.log(`\nTotal: ${total} utility classes`);
      console.log('\nUse --category "<name>" to browse a specific category.');
      return;
    }

    const catKey = flags.category.toLowerCase().replace(/\s+/g, '-');
    const catUtilities = utilities.filter(u => {
      const uCat = (u.category_key || u.category || '').toLowerCase().replace(/\s+/g, '-');
      return uCat === catKey;
    });

    if (catUtilities.length === 0) {
      console.log(`Category "${flags.category}" not found or empty.`);
      console.log(`Available: ${Object.keys(categories).join(', ')}`);
      return;
    }

    console.log(`\n── ${flags.category} (${catUtilities.length} classes) ──\n`);
    for (const u of catUtilities.slice(0, 30)) {
      console.log(formatUtility(u));
      console.log();
    }
    if (catUtilities.length > 30) {
      console.log(`... and ${catUtilities.length - 30} more. Use --search to narrow.`);
    }

    const guidePath = path.join(GUIDANCE_DIR, `${catKey}.md`);
    if (fs.existsSync(guidePath)) {
      console.log(`\nDetailed guidance: references/utilities/${catKey}.md`);
    }
    return;
  }

  if (flags.pattern) {
    const regex = new RegExp('^' + flags.pattern.toLowerCase().replace(/\*/g, '.*') + '$');
    const matches = utilities.filter(u => regex.test((u.class || '').toLowerCase()));

    if (matches.length === 0) {
      console.log(`No utilities matching pattern "${flags.pattern}".`);
      return;
    }

    console.log(`\nFound ${matches.length} utility(ies) matching "${flags.pattern}":\n`);
    for (const u of matches.slice(0, 50)) {
      console.log(formatUtility(u));
      console.log();
    }
    if (matches.length > 50) {
      console.log(`... and ${matches.length - 50} more.`);
    }
    return;
  }

  if (flags.search) {
    const term = flags.search.toLowerCase();

    const exact = utilities.find(u => (u.class || '').toLowerCase() === term);
    if (exact) {
      console.log(`\nExact match:\n`);
      console.log(formatUtility(exact));
      return;
    }

    const matches = utilities.filter(u =>
      (u.class || '').toLowerCase().includes(term) ||
      (u.description || '').toLowerCase().includes(term)
    );

    if (matches.length === 0) {
      console.log(`No utilities found for "${flags.search}".`);
      console.log('Use --category "all" to browse available categories.');
      return;
    }

    console.log(`\nFound ${matches.length} utility(ies) for "${flags.search}":\n`);
    for (const u of matches.slice(0, 30)) {
      console.log(formatUtility(u));
      console.log();
    }
    if (matches.length > 30) {
      console.log(`... and ${matches.length - 30} more.`);
    }
    return;
  }
}

run();

---
name: design-systems-slds-apply
description: "Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between Lightning Base Components and SLDS Blueprints, applying styling hooks for theming, using utility classes for layout and spacing, or selecting icons. Triggers include \"build a modal\", \"create a form\", \"data table\", \"SLDS styling\", \"style with hooks\", \"add an icon\"."
metadata:
  version: "1.1"
  domains: ["Design Systems"]
  relatedSkills:
    - "design-systems-slds-validate"
  cliTools:
    - tool: ["npx"]
      semver: ">=7.0.0"
    - tool: ["node"]
      semver: ">=18.0.0"
---

# Applying SLDS

The **Salesforce Lightning Design System (SLDS)** is a CSS framework with thousands of artifacts. This skill teaches agents how to find and correctly use them.

> **Version:** This skill targets **SLDS v2**. Legacy `--lwc-*` tokens and `slds-*--modifier` syntax are deprecated.
>
> **Audit scope:** The companion `design-systems-slds-validate` skill analyzer only scans `.css`, `.html`, and `.js` files. Use it directly for LWC and similar HTML/CSS/JS components; treat it as a partial signal for JSX/TSX or other framework-specific template formats and supplement with manual review.

## What is SLDS?

| Artifact | Count | Description |
|----------|-------|-------------|
| **Lightning Base Components** | ~70 | Pre-built LWC components (LWC only) |
| **SLDS Blueprints** | 85 | CSS/HTML patterns for any framework |
| **Styling Hooks** | 523 | CSS custom properties (`--slds-g-*`) for theming |
| **Utility Classes** | 1,147 | Rapid styling classes for spacing, layout, visibility |
| **Icons** | 1,732 | SVG icons across 5 categories |

---

## Scope

**This skill covers:**
- Which blueprint to use for a given UI pattern
- How to style with hooks (color, spacing, typography, shadows, borders)
- Which utility classes to use for layout, spacing, visibility
- Which icon to use and from which category
- SLDS naming conventions, class structure, hook syntax

**This skill includes basic accessibility reminders** (icon alt text, focus outlines, color-not-sole-indicator) in the validation checklists. Full WCAG compliance requires a dedicated accessibility review.

**This skill does NOT cover (use companion skills):**
- **Design decisions** -- visual hierarchy, composition, interaction patterns
- **LWC mechanics** -- component structure, @wire, @api, lifecycle, events (not yet available)
- **Full accessibility** -- WCAG conformance, ARIA patterns, keyboard navigation, focus management, contrast ratios (not yet available)

---

## Component Selection Hierarchy

Always follow this order:

```text
1. Lightning Base Components (LWC only)    ← Check first
2. SLDS Blueprints (any framework)         ← Use exact SLDS classes
3. Custom with Styling Hooks               ← Use var(--slds-g-*)
4. Custom CSS (last resort)                ← Still use hooks for values
```

If building in LWC, check for an LBC first: [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components)

If no LBC exists (or not using LWC), select an SLDS Blueprint. See [references/component-selection.md](references/component-selection.md).

---

## Core Rules

### Do

- Follow the selection hierarchy: LBC > Blueprint > Hooks > Custom CSS
- Use `var(--slds-g-*, fallback)` for all themeable values
- Create custom classes (`my-*`, `c-*`) instead of overriding `.slds-*`
- **Verify every hook, class, and utility exists before using it** — run the search scripts; never assume an artifact exists based on naming patterns (see [Verify Before You Use](#verify-before-you-use))
- Pair surface colors with on-surface colors for text
- Provide `alternative-text` on every `<lightning-icon>`

### Don't

- Hard-code colors, spacing, or typography values
- Override `.slds-*` classes directly
- Use deprecated `--lwc-*` tokens as primary values
- Use `--slds-s-*` (shared) hooks -- they are private/internal
- Reassign hook values -- only reference them with `var()`
- Use color alone to convey meaning
- Invent hook names by interpolating patterns from other families (see Naming Traps below)

---

## Hook Naming Traps

SLDS hook families do NOT all follow the same naming pattern. Agents frequently invent hooks that don't exist by assuming `{prefix}-{number}` works universally. **Always verify a hook exists** via the bundled `search-hooks.cjs` script or `assets/hooks-index.json` before using it.

### Trap 1: Font size hooks are NOT numbered

| Wrong (does not exist) | Correct | Notes |
|------------------------|---------|-------|
| `--slds-g-font-size-3` | `--slds-g-font-scale-1` | Font sizes use `font-scale-*`, not `font-size-*` |
| `--slds-g-font-size-4` | `--slds-g-font-scale-2` | Only `--slds-g-font-size-base` exists (base size) |
| `--slds-g-font-size-8` | `--slds-g-font-scale-6` | Scale goes: neg-4 through 10 |

**Rule:** For font sizes, use `--slds-g-font-size-base` (the one base size) or `--slds-g-font-scale-*` (the numbered scale). Never `--slds-g-font-size-N`.

### Trap 2: Color hooks always require a number

| Wrong (does not exist) | Correct | Notes |
|------------------------|---------|-------|
| `--slds-g-color-on-surface` | `--slds-g-color-on-surface-2` | All color hooks need a number |
| `--slds-g-color-on-accent` | `--slds-g-color-on-accent-1` | Pick 1/2/3 by emphasis level |
| `--slds-g-color-surface` | `--slds-g-color-surface-1` | No unnumbered base form |

**Rule:** Every `--slds-g-color-*` hook ends in a number. Pick by emphasis: `-1` (low), `-2` (medium), `-3` (high).

### Trap 3: Not all values have hook equivalents

Some CSS values (e.g., `min-width: 7rem` for label alignment) have no SLDS hook. This is acceptable:

```css
.c-field-label {
  /* No SLDS hook exists for this width; intentional custom value */
  min-width: 7rem;
}
```

**Rule:** When no hook exists, use the value directly with a comment explaining it's intentional. Prefer SLDS grid utilities (`slds-size_*`) as alternatives to hardcoded widths where possible.

---

## Verify Before You Use

> **Rule:** Never include an SLDS hook, utility class, blueprint class, or icon in generated code without first confirming it exists in the metadata. Guessing based on naming patterns is the primary source of invented artifacts.

Run the appropriate search command **before** emitting any SLDS artifact:

| Artifact | Verification command | Source of truth |
|----------|---------------------|-----------------|
| Styling hook (`--slds-g-*`) | `node scripts/search-hooks.cjs --prefix "<hook-name>"` | `assets/hooks-index.json` |
| Utility class (`slds-*`) | `node scripts/search-utilities.cjs --search "<class-name>"` | `assets/utilities-index.json` |
| Blueprint / CSS class | `node scripts/search-blueprints.cjs --search "<pattern>"` then read the YAML | `assets/blueprints/components/*.yaml` |
| Icon | `node scripts/search-icons.cjs --query "<description>"` | `assets/icon-metadata.json` |

If the search returns no match: **do not use the artifact.** Find an alternative from the search results or build custom with verified hooks.

---

## Naming Conventions

Use a consistent prefix for custom classes to avoid collision with SLDS:

| Pattern | Use Case | Example |
|---------|----------|---------|
| `my-*` | General custom styling | `my-card-header` |
| `c-*` | LWC component-specific | `c-accountList-row` |
| `[namespace]-*` | Package/app namespace | `acme-dashboard-widget` |

**Avoid:** generic names (`container`, `wrapper`), SLDS-like names (`custom-slds-button`), BEM on SLDS classes (`slds-card__custom-header`).

Custom hook namespacing:
```css
:root {
  --my-app-primary: var(--slds-g-color-accent-1);
  --my-app-card-padding: var(--slds-g-spacing-4);
}
```

---

## Knowledge Map

This skill bundles comprehensive SLDS knowledge. Read files as needed -- don't read everything upfront.

### Decision Guides (start here for each task)

| File | Read when |
|------|-----------|
| [references/component-selection.md](references/component-selection.md) | Choosing a component or blueprint |
| [references/styling-decision-guide.md](references/styling-decision-guide.md) | Applying colors, spacing, typography, shadows |
| [references/icons-decision-guide.md](references/icons-decision-guide.md) | Selecting or implementing an icon |
| [references/utilities-quick-ref.md](references/utilities-quick-ref.md) | Using utility classes for layout/spacing |

### Search Scripts (find specific artifacts)

| Script | What it searches | Example |
|--------|-----------------|---------|
| `scripts/search-blueprints.cjs` | 85 blueprint YAMLs | `--search "dialog"` |
| `scripts/search-hooks.cjs` | 523 styling hooks | `--prefix "--slds-g-color-accent-"` |
| `scripts/search-icons.cjs` | 1,732 icons with synonyms | `--query "save button"` |
| `scripts/search-utilities.cjs` | 1,147 utility classes | `--category "grid"` |

### Deep-Dive Guidance (read for detailed rules)

| Folder | Content | Index |
|--------|---------|-------|
| `references/overviews/` | Foundational concepts (color, spacing, typography, etc.) | [references/README.md](references/README.md) |
| `references/styling-hooks/` | Hook categories with detailed usage | [references/README.md](references/README.md) |
| `references/utilities/` | 27 utility class categories | [references/README.md](references/README.md) |
| `references/slds-development-guide.md` | Full SLDS development guide | -- |

### Raw Metadata (structured data for lookup)

> **Do not read metadata JSON files directly** — they are too large for agent context (hooks-index.json is 6,000+ lines; icon-metadata.json is 38,000+ lines). Use the search scripts above to query them.

| File | Content | Lines |
|------|---------|-------|
| `assets/blueprints/components/*.yaml` | 85 blueprint specs (classes, variants, a11y, HTML) | ~50-200 each |
| `assets/hooks-index.json` | 523 hooks with values and CSS properties | ~6,300 |
| `assets/icon-metadata.json` | 1,732 icons with synonyms for search | ~38,500 |
| `assets/utilities-index.json` | 1,147 utility classes with CSS rules | ~6,900 |

---

## Authoring Workflow

### Phase 1: Understand the Need

Identify:
- What UI pattern is needed? (form, table, modal, card, etc.)
- What framework? (LWC, React, Vue, Angular, vanilla)
- What data will it display?
- What states does it need? (loading, empty, error, success)

### Phase 2: Select the Artifact

1. **If LWC**: Check the [Lightning Component Library](https://developer.salesforce.com/docs/component-library/overview/components) for an LBC
2. **Search blueprints**: `node scripts/search-blueprints.cjs --search "<pattern>"`
3. **Read the blueprint YAML**: `assets/blueprints/components/<name>.yaml` for exact classes, modifiers, states, and accessibility requirements
4. **No match?** Build custom with hooks (see Phase 3)

Details: [references/component-selection.md](references/component-selection.md)

### Phase 3: Apply Styling

1. **Read**: [references/styling-decision-guide.md](references/styling-decision-guide.md)
2. **Colors**: Classify role (surface, accent, feedback, border) then pick hook
3. **Spacing**: Use utility classes (`slds-p-*`, `slds-m-*`) or hooks (`--slds-g-spacing-*`)
4. **Layout**: Use grid utilities (`slds-grid`, `slds-col`, `slds-size_*`)
5. **Custom CSS**: Use `var(--slds-g-*, fallback)`, custom class prefixes only

### Phase 4: Add Icons

1. **Read**: [references/icons-decision-guide.md](references/icons-decision-guide.md)
2. **Search**: `node scripts/search-icons.cjs --query "<description>"`
3. **In LWC**: Use `<lightning-icon>` with `alternative-text`
4. **In non-LWC**: Use SVG with `slds-icon` classes and `slds-assistive-text`

### Phase 5: Validate (Mandatory — Do Not Skip)

**Step 1: Run the SLDS linter.** This is required. Zero violations is the target.

```bash
npx @salesforce-ux/slds-linter@latest lint <component-path>
```

The linter catches hardcoded values, class overrides, and deprecated tokens. **Fix all violations before proceeding.** Do not rationalize violations as acceptable.

**Step 2: Verify no invented hooks.** Confirm every `--slds-g-*` hook in the output exists in `assets/hooks-index.json`. Cross-reference against the T051 check in [checklists.md](references/checklists.md).

**Step 3: Run through [checklists.md](references/checklists.md)** for the checks the linter cannot automate:
- All `var(--slds-g-*)` have fallback values (T002)
- Surface/accent/feedback color hooks are properly paired (T010–T013)
- Spacing uses hooks or utility classes — no magic `px` values (T020–T021)
- Font sizes use `--slds-g-font-scale-*`, not `--slds-g-font-size-N` (T031)
- All icons have accessibility text (A004)
- Custom classes use `my-*` or `c-*` prefix (Q010)

**Step 4 (optional): Run the full quality audit** using the `design-systems-slds-validate` skill for a scored report before code review or deployment. Use it directly for LWC / HTML-CSS-JS components; for JSX/TSX outputs, treat the result as partial coverage only. Target a B grade (≥80) or higher before marking work complete.

---

## Quick Reference

### Common Hook Patterns

```css
/* Surface + text pairing (always use numbered variants) */
background: var(--slds-g-color-surface-1, #ffffff);
color: var(--slds-g-color-on-surface-2, #181818);

/* Standard padding */
padding: var(--slds-g-spacing-4, 1rem);

/* Card-like container */
border-radius: var(--slds-g-radius-border-2, 0.25rem);
box-shadow: var(--slds-g-shadow-1, 0 2px 4px rgba(0,0,0,0.1));

/* Accent for primary actions */
background: var(--slds-g-color-accent-1, #0176d3);
color: var(--slds-g-color-on-accent-1, #ffffff);

/* Typography -- use font-scale-*, NOT font-size-* (only font-size-base exists) */
font-size: var(--slds-g-font-scale-2, 0.875rem);
```

### Common Utility Patterns

```html
<!-- Responsive grid -->
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">...</div>
</div>

<!-- Spacing -->
<div class="slds-p-around_medium slds-m-bottom_small">...</div>

<!-- Truncation -->
<p class="slds-truncate" title="Full text here">Full text here</p>
```

---

## Examples

See [examples.md](references/examples.md) for worked examples demonstrating the full workflow from intent to SLDS artifact selection.

## Validation

See [checklists.md](references/checklists.md) for validation checklists aligned with the design-systems-slds-validate skill.

## Resources

| Resource | URL |
|----------|-----|
| SLDS Website | https://www.lightningdesignsystem.com/ |
| Lightning Component Library | https://developer.salesforce.com/docs/component-library/overview/components |
| SLDS Linter | https://developer.salesforce.com/docs/platform/slds-linter/guide |
| Styling Hooks Reference | https://www.lightningdesignsystem.com/2e1ef8501/p/591960-global-styling-hooks |