@salesforce/afv-skills 1.14.0 → 1.16.0

package/skills/applying-slds/metadata/blueprints/components/dynamic-icons.yaml

@@ -0,0 +1,128 @@
+name: Dynamic Icons
+description: Interactive icon components that change appearance, state, or behavior based on user interaction or data conditions,
+  providing visual feedback and enhanced user experience through animated or contextual icon transformations.
+category: Display
+slds_classes:
+  root: slds-icon-waffle
+  elements:
+  - class: slds-icon-waffle_container
+    description: Container for dynamic waffle/grid icon
+    purpose: Holds the dynamic waffle icon structure
+  - class: slds-icon-ellie
+    description: Animated Ellie (assistance) icon
+    purpose: Provides animated feedback for assistance features
+  - class: slds-icon-eq
+    description: Animated equalizer icon
+    purpose: Shows dynamic audio or data visualization
+  - class: slds-icon-score
+    description: Dynamic score indicator icon
+    purpose: Displays changing scores or ratings
+  - class: slds-icon-trend
+    description: Trend indicator icon
+    purpose: Shows directional trends with dynamic arrows
+  - class: slds-icon-typing
+    description: Typing indicator icon
+    purpose: Shows active typing or loading states
+  modifiers: []
+  states:
+  - class: slds-is-animated
+    description: Animated state for dynamic icons
+    trigger: Applied when icon should show animation
+variants:
+- name: Waffle
+  description: Grid/waffle icon with interactive states
+  classes:
+  - slds-icon-waffle
+  usage_context: For app launcher or grid menu functionality
+  differences: Interactive grid pattern that responds to user interaction
+- name: Ellie
+  description: Animated assistance icon
+  classes:
+  - slds-icon-ellie
+  usage_context: For AI assistance or help features
+  differences: Animated character providing contextual assistance
+- name: Equalizer
+  description: Dynamic equalizer visualization
+  classes:
+  - slds-icon-eq
+  usage_context: For audio controls or data visualization
+  differences: Animated bars showing activity or levels
+lightning_component:
+  name: lightning-dynamic-icon
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-dynamic-icon
+  mapping_notes: Direct mapping - Lightning component implements SLDS dynamic icon blueprint with animation support
+accessibility:
+  keyboard_support:
+  - Tab navigation to interactive dynamic icons
+  - Enter/Space to activate icon functions
+  - Focus indicators for interactive states
+  screen_reader:
+  - Icon purpose and state announced
+  - Animation status communicated
+  - Dynamic changes described appropriately
+  aria_attributes:
+  - aria-label for icon description
+  - aria-live for dynamic state changes
+  - role='img' for decorative icons
+  - role='button' for interactive icons
+  - aria-hidden for purely decorative elements
+usage_guidelines:
+  when_to_use:
+  - For interactive feedback and state indication
+  - When icons need to convey changing information
+  - For engaging user interface animations
+  - To show progress or activity states
+  when_not_to_use:
+  - For static decorative purposes (use regular icons)
+  - When animation might distract or confuse users
+  - In accessibility-sensitive contexts where motion should be reduced
+  best_practices:
+  - Use animations purposefully to convey meaning
+  - Provide reduced-motion alternatives
+  - Keep animations smooth and performant
+  - Ensure icons remain recognizable during animation
+  - Consider accessibility and motion sensitivity
+  common_mistakes:
+  - Overusing animation causing distraction
+  - Animations that are too fast or jarring
+  - Not providing static alternatives
+  - Poor performance with multiple animated icons
+code_examples:
+- title: Waffle Dynamic Icon
+  description: Dynamic score indicator with changing values
+  code: "<div class=\"slds-icon-score\" role=\"img\" aria-label=\"Current score: 85\">\n      <svg class=\"slds-icon slds-icon_large\"\
+    \ viewBox=\"0 0 100 100\">\n        <circle class=\"\" cx=\"50\" cy=\"50\" r=\"45\" stroke=\"#e0e5ee\" stroke-width=\"\
+    10\" fill=\"none\"/>\n        <circle class=\"slds-is-animated\" cx=\"50\" cy=\"50\" r=\"45\" stroke=\"#0176d3\" stroke-width=\"\
+    10\" fill=\"none\"\\ \n                stroke-dasharray=\"283\" stroke-dashoffset=\"42\" transform=\"rotate(-90 50 50)\"\
+    />\n        <text class=\"\" x=\"50\" y=\"50\" text-anchor=\"middle\" dy=\"0.3em\" font-size=\"20\" font-weight=\"bold\"\
+    >85</text>\n      </svg>\n      </div>\n"
+dependencies:
+  css_files:
+  - dynamic-icons.css
+  - icons.css
+  - animations.css
+  javascript:
+  - dynamic-icons.js
+  icons:
+  - dynamic-sprite.svg
+  - utility-sprite.svg
+  other_components:
+  - button
+  - icon
+related_components:
+- name: Icon
+  relationship: parent
+  description: Dynamic icons extend basic icon functionality
+- name: Button
+  relationship: container
+  description: Often used within button components
+- name: Spinner
+  relationship: similar
+  description: Similar animated feedback concept
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/dynamic-icons/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-12'
+  review_status: complete
+  notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'

