@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

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

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