@salesforce/afv-skills 1.22.0 → 1.23.0

package/skills/applying-slds/metadata/blueprints/components/file-selector.yaml

@@ -1,154 +0,0 @@
-name: File Selector
-description: A file upload interface that allows users to select and upload files through drag-and-drop areas, browse buttons,
-  or direct file input, with support for multiple files, file type restrictions, and upload progress indication.
-category: Input
-slds_classes:
-  root: slds-file-selector
-  elements:
-  - class: slds-file-selector__dropzone
-    description: Drag and drop zone for file selection
-    purpose: Provides area for dragging and dropping files
-  - class: slds-file-selector__body
-    description: Main content area of file selector
-    purpose: Contains file selection interface and messaging
-  - class: slds-file-selector__button
-    description: Browse button for file selection
-    purpose: Triggers file browser dialog
-  - class: slds-file-selector__input
-    description: Hidden file input element
-    purpose: Actual file input for form submission
-  - class: slds-file-selector__text
-    description: Instructional text within file selector
-    purpose: Provides guidance and instructions to users
-  modifiers:
-  - class: slds-file-selector_files
-    description: File selector with file list display
-    usage: When showing selected files is important
-  - class: slds-file-selector_images
-    description: Image-specific file selector
-    usage: When selector is specifically for images
-  - class: slds-file-selector_integrated
-    description: Integrated file selector within forms
-    usage: When file selector is part of a larger form
-  states:
-  - class: slds-has-drag-over
-    description: Drag over state for dropzone
-    trigger: Applied when files are being dragged over the dropzone
-  - class: slds-has-error
-    description: Error state for file selection
-    trigger: Applied when file upload or selection fails
-variants:
-- name: Base
-  description: Standard file selector with dropzone
-  classes:
-  - slds-file-selector
-  usage_context: Default implementation for file upload
-  differences: Basic dropzone with browse functionality
-- name: With Files
-  description: File selector displaying selected files
-  classes:
-  - slds-file-selector
-  - slds-file-selector_files
-  usage_context: When showing file list is important
-  differences: Includes file list display below selector
-- name: Images
-  description: Image-specific file selector
-  classes:
-  - slds-file-selector
-  - slds-file-selector_images
-  usage_context: Specifically for image uploads
-  differences: Optimized for image files with previews
-lightning_component:
-  name: lightning-file-upload
-  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload
-  mapping_notes: Direct mapping - Lightning component implements SLDS file selector blueprint with upload functionality
-accessibility:
-  keyboard_support:
-  - Tab navigation to file selector elements
-  - Enter/Space to activate browse button
-  - Enter/Space to select files in file list
-  - Delete/Backspace to remove selected files
-  screen_reader:
-  - File selector purpose and instructions announced
-  - Drag and drop capability communicated
-  - Selected files list properly structured
-  - Upload progress and status described
-  aria_attributes:
-  - aria-label for file input elements
-  - aria-describedby for instructions
-  - role='button' for dropzone areas
-  - aria-live for upload status updates
-  - aria-expanded for file lists
-usage_guidelines:
-  when_to_use:
-  - For file upload functionality
-  - When users need to attach documents
-  - For image or media upload scenarios
-  - In forms requiring file attachments
-  when_not_to_use:
-  - For text input (use input fields)
-  - When files aren't actually uploaded
-  - For purely decorative file interfaces
-  best_practices:
-  - Clearly indicate supported file types
-  - Provide file size limitations
-  - Show upload progress for large files
-  - Allow removal of selected files
-  - Validate files before upload
-  common_mistakes:
-  - Not specifying file type restrictions
-  - Poor error handling for invalid files
-  - Missing progress indicators
-  - Unclear instructions for users
-code_examples:
-- title: Basic File Selector
-  description: File selector showing upload progress
-  code: "<div class=\"slds-form-element\">\n      <span class=\"slds-form-element__label\">Upload Files</span>\n      <div\
-    \ class=\"slds-form-element__control\">\n        <div class=\"slds-file-selector slds-file-selector_files\">\n       \
-    \   <div class=\"slds-file-selector__dropzone\">\n            <label class=\"slds-file-selector__body\">\n           \
-    \   <span class=\"slds-spinner slds-spinner_medium slds-spinner_inline\">\n                <span class=\"slds-assistive-text\"\
-    >Uploading...</span>\n                <div class=\"slds-spinner__dot-a\"></div>\n                <div class=\"slds-spinner__dot-b\"\
-    ></div>\n              </span>\n              <span class=\"slds-file-selector__text\">Uploading files...</span>\n   \
-    \         </label>\n          </div>\n        </div>\n        <div class=\"slds-m-top_small\">\n          <div class=\"\
-    \">\n            <div class=\"slds-media slds-media_center\">\n              <span class=\"slds-media__figure\">\n   \
-    \             <span class=\"\">\n                  <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n  \
-    \                  <use xlink:href=\"/assets/icons/doctype-sprite/svg/symbols.svg#pdf\"></use>\n                  </svg>\n\
-    \                </span>\n              </span>\n              <span class=\"slds-media__body\">\n                <span\
-    \ class=\"\">\n                  <span class=\"\">annual-report.pdf</span>\n                  <span class=\"\">Uploading...\
-    \ 65%</span>\n                  <div class=\"slds-progress-bar slds-progress-bar_x-small slds-m-top_xx-small\">\n    \
-    \                <span class=\"slds-progress-bar__value\" style=\"width: 65%\"></span>\n                  </div>\n   \
-    \             </span>\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n   \
-    \   </div>\n"
-dependencies:
-  css_files:
-  - file-selector.css
-  - button.css
-  - progress-bar.css
-  - spinner.css
-  javascript:
-  - file-selector.js
-  icons:
-  - utility-sprite.svg
-  - doctype-sprite.svg
-  other_components:
-  - button
-  - progress-bar
-  - spinner
-  - form-element
-related_components:
-- name: Form Element
-  relationship: container
-  description: File selector is typically wrapped in form elements
-- name: Button
-  relationship: depends-on
-  description: Uses buttons for browse and remove actions
-- name: Progress Bar
-  relationship: depends-on
-  description: Shows upload progress for files
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/file-selector/
-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/files.yaml

