@salesforce/afv-skills 1.14.0 → 1.16.0

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

@@ -0,0 +1,138 @@
+name: "Tabs"
+description: "A navigation component that organizes content into multiple panels, allowing users to switch between different views while maintaining context."
+category: "Navigation"
+slds_classes:
+  root: "slds-tabs_default"
+  elements:
+    - class: "slds-tabs_default__nav"
+      description: "Navigation container for tab headers"
+      purpose: "Contains the clickable tab headers"
+    - class: "slds-tabs_default__item"
+      description: "Individual tab header item"
+      purpose: "Wrapper for each tab button"
+    - class: "slds-tabs_default__link"
+      description: "Tab header link/button"
+      purpose: "Clickable element to activate tab"
+    - class: "slds-tabs_default__content"
+      description: "Content panel for active tab"
+      purpose: "Contains the content for the selected tab"
+  modifiers:
+    - class: "slds-tabs_scoped"
+      description: "Scoped tabs variant"
+      usage: "For contained, card-like tab interface"
+  states:
+    - class: "slds-is-active"
+      description: "Active tab state"
+      trigger: "Currently selected and visible tab"
+    - class: "slds-has-focus"
+      description: "Focus state for tab"
+      trigger: "When tab has keyboard focus"
+variants:
+  - name: "Default"
+    description: "Standard horizontal tabs"
+    classes:
+      - "slds-tabs_default"
+    usage_context: "Default tab implementation for content organization"
+    differences: "Horizontal tab headers with underline styling"
+  - name: "Scoped"
+    description: "Tabs with contained, card-like appearance"
+    classes:
+      - "slds-tabs_scoped"
+    usage_context: "When tabs need visual containment"
+    differences: "Card-style background with contained appearance"
+lightning_component:
+  name: "lightning-tabset"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS tabs blueprint"
+accessibility:
+  keyboard_support:
+    - "Tab to focus the tab list"
+    - "Arrow keys to navigate between tab headers"
+    - "Enter/Space to activate selected tab"
+    - "Tab to move focus into active tab content"
+  screen_reader:
+    - "Tab list structure announced"
+    - "Current tab and total count communicated"
+    - "Tab panel content associated with headers"
+  aria_attributes:
+    - "role='tablist' for tab navigation container"
+    - "role='tab' for individual tab headers"
+    - "role='tabpanel' for content areas"
+    - "aria-selected for active tab"
+    - "aria-controls linking tabs to panels"
+    - "aria-labelledby linking panels to tabs"
+usage_guidelines:
+  when_to_use:
+    - "To organize related content into logical groups"
+    - "When users need to switch between different views"
+    - "For content that doesn't need to be viewed simultaneously"
+    - "To reduce visual complexity and conserve space"
+  when_not_to_use:
+    - "When users need to see multiple sections at once"
+    - "For sequential processes (use progress indicator instead)"
+    - "When you have only one or two content sections"
+    - "For navigation between unrelated pages"
+  best_practices:
+    - "Use clear, descriptive tab labels"
+    - "Limit number of tabs to avoid overcrowding"
+    - "Order tabs logically by importance or workflow"
+    - "Ensure tab content is substantial enough to warrant separation"
+    - "Provide visual indication of active tab"
+  common_mistakes:
+    - "Too many tabs causing overcrowding"
+    - "Unclear or ambiguous tab labels"
+    - "Using tabs for navigation between unrelated content"
+    - "Poor mobile responsiveness"
+code_examples:
+  - title: "Basic Tabset"
+    code: |
+      <div class="slds-tabs_default">
+            <ul class="slds-tabs_default__nav" role="tablist">
+              <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation">
+                <a class="slds-tabs_default__link" href="#tab-default-1" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
+              </li>
+              <li class="slds-tabs_default__item" title="Item Two" role="presentation">
+                <a class="slds-tabs_default__link" href="#tab-default-2" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
+              </li>
+              <li class="slds-tabs_default__item" title="Item Three" role="presentation">
+                <a class="slds-tabs_default__link" href="#tab-default-3" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item Three</a>
+              </li>
+            </ul>
+            <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
+              <h2>Item One Content</h2>
+              <p>Content for the first tab goes here...</p>
+            </div>
+            <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
+              <h2>Item Two Content</h2>
+              <p>Content for the second tab goes here...</p>
+            </div>
+            <div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
+              <h2>Item Three Content</h2>
+              <p>Content for the third tab goes here...</p>
+            </div>
+            </div>
+styling_hooks: []
+dependencies:
+  css_files:
+    - "tabs.css"
+  javascript:
+    - "tabs.js"
+  icons: []
+  other_components: []
+related_components:
+  - name: "Vertical Navigation"
+    relationship: "alternative"
+    description: "Alternative navigation for hierarchical content"
+  - name: "Accordion"
+    relationship: "alternative"
+    description: "Alternative for collapsible content sections"
+  - name: "Path"
+    relationship: "similar"
+    description: "Similar multi-step navigation pattern"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/tabs/"
+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/textarea.yaml

