@salesforce/afv-skills 1.22.0 → 1.24.0

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

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

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

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

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

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