@salesforce/afv-skills 1.14.0 → 1.15.0

package/skills/applying-slds/metadata/blueprints/components/lookups.yaml

@@ -0,0 +1,132 @@
+name: Lookups
+description: Search and selection components that allow users to find and select records from large datasets, with autocomplete
+  functionality and result filtering.
+category: Input
+slds_classes:
+  root: slds-lookup
+  elements:
+  - class: slds-lookup__menu
+    description: Results dropdown container
+    purpose: Contains search results and options
+  - class: slds-lookup__item
+    description: Individual result item
+    purpose: Represents a single search result
+  - class: slds-lookup__result-text
+    description: Primary result text
+    purpose: Main label for the search result
+  - class: slds-lookup__result-meta
+    description: Secondary result information
+    purpose: Additional context for the search result
+  modifiers: []
+  states:
+  - class: slds-has-focus
+    description: Focus state for lookup
+    trigger: When lookup has keyboard focus
+  - class: slds-is-open
+    description: Open state for dropdown
+    trigger: When results dropdown is visible
+  - class: slds-has-selection
+    description: Selection state
+    trigger: When a result has been selected
+variants:
+- name: Base
+  description: Standard lookup with search and results
+  classes:
+  - slds-lookup
+  usage_context: Default lookup for record selection
+  differences: Search input with dropdown results list
+lightning_component:
+  name: No direct component
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component - typically implemented through custom components or third-party libraries
+accessibility:
+  keyboard_support:
+  - Tab to focus search input
+  - Type to search and filter results
+  - Arrow keys to navigate results
+  - Enter to select highlighted result
+  - Escape to close results dropdown
+  screen_reader:
+  - Search purpose and current value announced
+  - Result count and filtering status communicated
+  - Selected result clearly identified
+  - Loading and empty states announced
+  aria_attributes:
+  - role='combobox' for search input
+  - aria-expanded for dropdown state
+  - aria-activedescendant for current result
+  - role='listbox' for results container
+  - role='option' for individual results
+  - aria-autocomplete='list' for search behavior
+usage_guidelines:
+  when_to_use:
+  - For selecting records from large datasets
+  - When search and filtering capabilities are needed
+  - For relationship fields and record associations
+  - When autocomplete functionality improves usability
+  when_not_to_use:
+  - For small, fixed option lists (use select instead)
+  - When all options should be visible (use radio group)
+  - For simple text input without search
+  best_practices:
+  - Provide meaningful search result formatting
+  - Show loading states during search
+  - Handle empty search results gracefully
+  - Implement debounced search for performance
+  - Display relevant result metadata
+  common_mistakes:
+  - Poor search result formatting
+  - Missing loading and empty states
+  - Inadequate keyboard navigation
+  - Poor search performance optimization
+code_examples:
+- title: Account Lookup
+  code: "<div class=\"slds-lookup\" data-select=\"single\" data-scope=\"single\">\n      <div class=\"\">\n        <div class=\"\
+    slds-form-element\">\n          <label class=\"slds-form-element__label\" for=\"lookup-search\">\n            Search Accounts\n\
+    \          </label>\n          <div class=\"slds-form-element__control slds-input-has-icon slds-input-has-icon_right\"\
+    >\n            <input type=\"text\" class=\"slds-input\" id=\"lookup-search\" role=\"combobox\" aria-expanded=\"true\"\
+    \ aria-haspopup=\"listbox\" placeholder=\"Search Accounts...\" />\n            <span class=\"slds-icon_container slds-icon-utility-search\
+    \ slds-input__icon slds-input__icon_right\">\n              <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"\
+    true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#search\"></use>\n            \
+    \  </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"slds-lookup__menu\"\
+    \ role=\"listbox\">\n        <ul class=\"slds-lookup__list\" role=\"presentation\">\n          <li class=\"slds-lookup__item\"\
+    \ role=\"option\">\n            <div class=\"slds-media\">\n              <div class=\"slds-media__figure\">\n       \
+    \         <span class=\"slds-icon_container slds-icon-standard-account\">\n                  <svg class=\"slds-icon slds-icon_small\"\
+    \ aria-hidden=\"true\">\n                    <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#account\"\
+    ></use>\n                  </svg>\n                </span>\n              </div>\n              <div class=\"slds-media__body\"\
+    >\n                <div class=\"slds-lookup__result-text\">Acme Corporation</div>\n                <div class=\"slds-lookup__result-meta\
+    \ slds-text-body_small\">Account • San Francisco</div>\n              </div>\n            </div>\n          </li>\n  \
+    \      </ul>\n      </div>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - lookup.css
+  - combobox.css
+  - media-objects.css
+  javascript:
+  - lookup.js
+  icons:
+  - utility-sprite.svg
+  - standard-sprite.svg
+  other_components:
+  - combobox
+  - media-objects
+  - input
+  - icons
+related_components:
+- name: Combobox
+  relationship: similar
+  description: Similar search and select pattern
+- name: Select
+  relationship: alternative
+  description: Alternative for smaller, fixed option sets
+- name: Pills
+  relationship: depends-on
+  description: Often used to display selected lookup results
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/lookups/
+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/map.yaml