@@ -1,119 +0,0 @@
-name: Files
-description: Components for displaying and interacting with file attachments, uploads, and document management, including
-  file previews and actions.
-category: Display
-slds_classes:
-  root: slds-file
-  elements:
-  - class: slds-file__figure
-    description: Container for file icon or preview
-    purpose: Holds visual representation of the file
-  - class: slds-file__title
-    description: File name or title
-    purpose: Primary label for the file
-  - class: slds-file__text
-    description: Additional file information
-    purpose: Secondary details like size, type, or date
-  modifiers:
-  - class: slds-file_card
-    description: Card-style file display
-    usage: File representation in card format
-  - class: slds-file_overlay
-    description: Overlay-style file display
-    usage: File with overlay information
-  states:
-  - class: slds-file_loading
-    description: Loading state for file operations
-    trigger: When file is being uploaded or processed
-  - class: slds-has-error
-    description: Error state for file operations
-    trigger: When file operation has failed
-variants:
-- name: Base
-  description: Standard file display component
-  classes:
-  - slds-file
-  usage_context: Default file representation with icon and metadata
-  differences: Basic file display with icon, name, and actions
-lightning_component:
-  name: lightning-file-download
-  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-file-download
-  mapping_notes: Partially mapped through lightning-file-download - full file management requires custom implementation
-accessibility:
-  keyboard_support:
-  - Tab navigation through file actions
-  - Enter/Space to activate file actions
-  - Focus management for file interactions
-  screen_reader:
-  - File name and type announced
-  - File size and metadata communicated
-  - Available actions clearly described
-  - File status and state changes announced
-  aria_attributes:
-  - aria-label for file containers
-  - aria-describedby for file metadata
-  - role='button' for interactive file elements
-  - aria-live for status updates
-usage_guidelines:
-  when_to_use:
-  - For displaying file attachments or uploads
-  - In document management interfaces
-  - For file download or sharing functionality
-  - When users need to interact with files
-  when_not_to_use:
-  - For decorative images (use image components)
-  - For functional icons (use icon components)
-  - When file interaction is not needed
-  best_practices:
-  - Show clear file type indicators
-  - Display relevant file metadata (size, date)
-  - Provide appropriate actions for file type
-  - Handle loading and error states gracefully
-  - Use recognizable file type icons
-  common_mistakes:
-  - Not showing file type or size
-  - Poor error handling for file operations
-  - Unclear file action buttons
-  - Missing loading states for file operations
-code_examples:
-- title: File Card
-  code: "<div class=\"slds-file slds-file_card\">\n      <figure class=\"slds-file__figure\">\n        <a href=\"#\">\n  \
-    \        <span class=\"slds-icon_container slds-icon-doctype-pdf\">\n            <svg class=\"slds-icon\" aria-hidden=\"\
-    true\">\n              <use xlink:href=\"/assets/icons/doctype-sprite/svg/symbols.svg#pdf\"></use>\n            </svg>\n\
-    \          </span>\n        </a>\n      </figure>\n      <div class=\"\">\n        <div class=\"slds-file__title\">\n\
-    \          <a href=\"#\" title=\"Proposal_2024.pdf\">Proposal_2024.pdf</a>\n        </div>\n        <div class=\"slds-file__text\
-    \ slds-text-body_small\">\n          PDF • 1.2 MB\n        </div>\n      </div>\n      <div class=\"\">\n        <button\
-    \ class=\"slds-button slds-button_icon slds-button_icon-border-filled\" title=\"Download\">\n          <svg class=\"slds-button__icon\"\
-    \ aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>\n\
-    \          </svg>\n          <span class=\"slds-assistive-text\">Download</span>\n        </button>\n      </div>\n  \
-    \    </div>\n"
-styling_hooks: []
-dependencies:
-  css_files:
-  - files.css
-  - media-objects.css
-  javascript: []
-  icons:
-  - doctype-sprite.svg
-  - utility-sprite.svg
-  other_components:
-  - icons
-  - button-icon
-  - media-objects
-related_components:
-- name: Cards
-  relationship: container
-  description: Often used as container for file components
-- name: Media Objects
-  relationship: similar
-  description: Similar layout pattern for content with media
-- name: Icons
-  relationship: depends-on
-  description: File type icons enhance file recognition
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/files/
-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/form-element.yaml

