@salesforce/afv-skills 1.14.0 → 1.16.0

package/skills/applying-slds/metadata/blueprints/components/avatar-group.yaml

@@ -0,0 +1,81 @@
+name: Avatar Group
+description: A collection of avatars displayed together, typically used to show multiple users or entities associated with
+  a record or activity.
+category: Display
+slds_classes:
+  root: slds-avatar-group
+  elements: []
+  modifiers:
+  - class: slds-avatar-group_small
+    description: Small avatar group variant
+    usage: Use when space is limited
+  - class: slds-avatar-group_medium
+    description: Medium avatar group variant (default)
+    usage: Default size for most use cases
+  - class: slds-avatar-group_large
+    description: Large avatar group variant
+    usage: Use for prominence or when space allows
+  states: []
+variants:
+- name: Base
+  description: Standard avatar group with overlapping avatars
+  classes:
+  - slds-avatar-group
+  usage_context: Default implementation for multiple user representation
+  differences: Overlapping circular avatars with proper spacing
+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 built using multiple lightning-avatar components
+accessibility:
+  keyboard_support:
+  - Tab navigation through interactive avatars if clickable
+  screen_reader:
+  - List structure conveyed through proper markup
+  - Individual avatar labels announced
+  aria_attributes:
+  - role='list' for the avatar group container
+  - role='listitem' for individual avatar items
+usage_guidelines:
+  when_to_use:
+  - To show multiple users associated with a record
+  - For team or collaboration indicators
+  - When displaying attendees or participants
+  when_not_to_use:
+  - For single users (use individual avatar instead)
+  - When space doesn't allow for proper overlap visualization
+  best_practices:
+  - Limit to 3-5 visible avatars for optimal readability
+  - Show additional count for larger groups
+  - Maintain consistent avatar sizes within the group
+  common_mistakes:
+  - Showing too many avatars without grouping or count
+  - Inconsistent avatar sizes within the group
+code_examples:
+- title: Basic Avatar Group
+  description: Basic avatar group with two users
+  code: "<div class=\"slds-avatar-group slds-avatar-group_medium\">\n      <ul class=\"\">\n        <li class=\"\">\n    \
+    \      <span class=\"slds-avatar slds-avatar_medium\">\n            <img alt=\"John Doe\" src=\"/assets/images/avatar1.jpg\"\
+    \ class=\"\" />\n          </span>\n        </li>\n        <li class=\"\">\n          <span class=\"slds-avatar slds-avatar_medium\"\
+    >\n            <img alt=\"Jane Smith\" src=\"/assets/images/avatar2.jpg\" class=\"\" />\n          </span>\n        </li>\n\
+    \      </ul>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - avatar-group.css
+  - avatar.css
+  javascript: []
+  icons: []
+  other_components:
+  - avatar
+related_components:
+- name: Avatar
+  relationship: depends-on
+  description: Individual avatars that make up the group
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/avatar-group/
+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/avatar.yaml