@@ -0,0 +1,116 @@
+name: "Textarea"
+description: "A multi-line text input control that allows users to enter longer text content with automatic line wrapping and resize capabilities."
+category: "Input"
+slds_classes:
+  root: "slds-textarea"
+  elements: []
+  modifiers: []
+  states:
+    - class: "slds-has-error"
+      description: "Error state styling"
+      trigger: "When textarea validation fails"
+    - class: "slds-is-disabled"
+      description: "Disabled state styling"
+      trigger: "When textarea is not interactive"
+variants:
+  - name: "Base"
+    description: "Standard multi-line textarea"
+    classes:
+      - "slds-textarea"
+    usage_context: "Default textarea implementation for multi-line text input"
+    differences: "Multi-line text input with resizable height"
+lightning_component:
+  name: "lightning-textarea"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-textarea"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS textarea blueprint"
+accessibility:
+  keyboard_support:
+    - "Tab to focus the textarea"
+    - "Standard text editing keyboard shortcuts"
+    - "Enter for new lines within the textarea"
+    - "Scroll navigation for long content"
+  screen_reader:
+    - "Label text announced with the textarea"
+    - "Character and line limits communicated"
+    - "Error messages associated and announced"
+    - "Current content length when relevant"
+  aria_attributes:
+    - "aria-describedby for help text and error messages"
+    - "aria-invalid when validation fails"
+    - "aria-required for required textareas"
+    - "aria-label when no visible label present"
+usage_guidelines:
+  when_to_use:
+    - "For multi-line text input (comments, descriptions, notes)"
+    - "When users need to enter paragraphs of text"
+    - "For content where line breaks are important"
+    - "When single-line input is insufficient"
+  when_not_to_use:
+    - "For single-line text (use input instead)"
+    - "For rich text editing (use rich text editor)"
+    - "For selecting from options (use select or combobox)"
+  best_practices:
+    - "Set appropriate initial size for expected content"
+    - "Allow resizing when users might need more space"
+    - "Provide character limits when appropriate"
+    - "Use placeholder text to guide input"
+    - "Show character count for length-limited content"
+  common_mistakes:
+    - "Making textarea too small for expected content"
+    - "Not allowing resize when users need more space"
+    - "Poor validation feedback for character limits"
+    - "Missing or unclear labels"
+code_examples:
+  - title: "Basic Textarea"
+    code: |
+      <div class="slds-form-element">
+            <label class="slds-form-element__label" for="textarea-id-01">
+              <abbr class="slds-required" title="required">* </abbr>Textarea Label
+            </label>
+            <div class="slds-form-element__control">
+              <textarea id="textarea-id-01" class="slds-textarea" placeholder="Enter your comments..." required></textarea>
+            </div>
+            </div>
+  - title: "Textarea with Error"
+    code: |
+      <div class="slds-form-element slds-has-error">
+            <label class="slds-form-element__label" for="textarea-error">
+              <abbr class="slds-required" title="required">* </abbr>Textarea Label
+            </label>
+            <div class="slds-form-element__control">
+              <textarea id="textarea-error" class="slds-textarea" aria-describedby="textarea-error-message" required></textarea>
+            </div>
+            <div id="textarea-error-message" class="slds-form-element__help">This field is required</div>
+            </div>
+styling_hooks:
+  - name: "--slds-c-textarea-color-background"
+    description: "Background color for textarea"
+    category: "color"
+  - name: "--slds-c-textarea-color-border"
+    description: "Border color for textarea"
+    category: "color"
+dependencies:
+  css_files:
+    - "textarea.css"
+    - "form-element.css"
+  javascript: []
+  icons: []
+  other_components:
+    - "form-element"
+related_components:
+  - name: "Input"
+    relationship: "alternative"
+    description: "For single-line text input"
+  - name: "Rich Text Editor"
+    relationship: "alternative"
+    description: "Enhanced textarea with formatting capabilities"
+  - name: "Form Element"
+    relationship: "container"
+    description: "Form wrapper providing structure and validation"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/textarea/"
+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/tiles.yaml