@@ -1,145 +0,0 @@
-name: Form Element
-description: A foundational wrapper component that provides consistent structure, labeling, and validation messaging for form
-  inputs, ensuring accessibility and visual consistency across form controls.
-category: Input
-slds_classes:
-  root: slds-form-element
-  elements:
-  - class: slds-form-element__label
-    description: Label for the form element
-    purpose: Provides accessible labeling for form controls
-  - class: slds-form-element__control
-    description: Container for the form control
-    purpose: Wraps the actual input element
-  - class: slds-form-element__help
-    description: Help text for the form element
-    purpose: Provides additional guidance or instructions
-  - class: slds-form-element__icon
-    description: Icon associated with the form element
-    purpose: Visual indicator or status icon
-  - class: slds-form-element__addon
-    description: Additional content attached to form element
-    purpose: Supplementary content like buttons or text
-  modifiers:
-  - class: slds-form-element_stacked
-    description: Stacked layout with label above control
-    usage: Default vertical layout for form elements
-  - class: slds-form-element_horizontal
-    description: Horizontal layout with label beside control
-    usage: When horizontal alignment is preferred
-  - class: slds-form-element_compound
-    description: Compound form element with multiple controls
-    usage: For grouped or related form controls
-  states:
-  - class: slds-has-error
-    description: Error state for form element
-    trigger: Applied when validation fails
-variants:
-- name: Base
-  description: Standard form element wrapper
-  classes:
-  - slds-form-element
-  usage_context: Default wrapper for individual form controls
-  differences: Basic structure with label, control, and help text
-- name: Stacked
-  description: Vertical layout form element
-  classes:
-  - slds-form-element
-  - slds-form-element_stacked
-  usage_context: When vertical layout is preferred
-  differences: Label positioned above the form control
-- name: Horizontal
-  description: Horizontal layout form element
-  classes:
-  - slds-form-element
-  - slds-form-element_horizontal
-  usage_context: When horizontal alignment is needed
-  differences: Label positioned beside the form 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 - form element structure is built into Lightning input components
-accessibility:
-  keyboard_support:
-  - Tab navigation to form controls
-  - Label association with controls
-  - Error message association
-  screen_reader:
-  - Label text announced with control
-  - Required state communicated
-  - Error messages read when present
-  - Help text associated and announced
-  aria_attributes:
-  - for attribute linking label to control
-  - aria-describedby for help text
-  - aria-required for required fields
-  - aria-invalid for error states
-  - aria-labelledby for complex labeling
-usage_guidelines:
-  when_to_use:
-  - As wrapper for all form input controls
-  - When consistent form structure is needed
-  - For accessible form labeling
-  - When validation messaging is required
-  when_not_to_use:
-  - For non-form content
-  - When custom form structure is needed
-  best_practices:
-  - Always include meaningful labels
-  - Provide clear error messages
-  - Use help text for additional guidance
-  - Maintain consistent form element structure
-  - Ensure proper label-control association
-  common_mistakes:
-  - Missing or unclear labels
-  - Poor error message placement
-  - Inconsistent form element structure
-  - Breaking label-control associations
-code_examples:
-- title: Basic Form Element
-  description: Form element with multiple related controls
-  code: "<fieldset class=\"slds-form-element slds-form-element_compound\">\n      <legend class=\"slds-form-element__label\"\
-    >Address</legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"\">\n          <div class=\"\
-    \">\n            <div class=\"slds-size_1-of-1\">\n              <div class=\"slds-form-element\">\n                <label\
-    \ class=\"slds-form-element__label\" for=\"street\">Street Address</label>\n                <div class=\"slds-form-element__control\"\
-    >\n                  <input type=\"text\" id=\"street\" class=\"slds-input\">\n                </div>\n              </div>\n\
-    \            </div>\n          </div>\n          <div class=\"\">\n            <div class=\"slds-size_1-of-2\">\n    \
-    \          <div class=\"slds-form-element\">\n                <label class=\"slds-form-element__label\" for=\"city\">City</label>\n\
-    \                <div class=\"slds-form-element__control\">\n                  <input type=\"text\" id=\"city\" class=\"\
-    slds-input\">\n                </div>\n              </div>\n            </div>\n            <div class=\"slds-size_1-of-2\"\
-    >\n              <div class=\"slds-form-element\">\n                <label class=\"slds-form-element__label\" for=\"zip\"\
-    >ZIP Code</label>\n                <div class=\"slds-form-element__control\">\n                  <input type=\"text\"\
-    \ id=\"zip\" class=\"slds-input\">\n                </div>\n              </div>\n            </div>\n          </div>\n\
-    \        </div>\n      </div>\n      </fieldset>\n"
-dependencies:
-  css_files:
-  - form-element.css
-  - input.css
-  javascript: []
-  icons: []
-  other_components:
-  - input
-  - select
-  - textarea
-  - checkbox
-  - radio
-related_components:
-- name: Input
-  relationship: container
-  description: Form element wraps input components
-- name: Select
-  relationship: container
-  description: Form element wraps select components
-- name: Textarea
-  relationship: container
-  description: Form element wraps textarea components
-- name: Checkbox
-  relationship: container
-  description: Form element wraps checkbox components
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/form-element/
-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/global-header.yaml