@@ -0,0 +1,97 @@
+name: Avatar
+description: A visual representation of an object, typically used to represent a user, account, or entity with customizable
+  sizing, shape, and fallback options.
+category: Display
+slds_classes:
+  root: slds-avatar
+  elements:
+  - class: slds-avatar__initials
+    description: Text initials when no image is available
+    purpose: Displays initials as fallback when image is not available
+  modifiers:
+  - class: slds-avatar_circle
+    description: Circular avatar shape
+    usage: Default circular appearance for avatars
+  - class: slds-avatar_x-small
+    description: Extra small avatar size
+    usage: Use in constrained spaces like dense lists
+  - class: slds-avatar_small
+    description: Small avatar size
+    usage: Use in compact layouts
+  - class: slds-avatar_medium
+    description: Medium avatar size (default)
+    usage: Default size for most use cases
+  - class: slds-avatar_large
+    description: Large avatar size
+    usage: Use for profile pages or prominent display
+  states: []
+variants:
+- name: Base
+  description: Avatar with image
+  classes:
+  - slds-avatar
+  usage_context: Default avatar with user or entity image
+  differences: Shows actual image of the person or entity
+- name: Initials
+  description: Avatar with initials fallback
+  classes:
+  - slds-avatar
+  usage_context: When no image is available, shows initials
+  differences: Displays text initials instead of image
+lightning_component:
+  name: lightning-avatar
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-avatar
+  mapping_notes: Direct mapping - Lightning component implements SLDS avatar blueprint
+accessibility:
+  keyboard_support:
+  - No specific keyboard interactions (display-only component)
+  screen_reader:
+  - Alt text announced for images
+  - Initials announced when used as fallback
+  aria_attributes:
+  - alt attribute for image avatars
+  - aria-label for initials avatars
+usage_guidelines:
+  when_to_use:
+  - To represent users, accounts, or entities visually
+  - In lists, cards, or headers where identification is needed
+  - When you need consistent visual representation
+  when_not_to_use:
+  - For decorative images
+  - When the representation doesn't relate to a person or entity
+  - For actionable content
+  best_practices:
+  - Use appropriate size for the context
+  - Provide meaningful alt text for images
+  - Use initials as fallback when images aren't available
+  common_mistakes:
+  - Using avatars for non-person/entity content
+  - Not providing fallback options
+  - Inconsistent sizing within the same interface
+code_examples:
+- title: Basic Avatar
+  code: "<span class=\"slds-avatar slds-avatar_medium\">\n      <img alt=\"Person name\" src=\"/assets/images/avatar1.jpg\"\
+    \ class=\"\" />\n      </span>\n"
+- title: Initials Avatar
+  code: "<span class=\"slds-avatar slds-avatar_medium\">\n      <abbr class=\"slds-avatar__initials\" title=\"John Doe\">JD</abbr>\n\
+    \      </span>\n"
+dependencies:
+  css_files:
+  - avatar.css
+  javascript: []
+  icons: []
+  other_components: []
+related_components:
+- name: Avatar Group
+  relationship: container
+  description: Groups multiple avatars together
+- name: Media Objects
+  relationship: depends-on
+  description: Often used within media object patterns
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/avatar/
+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/badges.yaml

@@ -0,0 +1,102 @@
+name: "Badges"
+
+description: "Small status descriptors for UI elements that indicate metadata, state, or other contextual information about an item."
+
+category: "Display"
+
+slds_classes:
+  root: "slds-badge"
+  elements: []
+  modifiers:
+    - class: "slds-badge_lightest"
+      description: "Lightest badge variant"
+      usage: "Subtle, low-emphasis status indication"
+    - class: "slds-badge_inverse"
+      description: "Inverse badge for dark backgrounds"
+      usage: "Use on dark or colored backgrounds"
+  states: []
+
+variants:
+  - name: "Base"
+    description: "Standard badge with default styling"
+    classes: ["slds-badge"]
+    usage_context: "Default status or metadata indicator"
+    differences: "Standard gray badge with medium contrast"
+
+styling_hooks:
+  - name: "--slds-c-badge-color-background"
+    description: "Background color for badges"
+    category: "color"
+  - name: "--slds-c-badge-text-color"
+    description: "Text color for badges"
+    category: "color"
+
+lightning_component:
+  name: "lightning-badge"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-badge"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS badge blueprint"
+
+accessibility:
+  keyboard_support:
+    - "No specific keyboard interactions (display-only component)"
+  screen_reader:
+    - "Badge text content announced"
+    - "Context conveyed through proper labeling"
+  aria_attributes:
+    - "aria-label when badge content needs clarification"
+    - "role='status' for dynamic badge updates"
+
+usage_guidelines:
+  when_to_use:
+    - "To indicate status or state of an item"
+    - "For showing counts or quantities"
+    - "To display metadata or categories"
+    - "When you need compact status indicators"
+  when_not_to_use:
+    - "For actionable elements (use buttons instead)"
+    - "For primary content (use regular text instead)"
+    - "When the information is critical (use alerts instead)"
+  best_practices:
+    - "Keep badge text short and descriptive"
+    - "Use consistent badge styling within the same context"
+    - "Choose appropriate variant for the background"
+    - "Provide clear context for what the badge represents"
+  common_mistakes:
+    - "Using badges for interactive elements"
+    - "Making badge text too long or verbose"
+    - "Using too many different badge styles in one interface"
+
+code_examples:
+  - title: "Basic Badge"
+    description: "Basic badge with default styling"
+    code: |
+      <span class="slds-badge">Badge Label</span>
+  - title: "Lightest Badge"
+    description: "Subtle badge for counts or low-emphasis status"
+    code: |
+      <span class="slds-badge slds-badge_lightest">99+</span>
+  - title: "Inverse Badge"
+    description: "Badge for use on dark backgrounds"
+    code: |
+      <span class="slds-badge slds-badge_inverse">Active</span>
+dependencies:
+  css_files: ["badge.css"]
+  javascript: []
+  icons: []
+  other_components: []
+
+related_components:
+  - name: "Pills"
+    relationship: "similar"
+    description: "Similar visual treatment but for removable items"
+  - name: "Icons"
+    relationship: "depends-on"
+    description: "Often used together to enhance meaning"
+
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/badges/"
+
+metadata:
+  version: "1.0.0"
+  last_updated: "2024-12-19"
+  review_status: "complete"