package/skills/applying-slds/metadata/blueprints/components/dynamic-menu.yaml

@@ -0,0 +1,141 @@
+name: Dynamic Menu
+description: A menu component that displays contextual navigation or actions in a popover dialog. It provides a flexible container
+  for menu items with header and footer support, typically triggered by a button or other interaction.
+category: Navigation
+slds_classes:
+  root: slds-dynamic-menu
+  elements:
+  - class: slds-dynamic-menu__header
+    description: Header section of the dynamic menu
+    purpose: Contains the menu title or heading
+  modifiers: []
+  states: []
+variants:
+- name: Base
+  description: Standard dynamic menu in popover
+  classes:
+  - slds-dynamic-menu
+  usage_context: Default menu implementation with header and footer support
+  differences: Displayed in a popover dialog with role='dialog'
+lightning_component:
+  name: lightning-menu
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-menu
+  mapping_notes: lightning-menu provides dynamic menu functionality with menu items
+accessibility:
+  keyboard_support:
+  - Tab to navigate between menu items
+  - Arrow keys to move through menu options
+  - Enter or Space to select menu item
+  - Escape to close menu
+  screen_reader:
+  - Dialog role announced
+  - Menu header announced
+  - Menu items announced as clickable actions
+  - Current selection state communicated
+  aria_attributes:
+  - role='dialog' on menu container
+  - aria-labelledby pointing to menu header
+  - aria-describedby for additional context
+  - Focus management when opening/closing
+usage_guidelines:
+  when_to_use:
+  - For contextual navigation menus
+  - When menu content changes based on context
+  - For action menus triggered by buttons
+  - When you need a menu with header and footer
+  when_not_to_use:
+  - For simple dropdown select (use select or combobox)
+  - For static navigation (use standard menu)
+  - When content doesn't change dynamically
+  - For very simple action lists (use dropdown menu)
+  best_practices:
+  - Provide clear, descriptive header text
+  - Group related menu items logically
+  - Use appropriate icons for menu items
+  - Ensure proper focus management
+  - Close menu on selection or Escape key
+  - Position menu appropriately relative to trigger
+  common_mistakes:
+  - Missing dialog role for accessibility
+  - Poor keyboard navigation support
+  - Not managing focus properly
+  - Unclear menu item labels
+  - Menu not closing on selection
+code_examples:
+- title: Basic Dynamic Menu
+  code: "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top-left\" role=\"dialog\" aria-labelledby=\"menu-header\"\
+    \ aria-describedby=\"menu-body\">\n  <div class=\"slds-popover__header\">\n    <h3 id=\"menu-header\" class=\"slds-dynamic-menu__header\"\
+    >Menu Options</h3>\n  </div>\n  <div id=\"menu-body\" class=\"slds-popover__body\">\n    <ul class=\"\" role=\"menu\"\
+    >\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"\
+    0\">\n          <span class=\"slds-truncate\" title=\"Menu Item 1\">Menu Item 1</span>\n        </a>\n      </li>\n  \
+    \    <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\"\
+    >\n          <span class=\"slds-truncate\" title=\"Menu Item 2\">Menu Item 2</span>\n        </a>\n      </li>\n     \
+    \ <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n\
+    \          <span class=\"slds-truncate\" title=\"Menu Item 3\">Menu Item 3</span>\n        </a>\n      </li>\n    </ul>\n\
+    \  </div>\n</section>\n"
+  description: Basic dynamic menu with header and menu items
+- title: Dynamic Menu with Footer
+  code: "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top\" role=\"dialog\" aria-labelledby=\"menu-header-2\"\
+    \ aria-describedby=\"menu-body-2\">\n  <div class=\"slds-popover__header\">\n    <h3 id=\"menu-header-2\" class=\"slds-dynamic-menu__header\"\
+    >Actions</h3>\n  </div>\n  <div id=\"menu-body-2\" class=\"slds-popover__body\">\n    <ul class=\"\" role=\"menu\">\n\
+    \      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"0\"\
+    >\n          <span class=\"slds-truncate\" title=\"Action 1\">Action 1</span>\n        </a>\n      </li>\n      <li class=\"\
+    slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n          <span\
+    \ class=\"slds-truncate\" title=\"Action 2\">Action 2</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"\
+    slds-popover__footer\">\n    <a href=\"#\" class=\"slds-text-link\">View All</a>\n  </div>\n</section>\n"
+  description: Dynamic menu with header, items, and footer link
+- title: Dynamic Menu with Icons
+  code: "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top-right\" role=\"dialog\" aria-labelledby=\"menu-header-3\"\
+    >\n  <div class=\"slds-popover__header\">\n    <h3 id=\"menu-header-3\" class=\"slds-dynamic-menu__header\">Document Actions</h3>\n\
+    \  </div>\n  <div class=\"slds-popover__body\">\n    <ul class=\"\" role=\"menu\">\n      <li class=\"slds-dropdown__item\"\
+    \ role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"0\">\n          <span class=\"slds-icon_container\
+    \ slds-icon-utility-download slds-m-right_x-small\">\n            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"\
+    true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>\n            </svg>\n\
+    \          </span>\n          <span class=\"slds-truncate\" title=\"Download\">Download</span>\n        </a>\n      </li>\n\
+    \      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"menuitem\" tabindex=\"-1\"\
+    >\n          <span class=\"slds-icon_container slds-icon-utility-share slds-m-right_x-small\">\n            <svg class=\"\
+    slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#share\"\
+    ></use>\n            </svg>\n          </span>\n          <span class=\"slds-truncate\" title=\"Share\">Share</span>\n\
+    \        </a>\n      </li>\n      <li class=\"slds-dropdown__item\" role=\"presentation\">\n        <a href=\"#\" role=\"\
+    menuitem\" tabindex=\"-1\">\n          <span class=\"slds-icon_container slds-icon-utility-delete slds-m-right_x-small\"\
+    >\n            <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#delete\"\
+    ></use>\n            </svg>\n          </span>\n          <span class=\"slds-truncate\" title=\"Delete\">Delete</span>\n\
+    \        </a>\n      </li>\n    </ul>\n  </div>\n</section>\n"
+  description: Dynamic menu with icons next to menu items
+styling_hooks: []
+dependencies:
+  css_files:
+  - dynamic-menu.css
+  - popover.css
+  - dropdown.css
+  javascript:
+  - Menu open/close management
+  - Keyboard navigation
+  - Focus management
+  - Click outside to close
+  icons:
+  - Various utility icons for menu items
+  other_components:
+  - popover
+  - dropdown
+  - menu
+related_components:
+- name: Menu
+  relationship: parent
+  description: Base menu component
+- name: Dropdown
+  relationship: similar
+  description: Alternative menu pattern for simpler use cases
+- name: Popover
+  relationship: container
+  description: Popover container for the menu
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/dynamic-menu/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-11'
+  author: SLDS Documentation Team
+  slds_version: 2.27.2
+  review_status: complete
+  source: official-slds
+  notes: Created from official SLDS documentation and design-system-internal source code