@@ -1,120 +0,0 @@
-name: Global Header
-description: The primary navigation header that appears at the top of the application, providing access to global navigation,
-  search, notifications, and user account functions.
-category: Navigation
-slds_classes:
-  root: slds-global-header
-  elements:
-  - class: slds-global-header__logo
-    description: Container for application logo or brand
-    purpose: Displays the primary brand identity
-  - class: slds-global-header__item
-    description: Individual navigation item wrapper
-    purpose: Wraps each navigation element
-  modifiers: []
-  states:
-  - class: slds-is-active
-    description: Active navigation item state
-    trigger: Applied to currently selected navigation item
-  - class: slds-has-notification
-    description: Notification indicator state
-    trigger: Applied when notifications are present
-variants:
-- name: Base
-  description: Standard global header with full navigation
-  classes:
-  - slds-global-header
-  usage_context: Default implementation for application header
-  differences: Full-featured header with logo, navigation, and user controls
-- name: Minimal
-  description: Minimal global header with essential elements only
-  classes:
-  - slds-global-header
-  usage_context: Simplified header for focused experiences
-  differences: Reduced elements focusing on core navigation
-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 lightning-layout and custom components
-accessibility:
-  keyboard_support:
-  - Tab navigation through header elements
-  - Enter/Space to activate navigation items
-  - Arrow keys for dropdown navigation
-  - Escape to close open menus
-  screen_reader:
-  - Header landmark identified
-  - Navigation structure announced
-  - User account information communicated
-  - Notification status indicated
-  aria_attributes:
-  - role='banner' for header landmark
-  - role='navigation' for nav sections
-  - aria-label for navigation areas
-  - aria-expanded for dropdown menus
-  - aria-current for active navigation
-  - aria-live for notification updates
-usage_guidelines:
-  when_to_use:
-  - As the primary application header
-  - For global navigation and branding
-  - When users need access to account functions
-  - For consistent cross-application navigation
-  when_not_to_use:
-  - For page-specific headers (use page headers instead)
-  - In embedded or widget contexts
-  - When space is extremely limited
-  best_practices:
-  - Keep navigation items concise and clear
-  - Prioritize most important functions
-  - Provide clear visual hierarchy
-  - Ensure responsive behavior across devices
-  - Maintain consistent branding
-  common_mistakes:
-  - Overcrowding with too many navigation items
-  - Poor mobile responsive behavior
-  - Inconsistent styling across applications
-  - Missing accessibility landmarks
-code_examples:
-- title: Basic Global Header
-  description: Simplified global header with essential elements
-  code: "<header class=\"slds-global-header\" role=\"banner\">\n      <div class=\"slds-global-header__logo\">\n        <a\
-    \ href=\"#\" class=\"\">\n          <img src=\"/assets/images/logo-minimal.svg\" alt=\"Logo\" class=\"\">\n        </a>\n\
-    \      </div>\n      <nav class=\"\" role=\"navigation\" aria-label=\"Primary\">\n        <ul class=\"\">\n          <li\
-    \ class=\"slds-global-header__item\">\n            <a href=\"#\" class=\"slds-is-active\">Dashboard</a>\n          </li>\n\
-    \          <li class=\"slds-global-header__item\">\n            <a href=\"#\" class=\"\">Reports</a>\n          </li>\n\
-    \        </ul>\n      </nav>\n      <div class=\"\">\n        <span class=\"slds-avatar slds-avatar_circle slds-avatar_small\"\
-    >\n          <img alt=\"User\" src=\"/assets/images/avatar.jpg\">\n        </span>\n      </div>\n      </header>\n"
-dependencies:
-  css_files:
-  - global-header.css
-  - avatar.css
-  - button.css
-  - input.css
-  javascript:
-  - global-header.js
-  icons:
-  - utility-sprite.svg
-  - standard-sprite.svg
-  other_components:
-  - avatar
-  - button
-  - input
-  - notification
-related_components:
-- name: Global Navigation
-  relationship: similar
-  description: Similar global navigation concept
-- name: Page Headers
-  relationship: alternative
-  description: Alternative header for page-specific content
-- name: App Launcher
-  relationship: depends-on
-  description: Often launched from global header
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/global-header/
-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/global-navigation.yaml