@@ -0,0 +1,118 @@
+name: Map
+description: A component for displaying interactive maps with coordinates and location information. Provides a container for
+  third-party map libraries with a coordinates panel for displaying location details.
+category: Complex Components
+slds_classes:
+  root: slds-map
+  elements:
+  - class: slds-map_container
+    description: Container for the map component
+    purpose: Wraps the map and coordinates panel
+  - class: slds-coordinates
+    description: Coordinates panel element
+    purpose: Displays location coordinates and details
+  - class: slds-coordinates__header
+    description: Header of coordinates panel
+    purpose: Contains title for coordinates panel
+  modifiers:
+  - class: slds-has-coordinates
+    description: Modifier indicating coordinates panel is active
+    purpose: Applied to parent container when panel is visible
+  states: []
+variants:
+- name: Base
+  description: Standard map with optional coordinates panel
+  classes:
+  - slds-map_container
+  usage_context: Default map implementation
+  differences: Container for third-party map with SLDS styling
+lightning_component:
+  name: lightning-map
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-map
+  mapping_notes: lightning-map provides interactive map with markers and location display
+accessibility:
+  keyboard_support:
+  - Tab to focus on map controls
+  - Arrow keys to pan map (when supported by map library)
+  - Enter to activate map markers
+  - +/- keys to zoom (when supported)
+  screen_reader:
+  - Map region announced
+  - Location information announced
+  - Marker details announced when focused
+  - Coordinates read when displayed
+  aria_attributes:
+  - role='application' or 'region' on map container
+  - aria-label describing map purpose
+  - aria-live for coordinate updates
+  - Accessible labels for map controls
+usage_guidelines:
+  when_to_use:
+  - For displaying geographic locations
+  - When showing multiple locations on a map
+  - For route or area visualization
+  - In location-based applications
+  when_not_to_use:
+  - For simple address display (use text)
+  - When location context isn't important
+  - For very small screens with limited space
+  - When map interaction adds unnecessary complexity
+  best_practices:
+  - Use reputable map library (Google Maps, Mapbox, Leaflet)
+  - Provide zoom and pan controls
+  - Show location coordinates when relevant
+  - Support keyboard navigation
+  - Handle loading states gracefully
+  - Respect user location privacy
+  common_mistakes:
+  - Missing keyboard support
+  - Poor performance with many markers
+  - Not handling map library load failures
+  - Inadequate mobile/touch support
+  - Missing accessible labels
+code_examples:
+- title: Basic Map Container
+  code: "<div class=\"slds-map_container\">\n  <div class=\"slds-map\" aria-label=\"Map showing office location\">\n    <!--\
+    \ Third-party map library rendered here -->\n    <div id=\"map-canvas\"></div>\n  </div>\n</div>\n"
+  description: Basic map container for third-party map library
+- title: Map with Coordinates Panel
+  code: "<div class=\"slds-grid slds-map_container slds-has-coordinates\">\n  <div class=\"slds-col slds-size_2-of-3\">\n\
+    \    <div class=\"slds-map\" aria-label=\"Interactive map\">\n      <!-- Third-party map library rendered here -->\n \
+    \     <div id=\"map-canvas\"></div>\n    </div>\n  </div>\n  <div class=\"slds-col slds-size_1-of-3\">\n    <div class=\"\
+    slds-coordinates\">\n      <div class=\"slds-coordinates__header\">\n        <h2 class=\"slds-text-heading_medium\">Location\
+    \ Details</h2>\n      </div>\n      <div class=\"\">\n        <dl class=\"slds-list_horizontal slds-wrap\">\n        \
+    \  <dt class=\"slds-item_label slds-text-color_weak slds-truncate\">Latitude:</dt>\n          <dd class=\"slds-item_detail\
+    \ slds-truncate\">37.7749</dd>\n          <dt class=\"slds-item_label slds-text-color_weak slds-truncate\">Longitude:</dt>\n\
+    \          <dd class=\"slds-item_detail slds-truncate\">-122.4194</dd>\n          <dt class=\"slds-item_label slds-text-color_weak\
+    \ slds-truncate\">Address:</dt>\n          <dd class=\"slds-item_detail\">San Francisco, CA</dd>\n        </dl>\n    \
+    \  </div>\n    </div>\n  </div>\n</div>\n"
+  description: Map with coordinates panel showing location details
+styling_hooks: []
+dependencies:
+  css_files:
+  - map.css
+  javascript:
+  - Third-party map library integration
+  - Map initialization
+  - Marker management
+  - Coordinates panel updates
+  icons: []
+  other_components:
+  - grid
+related_components:
+- name: Formatted Address
+  relationship: complementary
+  description: Displays formatted address alongside map
+- name: Formatted Location
+  relationship: complementary
+  description: Displays location information
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/map/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-11'
+  author: SLDS Documentation Team
+  slds_version: 2.27.2
+  review_status: complete
+  source: official-slds
+  notes: Created from official SLDS documentation and design-system-internal source code