package/skills/applying-slds/metadata/blueprints/components/brand-band.yaml

@@ -0,0 +1,198 @@
+name: Brand Band
+description: A visual header component that displays branding elements, organizational identity, and context information,
+  typically positioned at the top of applications to establish brand presence and visual hierarchy.
+category: Layout
+slds_classes:
+  root: slds-brand-band
+  elements: []
+  modifiers:
+  - class: slds-brand-band_small
+    description: Small brand band height
+    usage: For compact brand display
+  - class: slds-brand-band_medium
+    description: Medium brand band height
+    usage: Standard brand band sizing
+  - class: slds-brand-band_large
+    description: Large brand band height
+    usage: For prominent brand display
+  - class: slds-brand-band_cover
+    description: Cover-style brand band
+    usage: For full-width background coverage
+  states: []
+variants:
+- name: Base
+  description: Standard brand band with basic branding
+  classes:
+  - slds-brand-band
+  usage_context: Default implementation for application branding
+  differences: Basic brand display with title and optional image
+- name: Small
+  description: Compact brand band for minimal branding
+  classes:
+  - slds-brand-band
+  - slds-brand-band_small
+  usage_context: When space is limited or subtle branding is preferred
+  differences: Reduced height and compact layout
+- name: Large
+  description: Prominent brand band for strong brand presence
+  classes:
+  - slds-brand-band
+  - slds-brand-band_large
+  usage_context: For landing pages or primary brand displays
+  differences: Increased height and prominent branding elements
+- name: Cover
+  description: Full-width background brand band
+  classes:
+  - slds-brand-band
+  - slds-brand-band_cover
+  usage_context: For hero-style brand presentations
+  differences: Full-width background with overlay content
+lightning_component:
+  name: lightning-brand-band
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: Brand band functionality often implemented through custom header components or app branding
+accessibility:
+  keyboard_support:
+  - Tab navigation through brand band interactive elements
+  - Focus management for brand band controls
+  screen_reader:
+  - Brand information properly announced
+  - Image alt text provided for brand images
+  - Brand context clearly communicated
+  aria_attributes:
+  - role='banner' for page header branding
+  - aria-label for brand context
+  - aria-describedby for additional brand information
+usage_guidelines:
+  when_to_use:
+  - For establishing application or organizational branding
+  - When brand presence needs to be prominent
+  - In application headers and landing pages
+  - For organizational identity and context
+  when_not_to_use:
+  - In content areas where branding would be distracting
+  - For functional navigation (use navigation components)
+  - When minimal branding approach is preferred
+  best_practices:
+  - Keep branding consistent across application
+  - Ensure brand elements are accessible
+  - Use appropriate sizing for context
+  - Maintain brand guidelines and standards
+  - Consider responsive behavior
+  common_mistakes:
+  - Overusing brand elements throughout interface
+  - Poor contrast for brand text and images
+  - Inconsistent brand presentation
+  - Missing accessibility considerations
+code_examples:
+- title: Basic Brand Band
+  description: Standard brand band with logo and title
+  code: "<div class=\"slds-brand-band\" role=\"banner\">\n      <div class=\"\">\n        <div class=\"\">\n          <div\
+    \ class=\"slds-media slds-media_center\">\n            <div class=\"slds-media__figure\">\n              <div class=\"\
+    \">\n                <img src=\"/assets/images/logo.png\" alt=\"Company Logo\" style=\"height: 40px;\" />\n          \
+    \    </div>\n            </div>\n            <div class=\"slds-media__body\">\n              <h1 class=\"slds-text-heading_medium\"\
+    >\n                Application Name\n              </h1>\n              <p class=\"slds-text-body_small slds-text-color_weak\"\
+    >\n                Powered by Salesforce\n              </p>\n            </div>\n          </div>\n        </div>\n \
+    \     </div>\n      </div>\n"
+- title: Large Brand Band
+  description: Prominent brand band with additional controls
+  code: "<div class=\"slds-brand-band slds-brand-band_large\" role=\"banner\">\n      <div class=\"slds-p-around_medium\"\
+    >\n        <div class=\"\">\n          <div class=\"slds-grid slds-grid_align-spread slds-grid_vertical-align-center\"\
+    >\n            <div class=\"slds-col\">\n              <div class=\"slds-media slds-media_center\">\n                <div\
+    \ class=\"slds-media__figure\">\n                  <div class=\"\">\n                    <span class=\"slds-icon_container\
+    \ slds-icon_container_circle\" style=\"background-color: #1589ee;\">\n                      <svg class=\"slds-icon slds-icon_large\"\
+    \ aria-hidden=\"true\" style=\"fill: white;\">\n                        <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#sales_cloud\"\
+    ></use>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n\
+    \                <div class=\"slds-media__body\">\n                  <h1 class=\"slds-text-heading_large\">\n        \
+    \            Sales Cloud\n                  </h1>\n                  <p class=\"slds-text-body_regular slds-text-color_weak\"\
+    >\n                    Enterprise Customer Relationship Management\n                  </p>\n                </div>\n \
+    \             </div>\n            </div>\n            <div class=\"slds-col slds-no-flex\">\n              <div class=\"\
+    \">\n                <div class=\"slds-button-group\" role=\"group\">\n                  <button class=\"slds-button slds-button_neutral\"\
+    >\n                    Settings\n                  </button>\n                  <button class=\"slds-button slds-button_brand\"\
+    >\n                    Get Started\n                  </button>\n                </div>\n              </div>\n      \
+    \      </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
+- title: Small Brand Band
+  description: Compact brand band for minimal branding
+  code: "<div class=\"slds-brand-band slds-brand-band_small\" role=\"banner\">\n      <div class=\"slds-p-horizontal_medium\
+    \ slds-p-vertical_small\">\n        <div class=\"\">\n          <div class=\"slds-media slds-media_center\">\n       \
+    \     <div class=\"slds-media__figure\">\n              <div class=\"\">\n                <span class=\"slds-icon_container\"\
+    \ style=\"background-color: transparent;\">\n                  <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"\
+    true\" style=\"fill: #0176d3;\">\n                    <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#salesforce1\"\
+    ></use>\n                  </svg>\n                </span>\n              </div>\n            </div>\n            <div\
+    \ class=\"slds-media__body\">\n              <h1 class=\"slds-text-heading_small\">\n                Service Console\n\
+    \              </h1>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
+- title: Cover Brand Band
+  description: Full-width background brand band with overlay
+  code: "<div class=\"slds-brand-band slds-brand-band_cover slds-brand-band_large\" role=\"banner\" style=\"background: linear-gradient(135deg,\
+    \ #667eea 0%, #764ba2 100%); color: white;\">\n      <div class=\"slds-p-around_large\">\n        <div class=\"slds-text-align_center\"\
+    >\n          <div class=\"slds-m-bottom_medium\">\n            <span class=\"slds-icon_container slds-icon_container_circle\"\
+    \ style=\"background-color: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3);\">\n              <svg class=\"\
+    slds-icon\" aria-hidden=\"true\" style=\"fill: white;\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#marketing_cloud\"\
+    ></use>\n              </svg>\n            </span>\n          </div>\n          <h1 class=\"slds-text-heading_large slds-m-bottom_small\"\
+    \ style=\"color: white;\">\n            Marketing Cloud\n          </h1>\n          <p class=\"slds-text-body_regular\
+    \ slds-m-bottom_medium\" style=\"color: rgba(255,255,255,0.8);\">\n            Drive personalized customer journeys at\
+    \ scale\n          </p>\n          <div class=\"\">\n            <button class=\"slds-button slds-button_neutral\">\n\
+    \              Learn More\n            </button>\n            <button class=\"slds-button slds-button_brand slds-m-left_small\"\
+    >\n              Start Free Trial\n            </button>\n          </div>\n        </div>\n      </div>\n      </div>\n"
+- title: Lightning Styled Brand Band
+  description: Brand band with Lightning Design System styling
+  code: "<div class=\"slds-brand-band slds-brand-band_medium\" role=\"banner\">\n      <div class=\"slds-p-around_medium\"\
+    \ style=\"background-color: #f3f2f2; border-bottom: 3px solid #0176d3;\">\n        <div class=\"\">\n          <div class=\"\
+    slds-grid slds-grid_align-spread slds-grid_vertical-align-center\">\n            <div class=\"slds-col\">\n          \
+    \    <div class=\"slds-media slds-media_center\">\n                <div class=\"slds-media__figure\">\n              \
+    \    <div class=\"\">\n                    <span class=\"slds-icon_container\" style=\"background-color: #0176d3;\">\n\
+    \                      <svg class=\"slds-icon\" aria-hidden=\"true\" style=\"fill: white;\">\n                       \
+    \ <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#lightning_component\"></use>\n                      </svg>\n\
+    \                    </span>\n                  </div>\n                </div>\n                <div class=\"slds-media__body\"\
+    >\n                  <h1 class=\"slds-text-heading_medium\">\n                    Lightning Experience\n             \
+    \     </h1>\n                  <p class=\"slds-text-body_small slds-text-color_weak\">\n                    Modern CRM\
+    \ Platform\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div\
+    \ class=\"slds-col slds-no-flex\">\n              <div class=\"\">\n                <span class=\"slds-badge\">\n    \
+    \              Beta\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n\
+    \      </div>\n      </div>\n"
+- title: Brand Band with Navigation
+  description: Brand band integrated with primary navigation
+  code: "<div class=\"slds-brand-band\" role=\"banner\">\n      <div class=\"\">\n        <div class=\"slds-p-around_medium\"\
+    \ style=\"border-bottom: 1px solid #e5e5e5;\">\n          <div class=\"slds-grid slds-grid_align-spread slds-grid_vertical-align-center\"\
+    >\n            <div class=\"slds-col\">\n              <div class=\"slds-media slds-media_center\">\n                <div\
+    \ class=\"slds-media__figure\">\n                  <div class=\"\">\n                    <img src=\"/assets/images/company-logo.svg\"\
+    \ alt=\"Company\" style=\"height: 32px;\" />\n                  </div>\n                </div>\n                <div class=\"\
+    slds-media__body\">\n                  <h1 class=\"slds-text-heading_small\">\n                    Customer Portal\n \
+    \                 </h1>\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-col\
+    \ slds-no-flex\">\n              <nav class=\"\" aria-label=\"Primary navigation\">\n                <ul class=\"slds-list_horizontal\
+    \ slds-has-dividers_right\">\n                  <li class=\"slds-list__item\">\n                    <a href=\"#dashboard\"\
+    \ class=\"slds-text-link\">Dashboard</a>\n                  </li>\n                  <li class=\"slds-list__item\">\n\
+    \                    <a href=\"#cases\" class=\"slds-text-link\">Cases</a>\n                  </li>\n                \
+    \  <li class=\"slds-list__item\">\n                    <a href=\"#account\" class=\"slds-text-link\">Account</a>\n   \
+    \               </li>\n                </ul>\n              </nav>\n            </div>\n          </div>\n        </div>\n\
+    \      </div>\n      </div>\n"
+dependencies:
+  css_files:
+  - brand-band.css
+  - grid.css
+  - media-object.css
+  javascript: []
+  icons:
+  - standard-sprite.svg
+  - utility-sprite.svg
+  other_components:
+  - button
+  - badge
+  - media-object
+related_components:
+- name: Global Header
+  relationship: similar
+  description: Similar header functionality
+- name: Page Header
+  relationship: similar
+  description: Similar page-level header concept
+- name: Global Navigation
+  relationship: depends-on
+  description: Often used together with navigation
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/brand-band/
+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/breadcrumbs.yaml