package/skills/applying-slds/metadata/blueprints/components/expandable-section.yaml

@@ -0,0 +1,115 @@
+name: "Expandable Section"
+description: "A content container that can be expanded or collapsed to show or hide detailed information, providing progressive disclosure of content."
+category: "Layout"
+slds_classes:
+  root: "slds-section"
+  elements:
+    - class: "slds-section__title"
+      description: "Header area with expand/collapse control"
+      purpose: "Contains title and toggle button for section"
+    - class: "slds-section__title-action"
+      description: "Clickable area for expand/collapse"
+      purpose: "Interactive element to toggle section state"
+    - class: "slds-section__content"
+      description: "Collapsible content area"
+      purpose: "Contains the expandable section content"
+  modifiers: []
+  states:
+    - class: "slds-is-open"
+      description: "Expanded section state"
+      trigger: "When section content is visible"
+    - class: "slds-is-closed"
+      description: "Collapsed section state"
+      trigger: "When section content is hidden"
+variants:
+  - name: "Base"
+    description: "Standard expandable section"
+    classes:
+      - "slds-section"
+    usage_context: "Default expandable section for progressive disclosure"
+    differences: "Toggleable content section with expand/collapse control"
+lightning_component:
+  name: "No direct component"
+  url: "https://developer.salesforce.com/docs/component-library/overview/components"
+  mapping_notes: "No direct Lightning Base Component equivalent - typically implemented as custom component"
+accessibility:
+  keyboard_support:
+    - "Tab to focus expand/collapse button"
+    - "Enter/Space to toggle section state"
+    - "Tab to navigate through expanded content"
+  screen_reader:
+    - "Section title and current state announced"
+    - "Expansion state changes communicated"
+    - "Content availability indicated clearly"
+  aria_attributes:
+    - "aria-expanded on toggle button"
+    - "aria-controls linking button to content"
+    - "aria-labelledby for content area"
+    - "role='button' for toggle element"
+usage_guidelines:
+  when_to_use:
+    - "To manage large amounts of content in limited space"
+    - "For optional or secondary information"
+    - "When content hierarchy needs progressive disclosure"
+    - "To reduce cognitive load by hiding details initially"
+  when_not_to_use:
+    - "For critical information users must see"
+    - "When all content should be immediately visible"
+    - "For single pieces of simple information"
+  best_practices:
+    - "Use clear, descriptive section titles"
+    - "Provide visual indicators for expand/collapse state"
+    - "Group related content logically"
+    - "Consider default expanded state for important content"
+    - "Maintain consistent interaction patterns"
+  common_mistakes:
+    - "Hiding critical information in collapsed sections"
+    - "Unclear section titles or purposes"
+    - "Poor visual indicators for state"
+    - "Inconsistent expand/collapse behavior"
+code_examples:
+  - title: "Expandable Section"
+    code: |
+      <div class="slds-section slds-is-open">
+            <h3 class="slds-section__title">
+              <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action">
+                <svg class="slds-section__title-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
+                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                </svg>
+                <span class="slds-truncate" title="Section Title">Section Title</span>
+              </button>
+            </h3>
+            <div aria-hidden="false" class="slds-section__content" id="expando-unique-id">
+              <p>This is the expandable content area. It can contain any type of content including text, forms, lists, or other components.</p>
+            </div>
+            </div>
+styling_hooks: []
+dependencies:
+  css_files:
+    - "section.css"
+    - "button.css"
+  javascript:
+    - "section.js"
+  icons:
+    - "utility-sprite.svg"
+  other_components:
+    - "button"
+    - "icons"
+    - "truncate"
+related_components:
+  - name: "Accordion"
+    relationship: "similar"
+    description: "Similar expand/collapse pattern for multiple sections"
+  - name: "Tabs"
+    relationship: "alternative"
+    description: "Alternative for organizing multiple content areas"
+  - name: "Cards"
+    relationship: "container"
+    description: "Often used within card components"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/expandable-section/"
+metadata:
+  version: "1.0.0"
+  last_updated: "2025-11-12"
+  review_status: "complete"
+  notes: " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."

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