package/skills/applying-slds/metadata/blueprints/components/menus.yaml

@@ -0,0 +1,134 @@
+name: Menus
+description: Contextual navigation components that present a list of actions or options, typically triggered by user interaction
+  with a button or other control.
+category: Navigation
+slds_classes:
+  root: slds-dropdown
+  elements:
+  - class: slds-dropdown__item
+    description: Individual menu item wrapper
+    purpose: Contains a single menu option
+  - class: slds-dropdown__header
+    description: Menu section header
+    purpose: Groups related menu items with a heading
+  modifiers:
+  - class: slds-dropdown_left
+    description: Left-aligned dropdown menu
+    usage: Menu aligned to the left edge of trigger
+  - class: slds-dropdown_right
+    description: Right-aligned dropdown menu
+    usage: Menu aligned to the right edge of trigger
+  - class: slds-dropdown_bottom
+    description: Bottom-positioned dropdown menu
+    usage: Menu appears below the trigger element
+  - class: slds-dropdown_length-5
+    description: Menu height for 5 items
+    usage: Constrains menu height for scrolling
+  - class: slds-dropdown_length-7
+    description: Menu height for 7 items
+    usage: Constrains menu height for scrolling
+  - class: slds-dropdown_length-10
+    description: Menu height for 10 items
+    usage: Constrains menu height for scrolling
+  states:
+  - class: slds-is-open
+    description: Open menu state
+    trigger: When menu is visible
+  - class: slds-is-selected
+    description: Selected menu item state
+    trigger: Currently selected menu option
+variants:
+- name: Base
+  description: Standard dropdown menu
+  classes:
+  - slds-dropdown
+  usage_context: Default menu implementation for actions and options
+  differences: Basic dropdown menu with list of actionable items
+lightning_component:
+  name: lightning-menu-item
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-menu-item
+  mapping_notes: Mapped through lightning-menu-item and lightning-button-menu components
+accessibility:
+  keyboard_support:
+  - Tab to focus menu trigger
+  - Enter/Space to open menu
+  - Arrow keys to navigate menu items
+  - Enter/Space to select menu items
+  - Escape to close menu
+  screen_reader:
+  - Menu structure and purpose announced
+  - Menu items and their actions described
+  - Current selection communicated
+  - Menu state changes announced
+  aria_attributes:
+  - role='menu' for menu container
+  - role='menuitem' for menu options
+  - aria-expanded on menu trigger
+  - aria-haspopup on menu trigger
+  - aria-labelledby for menu identification
+usage_guidelines:
+  when_to_use:
+  - For contextual actions related to specific content
+  - To group related actions in a compact interface
+  - For overflow actions when space is limited
+  - To provide secondary or advanced options
+  when_not_to_use:
+  - For primary navigation (use navigation components)
+  - For form inputs (use select or combobox)
+  - When all actions should be immediately visible
+  best_practices:
+  - Use clear, action-oriented menu item labels
+  - Group related actions with headers and dividers
+  - Order items by frequency of use or importance
+  - Limit menu length to avoid overwhelming users
+  - Provide keyboard navigation support
+  common_mistakes:
+  - Too many menu items without organization
+  - Unclear or vague menu item labels
+  - Poor menu positioning that gets cut off
+  - Missing keyboard navigation support
+code_examples:
+- title: Basic Dropdown Menu
+  code: "<div class=\"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open\">\n      <button class=\"slds-button\
+    \ slds-button_neutral\" aria-haspopup=\"true\" aria-expanded=\"true\">\n        Show Menu\n        <svg class=\"slds-button__icon\
+    \ slds-button__icon_right\" aria-hidden=\"true\">\n          <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"\
+    ></use>\n        </svg>\n      </button>\n      <div class=\"slds-dropdown slds-dropdown_right\">\n        <ul class=\"\
+    \" role=\"menu\">\n          <li class=\"slds-dropdown__item\" role=\"presentation\">\n            <a href=\"#\" role=\"\
+    menuitem\" tabindex=\"0\">\n              <span class=\"slds-truncate\" title=\"Menu Item One\">Menu Item One</span>\n\
+    \            </a>\n          </li>\n          <li class=\"slds-dropdown__item\" role=\"presentation\">\n            <a\
+    \ href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n              <span class=\"slds-truncate\" title=\"Menu Item Two\">Menu\
+    \ Item Two</span>\n            </a>\n          </li>\n          <li class=\"slds-dropdown__item\" role=\"presentation\"\
+    >\n            <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n              <span class=\"slds-truncate\" title=\"\
+    Menu Item Three\">Menu Item Three</span>\n            </a>\n          </li>\n        </ul>\n      </div>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - dropdown.css
+  - menu.css
+  - button.css
+  javascript:
+  - dropdown.js
+  - menu.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - button
+  - dropdown
+  - truncate
+related_components:
+- name: Button Menu
+  relationship: container
+  description: Button that triggers menu dropdown
+- name: Popover
+  relationship: similar
+  description: Alternative overlay for contextual content
+- name: Navigation
+  relationship: alternative
+  description: Alternative for primary navigation
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/menus/
+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/modals.yaml

