@salesforce/afv-skills 1.14.0 → 1.16.0

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

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

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

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

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