@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

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

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