@@ -0,0 +1,108 @@
+name: Tiles
+description: Visual components that display content in a card-like format with media elements, ideal for presenting items
+  in grid layouts or lists.
+category: Layout
+slds_classes:
+  root: slds-tile
+  elements:
+  - class: slds-tile__detail
+    description: Main content area of the tile
+    purpose: Contains title, description, and metadata
+  - class: slds-tile__meta
+    description: Metadata container
+    purpose: Additional information about the tile content
+  modifiers:
+  - class: slds-tile_board
+    description: Board-style tile for kanban layouts
+    usage: Tiles used in board or kanban interfaces
+  states:
+  - class: slds-is-selected
+    description: Selected tile state
+    trigger: When tile is currently selected
+  - class: slds-has-focus
+    description: Focus state for interactive tiles
+    trigger: When tile has keyboard focus
+variants:
+- name: Base
+  description: Standard tile with media and content
+  classes:
+  - slds-tile
+  usage_context: Default tile implementation for content display
+  differences: Media object pattern with visual element and content
+lightning_component:
+  name: lightning-tile
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-tile
+  mapping_notes: Direct mapping - Lightning component implements SLDS tile blueprint
+accessibility:
+  keyboard_support:
+  - Tab to focus interactive tiles
+  - Enter/Space to activate tile actions
+  - Arrow keys for grid navigation when appropriate
+  screen_reader:
+  - Tile content and purpose announced
+  - Media elements described appropriately
+  - Selection states communicated
+  - Associated actions clearly identified
+  aria_attributes:
+  - aria-labelledby for tile titles
+  - aria-describedby for tile metadata
+  - role='button' or 'link' for interactive tiles
+  - aria-selected for selectable tiles
+usage_guidelines:
+  when_to_use:
+  - For displaying collections of related content
+  - In grid layouts showing multiple items
+  - For content previews or summaries
+  - When visual hierarchy with media is beneficial
+  when_not_to_use:
+  - For simple text lists (use list components)
+  - When media elements are not relevant
+  - For complex interactive content (use cards instead)
+  best_practices:
+  - Use consistent tile sizing within collections
+  - Provide meaningful titles and descriptions
+  - Choose appropriate media elements
+  - Maintain good visual hierarchy
+  - Support keyboard navigation for interactive tiles
+  common_mistakes:
+  - Inconsistent tile sizes in the same collection
+  - Poor media element choices
+  - Unclear or missing tile labels
+  - Overloading tiles with too much information
+code_examples:
+- title: Basic Tile
+  code: "<div class=\"slds-tile\">\n      <div class=\"\">\n        <span class=\"slds-icon_container slds-icon-standard-account\"\
+    >\n          <svg class=\"slds-icon\" 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-tile__detail\">\n        <div class=\"\
+    \">\n          <a href=\"#\" title=\"Acme Corporation\">Acme Corporation</a>\n        </div>\n        <div class=\"slds-tile__meta\"\
+    >\n          <span class=\"slds-text-body_small\">Customer • San Francisco</span>\n        </div>\n      </div>\n    \
+    \  </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - tile.css
+  - media-objects.css
+  javascript: []
+  icons:
+  - standard-sprite.svg
+  - utility-sprite.svg
+  other_components:
+  - media-objects
+  - icons
+related_components:
+- name: Cards
+  relationship: similar
+  description: Similar container concept with more structure
+- name: Media Objects
+  relationship: depends-on
+  description: Based on media object layout pattern
+- name: Avatar
+  relationship: depends-on
+  description: Often used as media element in tiles
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/tiles/
+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/timepicker.yaml