@@ -1,100 +0,0 @@
-name: Global Navigation
-description: The primary navigation component that provides consistent access to main application areas, typically positioned
-  at the top of the interface.
-category: Navigation
-slds_classes:
-  root: ''
-  elements: []
-  modifiers: []
-  states:
-  - class: slds-is-active
-    description: Active navigation item state
-    trigger: Currently selected navigation section
-variants:
-- name: Base
-  description: Standard horizontal global navigation
-  classes: []
-  usage_context: Default global navigation for application header
-  differences: Horizontal navigation bar with logo, links, and actions
-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 or app builder
-accessibility:
-  keyboard_support:
-  - Tab navigation through navigation items
-  - Enter/Space to activate navigation links
-  - Arrow keys for navigation between items
-  - Skip links for efficient navigation
-  screen_reader:
-  - Navigation structure and purpose announced
-  - Current location clearly identified
-  - Logo and branding appropriately labeled
-  - Action controls properly described
-  aria_attributes:
-  - role='navigation' for navigation container
-  - aria-label describing navigation purpose
-  - aria-current='page' for current section
-  - aria-expanded for dropdown navigation items
-  - landmark roles for major navigation areas
-usage_guidelines:
-  when_to_use:
-  - For primary application navigation
-  - To provide consistent access to main areas
-  - When navigation should be persistent across pages
-  - For branding and global actions placement
-  when_not_to_use:
-  - For secondary or contextual navigation
-  - When simpler navigation patterns suffice
-  - For single-page applications with minimal navigation
-  best_practices:
-  - Keep navigation items concise and clear
-  - Maintain consistent navigation structure
-  - Indicate current location clearly
-  - Provide logical grouping of navigation items
-  - Ensure responsive behavior across devices
-  common_mistakes:
-  - Overloading with too many navigation items
-  - Unclear or inconsistent labeling
-  - Poor mobile responsiveness
-  - Not indicating current location
-code_examples:
-- title: Global Navigation
-  code: "<nav class=\"\" role=\"navigation\" aria-label=\"Global\">\n      <div class=\"\">\n        <a href=\"#\" class=\"\
-    \">\n          <img src=\"/assets/images/logo.svg\" alt=\"Company Logo\" class=\"\" />\n        </a>\n      </div>\n \
-    \     <ul class=\"\">\n        <li class=\"slds-is-active\">\n          <a href=\"#\" class=\"\" aria-current=\"page\"\
-    >\n            Dashboard\n          </a>\n        </li>\n        <li class=\"\">\n          <a href=\"#\" class=\"\">\n\
-    \            Accounts\n          </a>\n        </li>\n        <li class=\"\">\n          <a href=\"#\" class=\"\">\n \
-    \           Opportunities\n          </a>\n        </li>\n        <li class=\"\">\n          <a href=\"#\" class=\"\"\
-    >\n            Reports\n          </a>\n        </li>\n      </ul>\n      <div class=\"\">\n        <button class=\"slds-button\
-    \ slds-button_icon slds-button_icon-container\" title=\"Notifications\">\n          <svg class=\"slds-button__icon\" aria-hidden=\"\
-    true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#notification\"></use>\n          </svg>\n\
-    \          <span class=\"slds-assistive-text\">Notifications</span>\n        </button>\n      </div>\n      </nav>\n"
-styling_hooks: []
-dependencies:
-  css_files:
-  - global-navigation.css
-  - button.css
-  javascript: []
-  icons:
-  - utility-sprite.svg
-  other_components:
-  - button-icon
-  - icons
-related_components:
-- name: Vertical Navigation
-  relationship: alternative
-  description: Alternative navigation layout for sidebar placement
-- name: Tabs
-  relationship: similar
-  description: Similar navigation concept for content areas
-- name: Breadcrumbs
-  relationship: similar
-  description: Provides hierarchical navigation context
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/global-navigation/
-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.'