@@ -0,0 +1,95 @@
+name: Breadcrumbs
+description: A navigation aid that shows users their current location within a hierarchical structure and provides links to
+  navigate back to parent levels.
+category: Navigation
+slds_classes:
+  root: slds-breadcrumb
+  elements:
+  - class: slds-breadcrumb__item
+    description: Individual breadcrumb item wrapper
+    purpose: Contains a single breadcrumb link or text
+  modifiers: []
+  states:
+  - class: slds-is-current
+    description: Current page indicator
+    trigger: Applied to the current page breadcrumb item
+variants:
+- name: Base
+  description: Standard breadcrumb navigation with linked trail
+  classes:
+  - slds-breadcrumb
+  usage_context: Default implementation for hierarchical navigation
+  differences: Horizontal list of linked navigation items with separators
+lightning_component:
+  name: lightning-breadcrumbs
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-breadcrumbs
+  mapping_notes: Direct mapping - Lightning component implements SLDS breadcrumb blueprint
+accessibility:
+  keyboard_support:
+  - Tab navigation through breadcrumb links
+  - Enter/Space to activate breadcrumb links
+  screen_reader:
+  - Navigation landmark conveyed through proper markup
+  - Breadcrumb trail structure announced
+  - Current location clearly identified
+  aria_attributes:
+  - role='navigation' for breadcrumb container
+  - aria-label='Breadcrumb' for navigation context
+  - aria-current='page' for current location
+usage_guidelines:
+  when_to_use:
+  - For hierarchical navigation structures
+  - When users need to understand their current location
+  - To provide quick navigation to parent levels
+  - In multi-level content organization
+  when_not_to_use:
+  - For flat, non-hierarchical navigation
+  - When the hierarchy is only one level deep
+  - In mobile interfaces with limited space
+  best_practices:
+  - Keep breadcrumb labels concise and descriptive
+  - Show the full path to current location
+  - Make parent levels clickable for navigation
+  - Use consistent separator styling
+  - Position breadcrumbs near the top of content
+  common_mistakes:
+  - Making breadcrumb labels too long or verbose
+  - Not making parent levels clickable
+  - Using breadcrumbs for non-hierarchical content
+  - Inconsistent separator styling
+code_examples:
+- title: Basic Breadcrumbs
+  description: Standard breadcrumb navigation with multiple levels
+  code: "<nav class=\"slds-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n      <ol class=\"\">\n        <li\
+    \ class=\"slds-breadcrumb__item\">\n          <a href=\"#\" class=\"\">Home</a>\n        </li>\n        <li class=\"slds-breadcrumb__item\"\
+    >\n          <a href=\"#\" class=\"\">Parent Page</a>\n        </li>\n        <li class=\"slds-breadcrumb__item\">\n \
+    \         <span class=\"\" aria-current=\"page\">Current Page</span>\n        </li>\n      </ol>\n      </nav>\n"
+- title: Simple Breadcrumbs
+  description: Breadcrumb with only one parent level
+  code: "<nav class=\"slds-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n      <ol class=\"\">\n        <li\
+    \ class=\"slds-breadcrumb__item\">\n          <a href=\"#\" class=\"\">Parent Page</a>\n        </li>\n        <li class=\"\
+    slds-breadcrumb__item\">\n          <span class=\"\" aria-current=\"page\">Current Page</span>\n        </li>\n      </ol>\n\
+    \      </nav>\n"
+dependencies:
+  css_files:
+  - breadcrumb.css
+  javascript: []
+  icons: []
+  other_components: []
+related_components:
+- name: Path
+  relationship: similar
+  description: Similar navigation concept for process steps
+- name: Vertical Navigation
+  relationship: alternative
+  description: Alternative navigation pattern for hierarchical content
+- name: Global Navigation
+  relationship: container
+  description: Often contains breadcrumb navigation
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/breadcrumbs/
+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.'