@@ -0,0 +1,111 @@
+name: Timepicker
+description: Input controls that allow users to select time values through a dropdown interface with hours, minutes, and optional
+  AM/PM selection.
+category: Input
+slds_classes:
+  root: ''
+  elements: []
+  modifiers: []
+  states:
+  - class: slds-is-selected
+    description: Selected time state
+    trigger: Currently selected time option
+variants:
+- name: Base
+  description: Standard time selection dropdown
+  classes: []
+  usage_context: Default timepicker for time value selection
+  differences: Dropdown list with predefined time options
+lightning_component:
+  name: lightning-input (type='time')
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-input
+  mapping_notes: Mapped through lightning-input with type='time' which provides native time picker
+accessibility:
+  keyboard_support:
+  - Tab to focus timepicker input
+  - Arrow keys to navigate time options
+  - Enter/Space to select time
+  - Type to filter time options
+  screen_reader:
+  - Current time value announced
+  - Time options list communicated
+  - Selection changes announced
+  - Time format clearly communicated
+  aria_attributes:
+  - role='listbox' for time options container
+  - role='option' for individual time slots
+  - aria-selected for chosen time
+  - aria-label for time selection purpose
+  - aria-expanded for dropdown state
+usage_guidelines:
+  when_to_use:
+  - For time selection in forms
+  - When specific time precision is needed
+  - For scheduling or appointment interfaces
+  - When time constraints or ranges apply
+  when_not_to_use:
+  - For approximate times (use text input)
+  - When time precision is not important
+  - For duration selection (use different controls)
+  best_practices:
+  - Use appropriate time increments (15min, 30min, etc.)
+  - Provide clear time format indication
+  - Support both keyboard and mouse interaction
+  - Handle time zone considerations appropriately
+  - Show current selection clearly
+  common_mistakes:
+  - Using inappropriate time increments
+  - Poor time format handling
+  - Not considering time zone implications
+  - Unclear selection feedback
+code_examples:
+- title: Basic Timepicker
+  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\" for=\"timepicker-id\">\n     \
+    \   Time\n      </label>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-combobox_container\"\
+    >\n          <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"\
+    false\" aria-haspopup=\"listbox\">\n            <div class=\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\"\
+    >\n              <input type=\"text\" class=\"slds-input slds-combobox__input\" value=\"9:00 AM\" readonly />\n      \
+    \        <span class=\"slds-icon_container slds-icon-utility-clock 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#clock\"\
+    ></use>\n                </svg>\n              </span>\n            </div>\n            <div class=\"slds-dropdown slds-dropdown_length-5\
+    \ slds-dropdown_fluid\" role=\"listbox\">\n              <ul class=\"slds-listbox slds-listbox_vertical\">\n         \
+    \       <li role=\"presentation\" class=\"\">\n                  <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\"\
+    \ role=\"option\" aria-selected=\"true\">\n                    <span class=\"slds-media__body\">9:00 AM</span>\n     \
+    \             </div>\n                </li>\n                <li role=\"presentation\" class=\"\">\n                 \
+    \ <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\" role=\"option\">\n                    <span\
+    \ class=\"slds-media__body\">9:15 AM</span>\n                  </div>\n                </li>\n                <li role=\"\
+    presentation\" class=\"\">\n                  <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\"\
+    \ role=\"option\">\n                    <span class=\"slds-media__body\">9:30 AM</span>\n                  </div>\n  \
+    \              </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - timepicker.css
+  - combobox.css
+  - listbox.css
+  javascript:
+  - timepicker.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - combobox
+  - listbox
+  - input
+  - icons
+related_components:
+- name: Datepickers
+  relationship: similar
+  description: Complementary component for date selection
+- name: Datetime Picker
+  relationship: parent
+  description: Combined date and time selection component
+- name: Input
+  relationship: alternative
+  description: Alternative for manual time entry
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/timepicker/
+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/toast.yaml