@@ -0,0 +1,143 @@
+name: Expression
+description: A formula builder interface that allows users to construct complex expressions, calculations, and logical conditions
+  through visual components, operators, and functions with syntax validation and auto-completion.
+category: Input
+slds_classes:
+  root: ''
+  elements:
+  - class: slds-expression__group
+    description: Logical grouping container for expression elements
+    purpose: Groups related expression components together
+  - class: slds-expression__row
+    description: Individual row within expression builder
+    purpose: Contains a single expression statement or condition
+  - class: slds-expression__buttons
+    description: Action buttons for expression manipulation
+    purpose: Contains add, remove, and group action buttons
+  modifiers: []
+  states:
+  - class: slds-has-error
+    description: Error state for invalid expressions
+    trigger: Applied when expression syntax is invalid
+  - class: slds-is-editing
+    description: Active editing state
+    trigger: Applied when user is actively editing expression
+variants:
+- name: Base
+  description: Standard expression builder interface
+  classes: []
+  usage_context: Default implementation for expression building
+  differences: Basic expression builder with fields and operators
+- name: Compound
+  description: Multi-condition expression builder
+  classes: []
+  usage_context: When multiple logical conditions are needed
+  differences: Support for AND/OR logic and grouped conditions
+- name: Advanced
+  description: Advanced expression builder with functions
+  classes: []
+  usage_context: When complex calculations and functions are required
+  differences: Includes function library and advanced operators
+lightning_component:
+  name: No direct component
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component equivalent - typically implemented using custom components with lightning-combobox
+    and lightning-input patterns
+accessibility:
+  keyboard_support:
+  - Tab navigation through expression elements
+  - Enter/Space to activate buttons and dropdowns
+  - Arrow keys for navigating expression components
+  - Delete/Backspace to remove expression elements
+  screen_reader:
+  - Expression structure and logic announced
+  - Field and operator selections described
+  - Validation errors clearly communicated
+  - Expression summary provided
+  aria_attributes:
+  - role='group' for expression sections
+  - aria-label for expression components
+  - aria-describedby for validation messages
+  - aria-expanded for collapsible groups
+  - aria-invalid for error states
+usage_guidelines:
+  when_to_use:
+  - For building complex business rules and formulas
+  - When users need to create calculated fields
+  - For advanced filtering and search criteria
+  - In workflow and automation rule builders
+  when_not_to_use:
+  - For simple single-field filters (use basic inputs)
+  - When users don't need complex logic
+  - For purely visual/design-related conditions
+  best_practices:
+  - Provide clear field and operator labels
+  - Include helpful examples and documentation
+  - Validate expressions in real-time
+  - Offer function assistance and auto-completion
+  - Group related conditions logically
+  common_mistakes:
+  - Poor validation feedback
+  - Overwhelming users with too many options
+  - Unclear operator meanings
+  - Not providing expression examples
+code_examples:
+- title: Basic Expression Builder
+  description: Advanced expression builder including functions and calculations
+  code: "<div class=\"\">\n      <div class=\"\">\n        <div class=\"slds-expression__group\">\n          <div class=\"\
+    slds-expression__row\">\n            <div class=\"slds-grid slds-grid_align-center\">\n              <div class=\"slds-col\"\
+    >\n                <div class=\"slds-form-element\">\n                  <label class=\"slds-form-element__label\">Function</label>\n\
+    \                  <div class=\"slds-form-element__control\">\n                    <div class=\"slds-combobox_container\"\
+    >\n                      <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\">\n           \
+    \             <div class=\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\">\n            \
+    \              <input type=\"text\" class=\"slds-input slds-combobox__input\" value=\"SUM(\" readonly>\n             \
+    \             <span class=\"slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right\">\n  \
+    \                          <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n                        \
+    \      <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>\n                            </svg>\n\
+    \                          </span>\n                        </div>\n                      </div>\n                   \
+    \ </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"slds-col\
+    \ slds-p-horizontal_x-small\">\n                <div class=\"slds-form-element\">\n                  <label class=\"slds-form-element__label\"\
+    >Field</label>\n                  <div class=\"slds-form-element__control\">\n                    <input type=\"text\"\
+    \ class=\"slds-input\" value=\"Opportunity Amount\">\n                  </div>\n                </div>\n             \
+    \ </div>\n              <div class=\"slds-col slds-no-flex\">\n                <span class=\"slds-text-body_regular\"\
+    >)</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"slds-expression__row slds-m-top_small\"\
+    >\n            <div class=\"slds-form-element\">\n              <label class=\"slds-form-element__label\">Preview</label>\n\
+    \              <div class=\"slds-form-element__control\">\n                <div class=\"slds-form-element__static slds-p-around_small\
+    \ slds-text-color_weak\">\n                  SUM(Opportunity.Amount)\n                </div>\n              </div>\n \
+    \           </div>\n          </div>\n        </div>\n        <div class=\"slds-expression__buttons slds-m-top_small\"\
+    >\n          <div class=\"slds-button-group\">\n            <button class=\"slds-button slds-button_neutral\">Insert Field</button>\n\
+    \            <button class=\"slds-button slds-button_neutral\">Insert Function</button>\n            <button class=\"\
+    slds-button slds-button_neutral\">Insert Operator</button>\n          </div>\n        </div>\n      </div>\n      </div>\n"
+dependencies:
+  css_files:
+  - expression.css
+  - form-element.css
+  - combobox.css
+  - button.css
+  javascript:
+  - expression.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - form-element
+  - combobox
+  - button
+  - select
+  - input
+related_components:
+- name: Form Element
+  relationship: container
+  description: Uses form elements for input controls
+- name: Combobox
+  relationship: depends-on
+  description: Uses combobox for field and function selection
+- name: Visual Picker
+  relationship: alternative
+  description: Alternative for simpler selection scenarios
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/expression/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-12'
+  review_status: complete
+  notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'

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

