@salesforce/afv-skills 1.14.0 → 1.16.0

package/skills/applying-slds/metadata/blueprints/components/setup-assistant.yaml

@@ -0,0 +1,152 @@
+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.

package/skills/applying-slds/metadata/blueprints/components/slider.yaml

@@ -0,0 +1,111 @@
+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."

package/skills/applying-slds/metadata/blueprints/components/spinners.yaml

@@ -0,0 +1,135 @@
+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."

package/skills/applying-slds/metadata/blueprints/components/split-view.yaml

@@ -0,0 +1,112 @@
+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.'

package/skills/applying-slds/metadata/blueprints/components/summary-detail.yaml

@@ -0,0 +1,103 @@
+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.'