@salesforce/afv-skills 1.22.0 → 1.23.0

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

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

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

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

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

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

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

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