@salesforce/afv-skills 1.14.0 → 1.16.0

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

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

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

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

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

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