@@ -0,0 +1,152 @@
+name: "Modals"
+description: "Dialog overlays that display content above the main interface, requiring user interaction to continue with the underlying workflow."
+category: "Overlay"
+slds_classes:
+  root: "slds-modal"
+  elements:
+    - class: "slds-modal__container"
+      description: "Container for modal content"
+      purpose: "Centers and constrains modal dialog"
+    - class: "slds-modal__header"
+      description: "Header section of the modal"
+      purpose: "Contains title and close action"
+    - class: "slds-modal__content"
+      description: "Main content area of the modal"
+      purpose: "Contains the primary modal content"
+    - class: "slds-modal__footer"
+      description: "Footer section of the modal"
+      purpose: "Contains action buttons and controls"
+    - class: "slds-backdrop"
+      description: "Background overlay"
+      purpose: "Dims background and captures clicks"
+  modifiers:
+    - class: "slds-modal_small"
+      description: "Small modal size"
+      usage: "For simple confirmations or minimal content"
+    - class: "slds-modal_medium"
+      description: "Medium modal size (default)"
+      usage: "Standard modal size for most use cases"
+    - class: "slds-modal_large"
+      description: "Large modal size"
+      usage: "For complex forms or detailed content"
+    - class: "slds-modal_full"
+      description: "Full-screen modal"
+      usage: "For complex workflows or mobile experiences"
+    - class: "slds-fade-in-open"
+      description: "Animation for opening modal"
+      usage: "Smooth fade-in transition"
+  states:
+    - class: "slds-backdrop_open"
+      description: "Open state for backdrop"
+      trigger: "When modal is visible"
+variants:
+  - name: "Base"
+    description: "Standard modal dialog"
+    classes:
+      - "slds-modal"
+    usage_context: "Default modal implementation"
+    differences: "Centered dialog with header, content, and footer"
+lightning_component:
+  name: "Various (lightning-modal-*)"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-modal-header"
+  mapping_notes: "Mapped through lightning-modal-header, lightning-modal-body, lightning-modal-footer components"
+accessibility:
+  keyboard_support:
+    - "Tab to cycle through interactive elements within modal"
+    - "Escape to close modal"
+    - "Focus trapped within modal while open"
+    - "Focus returned to trigger element on close"
+  screen_reader:
+    - "Modal purpose announced when opened"
+    - "Content structure conveyed through proper markup"
+    - "Close action clearly identified"
+  aria_attributes:
+    - "role='dialog' for modal container"
+    - "aria-labelledby pointing to modal title"
+    - "aria-describedby for modal content when appropriate"
+    - "aria-modal='true' to indicate modal state"
+    - "aria-hidden='true' on background content"
+usage_guidelines:
+  when_to_use:
+    - "For critical information that requires user attention"
+    - "For complex forms or workflows"
+    - "When you need to interrupt the current workflow"
+    - "For confirmations of destructive actions"
+  when_not_to_use:
+    - "For simple notifications (use toast instead)"
+    - "For non-critical information"
+    - "When users need to reference background content"
+    - "For progressive enhancement (use inline expansion)"
+  best_practices:
+    - "Provide clear modal title and purpose"
+    - "Include obvious way to close or cancel"
+    - "Keep modal content focused and concise"
+    - "Use appropriate modal size for content"
+    - "Implement proper focus management"
+    - "Avoid stacking multiple modals"
+  common_mistakes:
+    - "Making modals too large or complex"
+    - "Poor focus management implementation"
+    - "Missing or unclear close options"
+    - "Overusing modals for non-critical content"
+code_examples:
+  - title: "Basic Modal"
+    code: |
+      <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
+            <div class="slds-modal__container">
+              <header class="slds-modal__header">
+                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
+                  <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
+                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+                  </svg>
+                  <span class="slds-assistive-text">Close</span>
+                </button>
+                <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal Header</h2>
+              </header>
+              <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
+                <p>Modal body content goes here...</p>
+              </div>
+              <footer class="slds-modal__footer">
+                <button class="slds-button slds-button_neutral">Cancel</button>
+                <button class="slds-button slds-button_brand">Save</button>
+              </footer>
+            </div>
+            </section>
+            <div class="slds-backdrop slds-backdrop_open"></div>
+styling_hooks:
+  - name: "--slds-c-modal-color-background"
+    description: "Background color for modal"
+    category: "color"
+  - name: "--slds-c-modal-radius-border"
+    description: "Border radius for modal"
+    category: "border"
+dependencies:
+  css_files:
+    - "modal.css"
+    - "backdrop.css"
+    - "button.css"
+  javascript:
+    - "modal.js"
+  icons:
+    - "utility-sprite.svg"
+  other_components:
+    - "button"
+    - "button-icon"
+    - "backdrop"
+related_components:
+  - name: "Prompt"
+    relationship: "variant"
+    description: "Simplified modal for confirmations"
+  - name: "Popovers"
+    relationship: "alternative"
+    description: "Alternative overlay for contextual content"
+  - name: "Toast"
+    relationship: "alternative"
+    description: "Alternative for simple notifications"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/modals/"
+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/notifications.yaml

