@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

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

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