@@ -0,0 +1,125 @@
+name: Feeds
+description: Activity feed component that displays a chronological list of updates, posts, or activities. Similar to social
+  media feeds, it shows user-generated content with timestamps and interactions.
+category: Complex Components
+slds_classes:
+  root: slds-feed
+  elements:
+  - class: slds-feed__list
+    description: List container for feed items
+    purpose: Holds the ordered list of feed entries
+  - class: slds-feed__item
+    description: Individual feed item
+    purpose: Wraps each post or update in the feed
+  modifiers: []
+  states: []
+variants:
+- name: Base
+  description: Standard activity feed
+  classes:
+  - slds-feed
+  usage_context: Default feed implementation for activity streams
+  differences: Chronological list of user activities and updates
+lightning_component:
+  name: ''
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component - typically built with custom components or lightning-record-view-form
+accessibility:
+  keyboard_support:
+  - Tab to navigate through feed items
+  - Enter to activate links or actions
+  - Arrow keys to scroll through feed
+  screen_reader:
+  - Feed role announced
+  - Feed items announced in order
+  - Timestamps and authors announced
+  - New items announced when added
+  aria_attributes:
+  - role='feed' on container
+  - role='article' on feed items
+  - aria-label for feed region
+  - aria-posinset and aria-setsize for position
+  - aria-live for new items (polite)
+usage_guidelines:
+  when_to_use:
+  - For social activity streams
+  - To display chronological updates
+  - For user-generated content feeds
+  - In collaboration or communication features
+  when_not_to_use:
+  - For static content lists
+  - When chronology isn't important
+  - For structured data tables
+  - When real-time updates aren't needed
+  best_practices:
+  - Display items in reverse chronological order (newest first)
+  - Include timestamps on all items
+  - Show author/source clearly
+  - Support infinite scroll or pagination
+  - Provide refresh mechanism
+  - Handle real-time updates smoothly
+  common_mistakes:
+  - Poor performance with many items
+  - Missing timestamps
+  - Unclear authorship
+  - Not handling new items gracefully
+  - Inadequate loading states
+code_examples:
+- title: Basic Feed
+  code: "<div class=\"slds-feed\" role=\"feed\" aria-label=\"Activity feed\">\n  <ul class=\"slds-feed__list\">\n    <li class=\"\
+    slds-feed__item\" role=\"article\">\n      <article class=\"slds-post\">\n        <header class=\"slds-post__header\"\
+    >\n          <div class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__figure\">\n          \
+    \    <span class=\"slds-avatar slds-avatar_circle slds-avatar_medium\">\n                <img src=\"/assets/images/avatar1.jpg\"\
+    \ alt=\"John Doe\" />\n              </span>\n            </div>\n            <div class=\"slds-media__body\">\n     \
+    \         <p class=\"\">John Doe</p>\n              <p class=\"slds-text-body_small\">2 hours ago</p>\n            </div>\n\
+    \          </div>\n        </header>\n        <div class=\"slds-post__content\">\n          <p>Just completed the Q4 presentation\
+    \ deck. Ready for review!</p>\n        </div>\n        <footer class=\"slds-post__footer\">\n          <ul class=\"slds-list_horizontal\
+    \ slds-has-dividers_left\">\n            <li class=\"slds-item\">Like</li>\n            <li class=\"slds-item\">Comment</li>\n\
+    \            <li class=\"slds-item\">Share</li>\n          </ul>\n        </footer>\n      </article>\n    </li>\n   \
+    \ <li class=\"slds-feed__item\" role=\"article\">\n      <article class=\"slds-post\">\n        <header class=\"slds-post__header\"\
+    >\n          <div class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__figure\">\n          \
+    \    <span class=\"slds-avatar slds-avatar_circle slds-avatar_medium\">\n                <img src=\"/assets/images/avatar2.jpg\"\
+    \ alt=\"Jane Smith\" />\n              </span>\n            </div>\n            <div class=\"slds-media__body\">\n   \
+    \           <p class=\"\">Jane Smith</p>\n              <p class=\"slds-text-body_small\">5 hours ago</p>\n          \
+    \  </div>\n          </div>\n        </header>\n        <div class=\"slds-post__content\">\n          <p>Great team meeting\
+    \ today! Looking forward to our next sprint.</p>\n        </div>\n        <footer class=\"slds-post__footer\">\n     \
+    \     <ul class=\"slds-list_horizontal slds-has-dividers_left\">\n            <li class=\"slds-item\">Like (3)</li>\n\
+    \            <li class=\"slds-item\">Comment (1)</li>\n            <li class=\"slds-item\">Share</li>\n          </ul>\n\
+    \        </footer>\n      </article>\n    </li>\n  </ul>\n</div>\n"
+  description: Activity feed with posts from multiple users
+styling_hooks: []
+dependencies:
+  css_files:
+  - feeds.css
+  - post.css
+  - avatar.css
+  javascript:
+  - Infinite scroll or pagination
+  - Real-time update handling
+  - Post interaction handlers
+  - Feed refresh mechanism
+  icons: []
+  other_components:
+  - avatar
+  - post
+  - media-object
+related_components:
+- name: Activity Timeline
+  relationship: similar
+  description: Alternative chronological display
+- name: Chat
+  relationship: similar
+  description: Similar messaging pattern
+- name: Publisher
+  relationship: complementary
+  description: Input component for creating feed posts
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/feeds/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-11'
+  author: SLDS Documentation Team
+  slds_version: 2.27.2
+  review_status: complete
+  source: official-slds
+  notes: Created from official SLDS documentation and design-system-internal source code