@@ -0,0 +1,88 @@
+name: Notifications
+description: System-generated messages that inform users about important events, updates, or required actions in a non-intrusive
+  manner.
+category: Feedback
+slds_classes:
+  root: slds-notification
+  elements:
+  - class: slds-notification__target
+    description: Link or action target within notification
+    purpose: Provides actionable element for user interaction
+  modifiers: []
+  states: []
+variants:
+- name: Base
+  description: Standard notification message
+  classes:
+  - slds-notification
+  usage_context: Default notification implementation
+  differences: Basic notification with message content
+lightning_component:
+  name: lightning-toast
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-toast
+  mapping_notes: Primarily mapped through lightning-toast for temporary notifications
+accessibility:
+  keyboard_support:
+  - Tab navigation through interactive elements
+  - Escape to dismiss dismissible notifications
+  - Focus management for embedded actions
+  screen_reader:
+  - Notification content announced when displayed
+  - Importance level conveyed through ARIA
+  - Action elements properly labeled
+  aria_attributes:
+  - role='alert' for important notifications
+  - role='status' for informational updates
+  - aria-live='polite' or 'assertive' based on importance
+  - aria-label for close buttons
+usage_guidelines:
+  when_to_use:
+  - To inform users of system events or status changes
+  - For feedback on user actions
+  - To communicate important updates
+  - For error or success confirmations
+  when_not_to_use:
+  - For critical errors requiring immediate action (use modals)
+  - For instructional content (use help text)
+  - For persistent information (use banners or alerts)
+  best_practices:
+  - Keep notification messages concise and clear
+  - Use appropriate urgency levels
+  - Provide actionable information when possible
+  - Consider auto-dismissal timing carefully
+  - Group related notifications when appropriate
+  common_mistakes:
+  - Overusing notifications for non-essential information
+  - Making notification text too long or complex
+  - Poor timing for auto-dismissal
+  - Not providing adequate contrast or visibility
+code_examples:
+- title: Basic Toast Notification
+  code: "<div class=\"slds-notification\" role=\"alert\">\n      <div class=\"\">\n        <p>Your changes have been saved\
+    \ successfully.</p>\n      </div>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - notification.css
+  - toast.css
+  javascript:
+  - notification.js
+  icons: []
+  other_components: []
+related_components:
+- name: Toast
+  relationship: variant
+  description: Specific type of temporary notification
+- name: Alert
+  relationship: similar
+  description: Similar feedback mechanism for system-wide messages
+- name: Banner
+  relationship: alternative
+  description: Alternative for persistent messaging
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/notifications/
+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.'