@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

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

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