@@ -0,0 +1,154 @@
+name: Toast
+description: Temporary notification messages that appear briefly to provide feedback about user actions or system events,
+  then automatically dismiss.
+category: Feedback
+slds_classes:
+  root: ''
+  elements:
+  - class: slds-notify_container
+    description: Container for toast notifications
+    purpose: Wraps and positions toast messages
+  - class: slds-notify__content
+    description: Content area of the toast
+    purpose: Contains the toast message and actions
+  - class: slds-notify__close
+    description: Close button for dismissible toasts
+    purpose: Allows manual dismissal of the toast
+  modifiers:
+  - class: slds-notify_toast
+    description: Toast notification styling
+    usage: Standard toast appearance
+  - class: slds-theme_success
+    description: Success toast variant
+    usage: For successful actions or positive feedback
+  - class: slds-theme_warning
+    description: Warning toast variant
+    usage: For warnings or caution messages
+  - class: slds-theme_error
+    description: Error toast variant
+    usage: For error messages or failed actions
+  - class: slds-theme_info
+    description: Info toast variant
+    usage: For informational messages
+  states: []
+variants:
+- name: Base
+  description: Standard toast notification
+  classes:
+  - slds-notify_toast
+  usage_context: Default toast implementation for temporary feedback
+  differences: Basic toast with message content and optional close button
+- name: Success
+  description: Success feedback toast
+  classes:
+  - slds-notify_toast
+  - slds-theme_success
+  usage_context: Positive feedback for successful actions
+  differences: Green styling indicating successful completion
+- name: Warning
+  description: Warning toast notification
+  classes:
+  - slds-notify_toast
+  - slds-theme_warning
+  usage_context: Caution or warning messages
+  differences: Yellow/orange styling for warnings
+- name: Error
+  description: Error toast notification
+  classes:
+  - slds-notify_toast
+  - slds-theme_error
+  usage_context: Error feedback for failed actions
+  differences: Red styling indicating errors or failures
+lightning_component:
+  name: lightning-toast
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-toast
+  mapping_notes: Direct mapping - Lightning component implements SLDS toast blueprint
+accessibility:
+  keyboard_support:
+  - Tab to focus close button if present
+  - Escape to dismiss toast when focused
+  - No additional keyboard interactions required
+  screen_reader:
+  - Toast content announced immediately when displayed
+  - Importance level conveyed through appropriate ARIA roles
+  - Close action clearly identified when available
+  aria_attributes:
+  - role='alert' for error toasts
+  - role='status' for informational toasts
+  - aria-live='assertive' for urgent messages
+  - aria-live='polite' for non-urgent updates
+  - aria-label for close buttons
+usage_guidelines:
+  when_to_use:
+  - For feedback on user actions (save, delete, etc.)
+  - To confirm successful operations
+  - For non-critical error messages
+  - To provide brief status updates
+  when_not_to_use:
+  - For critical errors requiring immediate action
+  - For complex information that needs user study
+  - For permanent status information
+  - When users need to interact with the message extensively
+  best_practices:
+  - Keep messages concise and actionable
+  - Use appropriate toast type for the message context
+  - Set reasonable auto-dismiss timing
+  - Position toasts consistently
+  - Avoid showing multiple toasts simultaneously
+  common_mistakes:
+  - Making toast messages too long or complex
+  - Using wrong toast type for the message severity
+  - Poor timing for auto-dismissal
+  - Overwhelming users with too many toasts
+code_examples:
+- title: Success Toast
+  code: "<div class=\"slds-notify_container slds-is-relative\">\n      <div class=\"slds-notify_toast slds-theme_success\"\
+    \ role=\"alert\">\n        <span class=\"slds-assistive-text\">Success</span>\n        <span class=\"slds-icon_container\
+    \ slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top\">\n          <svg class=\"slds-icon slds-icon_small\"\
+    \ aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#success\"></use>\n\
+    \          </svg>\n        </span>\n        <div class=\"slds-notify__content\">\n          <h2 class=\"slds-text-heading_small\"\
+    >Account created successfully!</h2>\n        </div>\n        <div class=\"slds-notify__close\">\n          <button class=\"\
+    slds-button slds-button_icon slds-button_icon-inverse\" title=\"Close\">\n            <svg class=\"slds-button__icon slds-button__icon_x-small\"\
+    \ aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n\
+    \            </svg>\n            <span class=\"slds-assistive-text\">Close</span>\n          </button>\n        </div>\n\
+    \      </div>\n      </div>\n"
+- title: Error Toast
+  code: "<div class=\"slds-notify_container slds-is-relative\">\n      <div class=\"slds-notify_toast slds-theme_error\" role=\"\
+    alert\">\n        <span class=\"slds-assistive-text\">Error</span>\n        <span class=\"slds-icon_container slds-icon-utility-error\
+    \ slds-m-right_small slds-no-flex slds-align-top\">\n          <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"\
+    true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n          </svg>\n\
+    \        </span>\n        <div class=\"slds-notify__content\">\n          <h2 class=\"slds-text-heading_small\">Unable\
+    \ to save changes. Please try again.</h2>\n        </div>\n      </div>\n      </div>\n"
+styling_hooks:
+- name: --slds-c-toast-color-background
+  description: Background color for default toasts
+  category: color
+dependencies:
+  css_files:
+  - toast.css
+  - notify.css
+  - themes.css
+  javascript:
+  - toast.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - button-icon
+  - icons
+related_components:
+- name: Alert
+  relationship: alternative
+  description: Alternative for persistent system-wide messages
+- name: Notifications
+  relationship: similar
+  description: Similar feedback mechanism with different positioning
+- name: Prompt
+  relationship: alternative
+  description: Modal dialogs for critical messages requiring action
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/toast/
+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.'